Ajax加载json与序列化

  json其实是JavaScript对象表示法,数据可以使用json来表示。它看起来非常像对象字面量语法,但它并不是对象。

  当json在服务和web浏览器之间传输的时候是以字符串形式来传送的,在将json对象转换成json字符串发送给服务器叫做序列化,在接受服务器发送过来的json字符串并且将其转换成json对象叫做反序列化。

  在JavaScript中有两种转换成json的方法:

  第一 eval()方法

var json = ‘[ { "name" : "卫庄", "age" : 20},{ "name" : "盖聂", "age" : 20},{ "name" : "谭慧东", "age" : 23}]‘; 
var box = eval(json);

  第二 JSON内建对象,但IE并不兼容,不过有大佬写了json2.js可以兼容IE,https://github.com/douglascrockford/JSON-js

  序列化方法: stringify()

var json = [ { name : "卫庄", age : 20},{ name : "盖聂", age : 20},{ name : "谭慧东", age : 23}];    //模拟json对象
var box = JSON.stringify(json);     //stringify 将JavaScript原生值转换为json格式值

  反序列化方法:parse()

var json = ‘[ { "name" : "卫庄", "age" : 20},{ "name" : "盖聂", "age" : 20},{ "name" : "谭慧东", "age" : 23}]‘;  //模拟获取json格式
var box = JSON.parse(json);      //parse 将json转换为JavaScript原生值。

  下面是ajax加载json

// json文件text.json{
    "events"  : [
        {
            "location" : "San Francisco, CA",
            "date" : "May 1",
            "map" : "img/001.jpg"
        },
        {
            "location" : "Austin, TX",
            "date" : "May 15",
            "map" : "img/002.jpg"
        },
        {
            "location" : "New York, NY",
            "date" : "May 30",
            "map" : "img/003.jpg"
        }
    ]
}
//js代码    var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject(‘Microsoft.XMLHTTP‘);  //获取ajax对象
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4 && xhr.status == 200){  //响应成功后
            var responseObject = JSON.parse(xhr.responseText);  //获取的json字符串转换成json对象
            var content = ‘<div class="header">‘;  //将对象结合标签对 转换HTML格式
            for (var i = 0; i < responseObject.events.length; i++){
                content += ‘<div class="date">‘;
                content += ‘<div class="image">‘;
                content += ‘<img src="‘ + responseObject.events[i].map + ‘" class="image‘ + (i+1) + ‘">‘;
                content += ‘</div>‘;
                content += ‘<p>‘ + responseObject.events[i].location + ‘</p>‘;
                content += ‘<span>‘ + responseObject.events[i].date + ‘</span>‘;
                content += ‘</div>‘;
            }
            content += ‘<div>‘;
            document.getElementById(‘container‘).innerHTML = content;  //使用innerHTML的赋值方式,将其添加到页面中。
        }
    }

    xhr.open(‘get‘,‘json/text.json‘,true);    //准备请求
    xhr.send(null);  //发送请求

原文地址:https://www.cnblogs.com/tanhuidong/p/8824784.html

时间: 2024-11-09 03:05:27

Ajax加载json与序列化的相关文章

vue通过ajax加载json数据

HTML <ul id="Hanapp"> <li class="styVue" v-for="item in actList"> <a class="img_li" :href="item.href"></a> <img :src="item.img" alt="" /> <span class=&q

JQuery跨域加载JSON数据或HTML。

前提:有时候需要在网页上,加载另一个网站上的数据.或者加载另一个网站上的一个页面.Js的Ajax请求不具备跨域功能,可以使用JQuery来实现. 网页端JS代码: $(function () { $.ajax({ type: "get", async: false, url: "http://localhost:13964/getpage.ashx?callback=?",//服务端URL,该URL返回一段JS数据.如需返回HTML,只需把HTML组织成JSON即可

访问修饰限定符的简单总结、final/abstruct/interface对类的限制、自动加载机制、序列化与反序列化【数据持久化和对象的序列化问题】、对象的拷贝(按引用是因为对象标识)和克隆(__clone方法中的this指向)

1.针对访问修饰限定符的理解只需要两点:(1)针对的是类的概念和访问代码的位置来确定是否能够访问(2)对访问修饰限定符的使用时只需要对该成员的使用场景注意即可[也就是内部,继承类,外部进行访问的权限] 不需要对内部进行太多理解[需要对php底层理解时进行理解] [重点][用途]通过访问修饰限定符将内部成员的权限合理的限制,然后再使用公共接口来调用这个基本服务,保证外部不能访问其内部的构件[这样既能够通过类内的设置,将内部的功能实现更好的限制,只有最外层的接口可以正常被访问到,而不了解内部的业务]

滑轮滚动到页面底部ajax加载数据

滚动下拉到页面底部加载数据是很多瀑布流网站的做法,那来看看配合jsonp是如何实现的吧 当然本例子采用的是jquery库,后期会做成原生js.本例的数据调用的是锋利的jquery一书提供的一段json. 首先要先判断页面怎么样才是滚动到底部,也就是scrollTop+window的height是否大于document的height,jquery如下代码: $(window).scrollTop()+$(window).height()>=$(document).height(): 再给windo

自制Javascript分页插件,支持AJAX加载和URL带参跳转两种初始化方式,可用于同一页面的多个分页和不同页面的调用

闲话部分 最近闲着实在无聊,就做了点小东西练练手,由于原来一直在用AspNetPager进行分页,而且也进行了深度的定制与原有系统整合的也不错,不过毕竟是用别人的,想着看自己能试着做出来不能,后台的分页插件已经有比较成熟的了,那就自己试着写一个前台分页吧. 话不多说,先上效果图: 优点与缺点 来说说优缺点吧,首先AspNetPager是后台分页控件,所以在向客户端回传HTML文档之前生成HTML阶段 就会把分页代码生成完毕,然后回传,而JS是前端代码,就是HTML文档在服务器组织完毕往客户端传送

使用getJSON()方法异步加载JSON格式数据

使用getJSON()方法异步加载JSON格式数据 使用getJSON()方法可以通过Ajax异步请求的方式,获取服务器中的数组,并对获取的数据进行解析,显示在页面中,它的调用格式为: jQuery.getJSON(url,[data],[callback])或$.getJSON(url,[data],[callback]) 其中,url参数为请求加载json格式文件的服务器地址,可选项data参数为请求时发送的数据,callback参数为数据请求成功后,执行的回调函数. 1 <!DOCTYPE

24.使用getJSON()方法异步加载JSON格式数据

使用getJSON()方法可以通过Ajax异步请求的方式,获取服务器中的数组,并对获取的数据进行解析,显示在页面中,它的调用格式为: jQuery.getJSON(url,[data],[callback])或$.getJSON(url,[data],[callback]) 其中,url参数为请求加载json格式文件的服务器地址,可选项data参数为请求时发送的数据,callback参数为数据请求成功后,执行的回调函数. 例如,点击页面中的“加载”按钮,调用getJSON()方法获取服务器中JS

angular-translate加载.json文件进行翻译

这是这个demo的目录结构,总共有两个文件:locale-chinese.json和translation11.html locale-chinese.json文件的内容是: { "beauty":"漂亮的", "ugly":"丑陋的", "people":"人民" } translation11.html的代码如下: 1 <!doctype html> 2 <html

商城项目:商品列表ajax加载,ajax加入购物车

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ProductLists.aspx.cs" Inherits="Hidistro.UI.Web.Vshop.ProductLists" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml">