• 企业400电话
  • 网络优化推广
  • AI电话机器人
  • 呼叫中心
  • 全 部 栏 目

    网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    Ajax使用JSON数据格式案例
    POST TIME:2021-10-18 06:13

    1:

    JSON(JavaScriptObject Notation)一种简单的数据格式,比xml更轻巧。JSON是JavaScript原生格式,这意味着在JavaScript中处理JSON数据不需要任何特殊的API或工具包。
    JSON的规则很简单:对象是一个无序的“‘名称/值'对”集合。一个对象以“{”(左括号)开始,“}”(右括号)结束。每个“名称”后跟一个“:”(冒号);“‘名称/值'对”之间使用“,”(逗号)分隔。
    JSON用冒号(而不是等号)来赋值。每一条赋值语句用逗号分开。整个对象用大括号封装起来。可用大括号分级嵌套数据。
    对象描述中存储的数据可以是字符串,数字或者布尔值。对象描述也可存储函数,那就是对象的方法。

    span style="font-size:18px;">{"person": { 
    "name":"Andy Budd", 
    "website":"http://andybudd.com/", 
    "email":"andy@clearleft.com" 
    } 
    }/span>

    JSON 只是一种文本字符串。它被存储在responseText 属性中
    为了读取存储在 responseText 属性中的JSON 数据,需要根据JavaScript 的eval语句。函数 eval会把一个字符串当作它的参数。然后这个字符串会被当作 JavaScript 代码来执行。因为 JSON 的字符串就是由 JavaScript 代码构成的,所以它本身是可执行的

    2:案例

    %@ page language="java" pageEncoding="UTF-8"%> 
    html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
    head> 
    meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
    title>People at Clearleft/title> 
    style type="text/css"> 
    @import url("clearleft.css"); 
    /style> 
    script type="text/javascript"> 
    window.onload=function(){ 
    var aNodes=document.getElementsByTagName("a"); 
    
    for(var i = 0;i  aNodes.length; i++){ 
    
    aNodes[i].onclick=function(){ 
    var request=new XMLHttpRequest(); 
    var url=this.href; 
    var method="GET"; 
    request.open(method,url); 
    request.send(null); 
    request.onreadystatechange=function(){ 
    if(request.readyState==4){ 
    if(request.status==200||request==304){ 
    var result=request.responseText; //json被存储在responseText属性中 
    var object=eval("("+result+")"); //读取responseText中的json数据 
    var name= object.person.name; //读取json对象中存储的数据 
    var website= object.person.website; 
    var email= object.person.email; 
    var aNode=document.createElement("a"); 
    aNode.appendChild(document.createTextNode(name+":"+"email"+":"+website)); 
    aNode.href="mailTo"+"email"+",website"; 
    var h2Node=document.createElement("h2"); 
    h2Node.appendChild(aNode); 
    var dtails=document.getElementById("details"); 
    details.innerHTML=""; //防止重复的添加字符串 
    dtails.appendChild(h2Node); 
    } 
    } 
    } 
    return false; 
    } 
    } 
    }; 
    /script> 
    /head> 
    body> 
    h1> 
    People 
    /h1> 
    ul> 
    li> 
    a href="files/andy.js">Andy/a> 
    /li> 
    li> 
    a href="files/richard.js">Richard/a> 
    /li> 
    li> 
    a href="files/jeremy.js">Jeremy/a> 
    /li> 
    /ul> 
    div id="details">/div> 
    /body> 
    /html>
    上一篇:Ajax修改购物车示例
    下一篇:ajax 返回值自动添加pre标签的解决方法
  • 相关文章
  • 

    关于我们 | 付款方式 | 荣誉资质 | 业务提交 | 代理合作


    © 2016-2020 巨人网络通讯

    时间:9:00-21:00 (节假日不休)

    地址:江苏信息产业基地11号楼四层

    《增值电信业务经营许可证》 苏B2-20120278

    X

    截屏,微信识别二维码

    微信号:veteran88

    (点击微信号复制,添加好友)

     打开微信