zoukankan      html  css  js  c++  java
  • Jquery 使用Ajax获取后台返回的Json数据后,页面处理

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  

    <html xmlns="http://www.w3.org/1999/xhtml">  

    <head>  

    <title></title>  

    <script src="JS/jquery-1.8.0.min.js" type="text/javascript"></script>  

    <script type="text/javascript">  

         $(function () {  

             $.ajax({  

                 url: 'jsondata.ashx',  

                 type: 'GET',  

                 dataType: 'json',  

                 timeout: 1000,  

                 cache: false,  

                 beforeSend: LoadFunction, //加载执行方法    

                 error: erryFunction,  //错误执行方法    

                 success: succFunction //成功执行方法    

             })  

             function LoadFunction() {  

                 $("#list").html('加载中...');  

             }  

             function erryFunction() {  

                 alert("error");  

             }  

             function succFunction(tt) {  

                 $("#list").html('');  

                 //eval将字符串转成对象数组  

                 //var json = { "id": "10086", "uname": "zhangsan", "email": "zhangsan@qq.com" };  

                 //json = eval(json);  

                 //alert("===json:id=" + json.id + ",uname=" + json.uname + ",email=" + json.email);  

                 var json = eval(tt); //数组         

                 $.each(json, function (index, item) {  

                     //循环获取数据    

                     var name = json[index].Name;  

                     var idnumber = json[index].IdNumber;  

                     var sex = json[index].Sex;  

                     $("#list").html($("#list").html() + "<br>" + name + " - " + idnumber + " - " + sex + "<br/>");  

                 });  

             }  

         });  

    </script>  

    </head>  

    <body>  

    <ul id="list">  

    </ul>  

    </body>  

    </html>  

  • 相关阅读:
    第15周作业
    迟到的第14周作业
    第13周作业集
    第11次作业--字符串处理
    找回感觉的练习
    第9次作业--接口及接口回调
    20194684 + 自动生成四则运算题第一版报告
    css的calc在less文件中计算有误问题
    react 细节整理
    js async属性
  • 原文地址:https://www.cnblogs.com/alice-you/p/7929221.html
Copyright © 2011-2022 走看看