Analysis json ajax request with data and analytical js (analysis example)

This should be every web development staff should master the basic technologies, need friends can refer to the following

Since contact with jquery in love with the front-end development, but also deeply felt the strong front-end development and the important point. I also wanted to complain to asp.net, asp.net in fact did not bloated, bloated that it is nothing more than people who do not understand it, they could see some low-level asp.net programmers continue to drag pages control, and then found that the generated page contains a lot of junk code, but almost all of the logic written on the server side, the server felt too much pressure. In fact, just to get into the habit of people will drag asp.net control, but when you go any further you will find that eventually asp.net development model or with PHP, jsp and other web development model is the same, PHP is html + css + js + PHP language is asp.net html + css + js + C # language, the only difference server-side language only (for developers), if you see here said asp.net very bloated, because .net framework required to support, then why not say jsp very bloated? jsp also need the support of java virtual machine ah! Return data server - - all web development is based on the client requesting the client reprocess this data model, and the benefits of asp.net development model that is well separated from the server-side code with the client, not in html in nested server code - this model is now almost certainly been developed using various web.

Digress. We must grasp today rarely, I prefer to use less code to write demo, so we are more easy to grasp (the content a little lower, Great God, please pass).

So we built a web project:

 

 First write client html code

<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 code

$(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);
      }
    });
  });
});

 In order to make the table look good, we define what its style

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

 Then write the code server returns data json

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

 

Here I write directly to json format the data. In general the need to read data from the database and then put together into json format, or someone else can use some sequences written into class json data, of course, I suggest you write your own, generate a library to facilitate future use .

If you need to explain what is json, xml, etc., and it is the number of parallel data to a data format, the form: [{ "id": "1", "name": "Joe Smith", "age": " 20 "}, {" id ":" 2 "," name ":" John Doe "," age ":" 18 "}] this format.

This should be every web development staff should master the basic technologies of it.