轻松玩转json与jQuery的交互

最新推荐文章于 2022-03-26 22:45:35 发布

hehaoyang007

最新推荐文章于 2022-03-26 22:45:35 发布

阅读量1k

点赞数

本文链接：https://blog.csdn.net/hehaoyang666/article/details/38338419

版权

JQuery 同时被 2 个专栏收录

23 篇文章 0 订阅

订阅专栏

json

2 篇文章 0 订阅

订阅专栏

说到交互不得不提的就是：jQuery的$.ajax(),$.post(),$.get(),$.getJson()

$.ajax()是后几种的综合，他可以完成后几种的任何请求，以下讲述以$.ajax()为例。

$.ajax({
  type: "GET",//以GET方式发送请求
  url: "路径",
  data：{username:"",password:""}
  dataType: "json"
  success:function(data){
                $('.parms_query .recordId').empty();
                alert(data.length);
                if(0==data.length){
                    var option = $("<option>").val("").text(无文档);
                    $('.parms_query .recordId').append(option);
                }else{
                    $.each(data,function(i,item){
                        var option = $("<option>").val(item.seq).text(item.originalName);
                        $('.parms_query .recordId').append(option);
                    })
                }
            
   }
 });

如果dataType设置为json:如果服务器（比如springmvc的@RequestBody标记的方法的return值）返回的是object组成的链表（List）jQuery把它解析成数组Array

值得注意的是，$.each()遍历Map的时候，function()中的参数是key和value，十分方便。

如果jquery异步请求没做dataType说明，对于服务器返回的JSON字符串，或者以字符串方式接受，那么需要做一次对象化处理，方式不是太麻烦，就是将该字符串放于eval()中执行一次。这种方式也适合以普通javascipt方式获取json对象，以下举例说明：

var dataObj=eval("("+data+")");//转换为json对象
alert(dataObj.root.length);//输出root的子对象数量
$.each(dataObj.root,fucntion(idx,item){
if(idx==0){
return true;
}
//输出每个root子对象的名称和值
alert("name:"+item.name+",value:"+item.value);
})

注：对于一般的js生成json对象，只需要将$.each()方法替换为for语句即可，其他不变。