Jquery getJSON方法详细分析


Posted in Javascript onDecember 26, 2013

准备工作
·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对。

Javascript 相关文章推荐
jQuery UI AutoComplete 自动完成使用小记
Aug 21 Javascript
jquery得到font-size属性值实现代码
Sep 30 Javascript
textarea 控制输入字符字节数(示例代码)
Dec 27 Javascript
简介JavaScript中的italics()方法的使用
Jun 08 Javascript
jquery zTree异步加载、模糊搜索简单实例分享
Mar 24 Javascript
json格式的javascript对象用法分析
Jul 04 Javascript
微信小程序 出现错误:{&quot;baseresponse&quot;:{&quot;errcode&quot;:-80002,&quot;errmsg&quot;:&quot;&quot;}}解决办法
Feb 23 Javascript
jQuery实现列表的增加和删除功能
Jun 14 jQuery
JS选取DOM元素常见操作方法实例分析
Dec 10 Javascript
JavaScript中import用法总结
Jan 20 Javascript
vue计算属性computed、事件、监听器watch的使用讲解
Jan 21 Javascript
微信小程序实现登录注册功能
Dec 29 Javascript
JQuery判断HTML元素是否存在的两种解决方法
Dec 26 #Javascript
JS 仿腾讯发表微博的效果代码
Dec 25 #Javascript
javascript使用定时函数实现跳转到某个页面
Dec 25 #Javascript
JS不间断向上滚动效果代码
Dec 25 #Javascript
js中同步与异步处理的方法和区别总结
Dec 25 #Javascript
在javascript中实现函数数组的方法
Dec 25 #Javascript
js 时间格式与时间戳的相互转换示例代码
Dec 25 #Javascript
You might like
Ajax+PHP 边学边练 之二 实例
2009/11/24 PHP
php中拷贝构造函数、赋值运算符重载
2012/07/25 PHP
php调整gif动画图片尺寸示例代码分享
2013/12/05 PHP
CI框架中cookie的操作方法分析
2014/12/12 PHP
php计算多维数组中所有值总和的方法
2015/06/24 PHP
php邮箱地址正则表达式验证
2015/11/13 PHP
PHP使用preg_split和explode分割textarea存放内容的方法分析
2017/07/03 PHP
收藏一些不常用,但是有用的代码
2007/03/12 Javascript
node.js chat程序如何实现Ajax long-polling长链接刷新模式
2012/03/13 Javascript
从面试题学习Javascript 面向对象(创建对象)
2012/03/30 Javascript
javascript查找字符串中出现最多的字符和次数的小例子
2013/10/29 Javascript
完美解决AJAX跨域问题
2013/11/01 Javascript
Jquery动态替换div内容及动态展示的方法
2015/01/23 Javascript
Node.js返回JSONP详解
2016/05/18 Javascript
vue中v-model动态生成的实例详解
2017/10/27 Javascript
JavaScript定义及输出螺旋矩阵的方法详解
2017/12/01 Javascript
vue.js 实现点击展开收起动画效果
2018/07/07 Javascript
JS实现根据详细地址获取经纬度功能示例
2019/04/16 Javascript
记录vue做微信自定义分享的一些问题
2019/09/12 Javascript
Python 错误和异常小结
2013/10/09 Python
python爬虫常用的模块分析
2014/08/29 Python
python3.4实现邮件发送功能
2018/05/28 Python
Python RabbitMQ消息队列实现rpc
2018/05/30 Python
python如何发布自已pip项目的方法步骤
2018/10/09 Python
浅谈django的render函数的参数问题
2018/10/16 Python
Django Aggregation聚合使用方法解析
2019/08/01 Python
pip install python 快速安装模块的教程图解
2019/10/08 Python
python实现树的深度优先遍历与广度优先遍历详解
2019/10/26 Python
浅谈matplotlib.pyplot与axes的关系
2020/03/06 Python
Python直接赋值及深浅拷贝原理详解
2020/09/05 Python
HTML5拍照和摄像机功能实战详解
2019/01/24 HTML / CSS
Wojas罗马尼亚网站:波兰皮鞋品牌
2018/11/01 全球购物
如何为DataGridView添加一个定制的Column Type
2014/01/21 面试题
毕业设计指导教师评语
2014/12/30 职场文书
中秋节祝酒词
2015/08/12 职场文书
《检阅》教学反思
2016/02/22 职场文书