浅析ajax请求json数据并用js解析(示例分析)

发布时间：2020-12-16 00:16:41 所属栏目：百科来源：网络整理

导读：首先写客户端的html代码复制代码代码如下: table thead tr td学号/td td姓名/td td班别/td td性别/td td电话/td /tr /thead tbody/tbody /table input id="btnget" type="button" value="加载数据" / js代码复制代码代码如下: $(function () { $("#btnge

首先写客户端的html代码

复制代码代码如下:

 
 <table> 
 
  <thead> 
 
  <tr> 
 
  <td>学号</td> 
 
  <td>姓名</td> 
 
  <td>班别</td> 
 
  <td>性别</td> 
 
  <td>电话</td> 
 
  </tr> 
 
  </thead> 
 
  <tbody></tbody> 
 
 </table> 
 
 <input id="btnget" type="button" value="加载数据" />

js代码

复制代码代码如下:

 
 $(function () { 
 
  $("#btnget").click(function () { 
 
  $.ajax({ 
 
  type: "post",
  dataType: "json",
  url: "data.ashx",
  success: function (msg) { 
 
  var str = ""; 
 
  for (i in msg) { 
 
  str += "<tr><td>" + msg[i].id + "</td><td>" + msg[i].name + "</td><td>" + msg[i].cla + "</td><td>" + msg[i].sex + "</td><td>" + msg[i].tel + "</td></tr>"; 
 
  } 
 
  $("tbody").append(str); 
 
  } 
 
  }); 
 
  }); 
 
 });

为了使表格好看一些，我们定义一下它的样式

复制代码代码如下:

 
 <style type="text/css"> 
 
  table { 
 
  border-collapse: collapse; 
 
  } 
 
  table td { 
 
  text-align: center; 
 
  border: 1px solid gray; 
 
  padding: 3px 10px; 
 
  } 
 
 </style>

然后写服务器端返回json数据的代码

复制代码代码如下:

 
 string data = "[{"id":"2010324268","name":"林宇","cla":"10软件","sex":"男","tel":"13800138000"},{"id":"2010324256","name":"李四","cla":"10网络","sex":"女","tel":"10010"},{"id":"2010324264","name":"张三","tel":"10086"}]"; 
 
 context.Response.Write(data);

这里我直接把json数据写好格式了。一般来说是需要从数据库把数据读取出来然后拼凑成json格式，或者可以使用别人写好的一些序列化成json数据的类，当然，我更建议你自己写一个，生成一个类库方便以后使用。

如果需要解释一下json是什么，它是和xml等等一些数据并列的一种数据格式，形如：[{"id":"1","name":"张三","age":"20"},{"id":"2","name":"李四","age":"18"}]这样的格式。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!