Jquery getJSON方法详细分析

准备工作
·Customer类


代码如下:

public class Customer
{
    public int Unid { get; set; }
    public string CustomerName { get; set; }
    public string Memo { get; set; }
    public string Other { get; set; }
}

·服务端处理（Json_1.ashx）


代码如下:

Customer customer = new Customer
      { Unid=1,CustomerName="宋江",Memo="天魁星",Other="黑三郎"};
string strJson = Newtonsoft.Json.JsonConvert.SerializeObject(customer);

context.Response.Write(strJson);

（一）Jquery. getJSON

方法定义：jQuery.getJSON( url, data, callback )

通过get请求得到json数据
·url用于提供json数据的地址页
·data(Optional)用于传送到服务器的键值对
·callback(Optional)回调函数，json数据请求成功后的处理函数


代码如下:

function(data, textStatus) {
        // data是一个json对象
        // textStatus will be "success"
       this; // the options for this ajax request
}

（1）一个对象


代码如下:

$.getJSON(
    "webdata/Json_1.ashx",
    function(data) {
       $("#divmessage").text(data.CustomerName);
    }
);

向Json_1.ashx地址请求json数据，接收到数据后，在function中处理data数据。 这里的data的数据是一条记录，对应于一个customer实例，其中的数据以k/v形式存在。即以[object,object]数组形式存在。
{"Unid":1,"CustomerName":"宋江","Memo":"天魁星","Other":"黑三郎"}

所以在访问时，以data.Property来访问，下面以k/v循环来打印这条宋江的记录：


代码如下:

$.getJSON(
    "webdata/Json_1.ashx",
    function(data) {
        var tt="";
        $.each(data, function(k, v) {
            tt += k + "：" + v + "<br/>";
        })
        $("#divmessage").html(tt);
});

结果：
Unid：1
CustomerName：宋江
Memo：天魁星
Other：黑三郎

（2）对象数组
Ashx文件（Json_1.ashx）修改：


代码如下:

List<Customer> _list = new List<Customer>();
Customer customer = new Customer
       { Unid=1,CustomerName="宋江",Memo="天魁星",Other="黑三郎"};
Customer customer2 = new Customer
       { Unid = 2, CustomerName = "吴用", Memo = "天机星", Other = "智多星" };

_list.Add(customer);
_list.Add(customer2);
string strJson = Newtonsoft.Json.JsonConvert.SerializeObject(_list);

它生成的json对象的字符串是：

[{"Unid":1,"CustomerName":"宋江","Memo":"天魁星","Other":"黑三郎"},
{"Unid":2,"CustomerName":"吴用","Memo":"天机星","Other":"智多星"}]

这里可以看到做为集合的json对象不是再一条记录，而是2条记录，是一个[[object,object]]数组：[object,object][object,object]，而每个[object,object]表示一条记录，对应一个Customer，其实也是k/v的形式，而这个v就是一个Customer对象，而这个k是从0开始的索引。


代码如下:

$.getJSON(
    "webdata/Json_1.ashx",
    function(data) {
        $.each(data, function(k, v) {
            alert(k);
        });
});

这时，k值为0,1……

列表json对象的方法：


代码如下:

$.getJSON(
    "webdata/Json_1.ashx",
    function(data) {
        var tt = "";
        $.each(data, function(k, v) {
            $.each(v,function(kk, vv) {
                tt += kk + "：" + vv + "<br/>";
            });
        });
        $("#divmessage").html(tt);
});

结果：
Unid：1
CustomerName：宋江
Memo：天魁星
Other：黑三郎
Unid：2
CustomerName：吴用
Memo：天机星
Other：智多星

这里用了嵌套循环，第一个循环用于从List中遍历Customer对象，第二个循环用于从Customer对象中遍历Customer对象的属性，也就是k/v对。

赞 (0)

相关推荐

  • 用原生JavaScript实现jQuery的$.getJSON的解决方法

    今天在写一DEMO,其中用到了jQuery的$.getJSON方法,写完后发现整个DEMO中用到jQuery中的就这一个地方,但要引入一个jQuery实在不划算,于是就自己实现了一个简单版的,基本可以满足需求,现分享出来: 复制代码 代码如下: var $ = {    getJSON: function(url, params, callbackFuncName, callback){        var paramsUrl ="",            jsonp = this

  • jQuery中$.get、$.post、$.getJSON和$.ajax的用法详解

    当我们用javascript写ajax程序写得很"开心"的时候,突然有人告诉你有一种东西叫jquery,它会告诉你不直接和HttpRequest是多么的快乐,同时你再也不需要再烦恼纠结的ajax乱码问题,更幸福的是你的js代码将大大地简化,看完本文,你会发现,ajax,简单的来讲就是一句话的事情. 1.$.get $.get()方法使用GET方式来进行异步请求,它的语法结构为: $.get( url [, data] [, callback] ) 解释一下这个函数的各个参数: url:

  • jQuery getJSON 处理json数据的代码

    Html代码: 复制代码 代码如下: <script type="text/javascript" src="/js/jquery-1.4.js"></script> <script type="text/javascript"> function jsonTest1() { $.ajax({ url:"Handler.ashx", data:{"type":"

  • jQuery使用getJSON方法获取json数据完整示例

    jQuery使用getJSON方法获取json数据完整示例

    本文实例讲述了jQuery使用getJSON方法获取json数据.分享给大家供大家参考,具体如下: demo.js: [ { "name":"吴者然", "sex":"男", "email":"demo1@123.com" }, { "name":"吴中者", "sex":"男", "email&q

  • jQuery中$.ajax()和$.getJson()同步处理详解

    一.前言 为什么需要用到同步,因为有时候我们给一个提交按钮注册提交表单数据的时候,在提交动作之前会进行一系列的异步ajax请求操作,但是页面js代码会按顺序从上往下面执行,如果你在这过程中进行了异步操作,那么获取不到当前异步操作返回的结果,js会继续执行下一条语句,所以我们需要同步操作请求获取后台返回数据结果后,判断结果是否符合再执行js下一条语句. 二.$.ajax()参数解释 url: 发送请求的地址. type: 请求方式(post或get)默认为get. timeout: 要求为Numb

  • JQuery中getJSON的使用方法

    这里采用了JSONP(JSON with Padding-填充json数据也就是常用的json跨域方式):利用script标签,通过特定的src地址的调用,来执行一个客户端的js函数,在 服务器端生成相对的数据(JSON格式)并以参数的形式传递给这个客户端的js函数并执行这个函数,前提是需要服务器端的数据输出支持.在JQuery1.2以后支持JSONP的应用. JSON 是一种含有简单括号结构的纯文本,因此许多通道都可以交换 JSON 消息.因为同源策略的限制,我们不能在与外部服务器进行通信的时

  • ie下jquery.getJSON的缓存问题的处理方法

    在项目中遇到一个问题,在火狐下,$.getJSON();请求数据一切正常,但是在IE下面,$.getJSON():只请求一次数据,第二次根本就不发送请求了,用fiddler抓取了才知道,第二次没有发送请求,改成了post就正常了 $.getJSON()存在缓存问题,如果其调用的url之前曾经调用过的话,回调函数就会直接在缓存里取得想要得值,而不是进入到后台 解决方法如下: 1.让每次调用的URL都不一样. 方法:在参数中加一个随机数 复制代码 代码如下: $.getJSON("/Member/G

  • jquery $.getJSON()跨域请求

    1,同一域名下和其他的请求可以是一样的 js: 复制代码 代码如下: var url="http://localhost:2589/a.ashx"; $(function(){ $.getJSON(url,function(data){ alert (data.Name); }) }); 服务器返回字符串: {"Name":"loogn","Age":23} 2,不同域名下 js: 复制代码 代码如下: var url=&qu

  • JQuery 获取json数据$.getJSON方法的实例代码

    前台:  复制代码 代码如下: function SelectProject() {            var a = new Array;            var r = window.showModalDialog('SelProject.aspx', a, "dialogWidth=1000px; dialogHeight=600px; resizable: yes");            if (typeof (r) != 'undefined') {      

  • JQuery中的$.getJSON 使用说明

    原型如下: jQuery.getJSON( url, [data], [callback] ) 跨域加载JSON数据. url: 发送请求的地址 data : (可选) 待发送key/value参数 callback: (可选) 载入成功时的回调函数 主要用于客户端获取服务器JSON数据.简单示例: 服务器脚本,返回JSON数据: $.getJSON.php $arr=array("name"=>"zhangsan", "age"=>

  • jQuery+ajax中getJSON() 用法实例

    实例 从 test.js 载入 JSON 数据并显示 JSON 数据中一个 name 字段数据: 复制代码 代码如下: $.getJSON("test.js", function(json){   alert("JSON Data: " + json.users[3].name); }); 定义和用法 通过 HTTP GET 请求载入 JSON 数据. 在 jQuery 1.2 中,您可以通过使用 JSONP 形式的回调函数来加载其他网域的 JSON 数据,如 &q

  • Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结

    详细解读Jquery各Ajax函数: $.get(),$.post(),$.ajax(),$.getJSON() 一,$.get(url,[data],[callback]) 说明:url为请求地址,data为请求数据的列表,callback为请求成功后的回调函数,该函数接受两个参数,第一个为服务器返回的数据,第二个参数为服务器的状态,是可选参数. 而其中,服务器返回数据的格式其实是字符串形势,并不是我们想要的json数据格式,在此引用只是为了对比说明 复制代码 代码如下: $.get("dat

随机推荐