ajax 对 Json 格式的解析

Ajax 前端之家
前端之家收集整理的这篇文章主要介绍了ajax 对 Json 格式的解析，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

Json 的介绍：

JSON 可以将 JavaScript 对象中表示的一组数据转换为字符串，然后就可以在函数之间轻松地传递这个字符串，或者在异步应用程序中将字符串从 Web 客户机传递给服务器端程序。

按照最简单的形式，可以用下面这样的 JSON 表示名称/值对：

{ "firstName": "Brett" }

这样的键/值对也可以是多个：

{"name":"aaa","sex":"男","age":"20"}
从语法方面来看，这与名称/值对相比并没有很大的优势，但是在这种情况下 JSON 更容易使用，而且可读性更好。

值的数组

当需要表示一组值时，JSON 不但能够提高可读性，而且可以减少复杂性。

如果使用 JSON，就只需将多个带花括号的记录分组在一起：

{ "people": [
{ "firstName": "Brett","lastName":"McLaughlin","email": "111111" },
{ "firstName": "Jason","lastName":"Hunter","email": "22222" },
{ "firstName": "Elliotte","lastName":"Harold","email": "33333" }
]}

可以使用相同的语法表示多个值（每个值包含多个记录）：

{ "programmers": [
{ "firstName": "Brett","email": "3333" },"email": "1222" },"email": "3333" }
],
"authors": [
{ "firstName": "Isaac","lastName": "Asimov","genre": "science fiction" },
{ "firstName": "Tad","lastName": "Williams","genre": "fantasy" },
{ "firstName": "Frank","lastName": "Peretti","genre": "christian fiction" }
],
"musicians": [
{ "firstName": "Eric","lastName": "Clapton","instrument": "guitar" },
{ "firstName": "Sergei","lastName": "Rachmaninoff","instrument": "piano" }
]
}

Json也可以这样写：

{ "listaccountsresponse" : { "count":1,"account" : [ {"id":5,"name":"xian1","accounttype":0,"domainid":2,"domain":"Server","receivedbytes":649444,"sentbytes":175467975,"vmlimit":"20","vmtotal":2,"vmavailable":"18","iplimit":"20","iptotal":1,"ipavailable":"19","volumelimit":"20","volumetotal":2,"volumeavailable":0,"templateavailable":"20","vmstopped":0,"vmrunning":2,"state":"enabled","user":[{"id":5,"username":"xian1","firstname":"Eric","lastname":"Tang","email":"Wang-Ngai.Tang@pccw.com","created":"2012-03-22T09:36:44+0800","account":"xian1","domainid":2,"timezone":"Asia/Shanghai"}]} ] } }

ajax对Json格式数据的解析：

1.对简单json格式的解析：

{ "firstName": "Brett" }

@H_404_78@ 写道
$.ajax({
url:"这里是你要请求的地址",
data:{"id":id},//以键/值对的形式
async : false,
dataType : "json",
success : function(data) {
alert("firstName = " + data.firstName);
}
});

注：这里的data是你从后台穿过来的Json字符传串。

后台写法：

Java代码
  1. response.setCharacterEncoding("utf-8");
  2. response.setContentType("text/json;charset=UTF-8");
  3. PrintWriterout=null;
  4. Stringcount="<spanstyle="color:#000000;">{"firstName":"Brett"}</span>
  6. ;
  7. try{
  8. out=response.getWriter();
  9. }catch(Exceptione){
  10. e.printStackTrace();
  11. }
  12. out.print(count);
  13. out.flush();

这样就能在前台页面弹出提示框：firstName = Brett。

2.多个键/值对和上面的情况一样

3.解析Json如下数组：

{

{ "firstName": "Brett","email": "33333" }
}

Js代码
    $.ajax({
  1. url:"这里是你要请求的地址",
  2. data:{"id":id},//以键/值对的形式
  3. async:false,250); line-height:18px"> dataType:"json",250); line-height:18px"> success:function(data){
  4. for(inti=0;i<data.length;i++){//循环后台传过来的Json数组
  5. vardatas=data[i];
  6. alert(datas.firstName);
  7. alert(datas.lastName);
  8. alert(datas.email);
  9. });

4.解析如下Json数据

varpro=data.programmers;//pro为programmers的一个数组
  • inti=0;i<pro.length;i++){vardatas=pro[i];
  • alert(pro.firstName);
  • alert(pro.lastName);
  • alert(pro.email);
  • varaut=data.authors;//aut为authors的一个数组
  • inti=0;i<aut.length;i++){vardatas=aut[i];
  • alert(aut.firstName);
  • alert(aut.lastName);
  • alert(aut.genre);
  • varmus=data.musicians;inti=0;i<mus.length;i++){vardatas=mus[i];
  • alert(mus.firstName);
  • alert(mus.lastName);
  • alert(mus.instrument);
  • 5.

    varaccounts=data.listaccountsresponse.account;//取到“account”中的数据

  • inti=0;i<accounts.length;i++){vardatas=accounts[i];
  • alert(datas.id);
  • alert(datas.name);
  • alert(datas.accounttype);
  • ..........
  • -----这里是自己写的一个后台传值----------------------------------------------------------------------------------------------------------

    @RequestMapping(value="/applyVm/listApplyVmCount",method={RequestMethod.GET,RequestMethod.POST})

  • publicvoidlistApplyVmCount(HttpServletRequestrequest,HttpServletResponseresponse){
  • Stringcount="";
  • Map<String,Integer>map=applyVmService.findApplyVmCount();
  • Gsongson=newGson();
  • count=gson.toJson(map);
  • out.flush();
  • }
    • 原文链接：https://www.f2er.com/ajax/162526.html

    猜你在找的Ajax相关文章

    网页的异步请求（Ajax）
    JS原生Ajax操作(XMLHttpRequest) GET请求 POST请求 兼容性问题 利用iframe模拟ajax 实现表...
    手动实现AJAX
    AJAX 每日更新前端基础，如果觉得不错，点个star吧 &#128515; https://github.com/Win...
    axios异步提交表单数据的不同形式
    踩坑Axios提交form表单几种格式 前后端分离的开发前后端, 前端使用的vue,后端的安全模块使...
    php的ajax简单实例
    很早就听闻ajax的名声，但是却一直不知道怎么用，今天自己捣鼓了一下，竟然会用了，哈哈哈...
    Json与Ajax(注册实例）
    需要在服务器上进行哈 jquery的ajax方法： // jquery请求 $.ajax({ url: &quot;./serv...
    jSon和Ajax登录功能，ajax数据交互案例
    ajax实例，检测用户与注册 检测用户名是否被占用： 在用户填写完用户名之后，ajax会异步向...
    关于AjaxControlToolkit的样式问题
    网(LieHuo.Net)教程 技术文章一直都是转载的,从来没有自创过.终于遇到AjaxControlToolkit,...
    一个简单的AJAX实现(HELLO AJAX)
    客户端部分： <html> <head> <meta http-equiv="Content-Type" ...
    AJAX中文乱码的两类问题及解决之策
    1）发送路径中的参数有中文，在服务器段接收参数值是乱码 例如： var url=”a.jsp?na...
    实例：AJAX返回xml代码如何在网页中显示
    建站学院（LieHuo.Net）文档 今天来学习一篇实例代码教程：AJAX返回xml代码如何在网页中显...
    HTMLHTML5JavaScriptCSSjQueryBootstrapAngularjsTypeScriptVueDojoJsonElectronNode.jsextjsExpress XMLES6AjaxFlashUnityReactFlexAnt DesignWeb前端微信小程序微信公众号
    关闭广告单独headers封装代码提示错误整数正则非0开头跳页出页码antd table提示URL未注册公众号支付vue hash模式iSlider车牌键盘循环图片echarts 双折左右布局DllPlugin对象创建打字游戏圈选两栏云函数蒙版ES2020橱窗无缝滚动轮播色块碰撞组件销毁文档操作