Jquery 使用Ajax获取后台返回的Json数据后,页面处理

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4.     <title></title>  
  5.     <script src="JS/jquery-1.8.0.min.js" type="text/javascript"></script>  
  6.     <script type="text/javascript">  
  7.      $(function () {  
  8.          $.ajax({  
  9.              url: 'jsondata.ashx',  
  10.              type: 'GET',  
  11.              dataType: 'json',  
  12.              timeout: 1000,  
  13.              cache: false,  
  14.              beforeSend: LoadFunction, //加载执行方法    
  15.              error: erryFunction,  //错误执行方法    
  16.              success: succFunction //成功执行方法    
  17.          })  
  18.          function LoadFunction() {  
  19.              $("#list").html('加载中...');  
  20.          }  
  21.          function erryFunction() {  
  22.              alert("error");  
  23.          }  
  24.          function succFunction(tt) {  
  25.              $("#list").html('');  
  26.   
  27.              //eval将字符串转成对象数组  
  28.              //var json = { "id": "10086", "uname": "zhangsan", "email": "zhangsan@qq.com" };  
  29.              //json = eval(json);  
  30.              //alert("===json:id=" + json.id + ",uname=" + json.uname + ",email=" + json.email);  
  31.   
  32.              var json = eval(tt); //数组         
  33.              $.each(json, function (index, item) {  
  34.                  //循环获取数据    
  35.                  var name = json[index].Name;  
  36.                  var idnumber = json[index].IdNumber;  
  37.                  var sex = json[index].Sex;  
  38.                  $("#list").html($("#list").html() + "<br>" + name + " - " + idnumber + " - " + sex + "<br/>");  
  39.              });  
  40.          }  
  41.      });  
  42.     </script>  
  43. </head>  
  44. <body>  
  45.     <ul id="list">  
  46.     </ul>  
  47. </body>  
  48. </html>  

没有更多推荐了,返回首页