Analysis of ajax request json data and js parsing (Example Analysis) _ jquery

Source: Internet
Author: User
This should be the basic technology that every web developer should master. If you need it, you can refer to the front-end development that you like since getting started with jquery, in addition, I deeply felt the strength and importance of front-end development. At the same time, I also want to make asp.net sound uneven. In fact, asp.net is not bloated. People who say it is bloated are nothing more than those who don't know it, maybe they have seen some low-level asp.net programmers constantly drag controls into the page, and then find that the generated page contains a lot of junk code, in addition, almost all the logic processing is written on the server side, and the pressure on the server is too high. In fact, people who just got started with asp.net will have the habit of dragging controls, but when you dive deeper, you will find that, in the end, the development mode of asp.net is the same as other web development modes such as PHP and jsp. PHP is the html + css + js + PHP language, asp.net is the html + css + js + C # language. The only difference is the server-side language (for developers). If you see it, asp.net is too bloated because of the need. net Framework support, so why not say that jsp is very bloated? Jsp also requires support from the Java Virtual Machine! All web development is based on the client sending request-server return data-client re-processing data mode, and the advantage of the asp.net development mode is that the server and client code are well separated, you don't need to nest the server-side code in html. Of course, this mode is now used by almost all kinds of web development.

Far away. We have very few skills today. I prefer to use very few code to write a demo, so that everyone can easily master it (the content is a bit low-level, Please bypass it ).

Create a web project:

First, write the html code of the client.

The Code is as follows:













Student ID Name Shift Gender Phone number



Js Code

The Code is as follows:


$ (Function (){
$ ("# Btnget"). click (function (){
$. Ajax ({
Type: "post ",
DataType: "json ",
Url: "data. ashx ",
Success: function (msg ){
Var str = "";
For (I in msg ){
Str + =""+ Msg [I]. id +""+ Msg [I]. name +""+ Msg [I]. linoleic +""+ Msg [I]. sex +""+ Msg [I]. tel +"";
}
$ ("Tbody"). append (str );
}
});
});
});


To make the table look better, we define its style

The Code is as follows:




Then write the code that the server returns json data.

The Code is as follows:


String data = "[{\" id \ ": \" 2010324268 \ ", \" name \ ": \" Lin Yu \ ", \" linoleic \": \ "10 SOFTWARE \", \ "sex \": \ "male \", \ "tel \": \ "13800138000 \" },{ \ "id \": \ "2010324256 \", \ "name \": \ "Li Si \", \ "linoleic \": \ "10 network \", \ "sex \": \ "\", \ "tel \": \ "10010 \" },{ \ "id \": \ "2010324264 \", \ "name \": \ "Zhang San \", \ "linoleic \": \ "10 SOFTWARE \", \ "sex \": \ "male \", \ "tel \": \ "10086 \"}] ";
Context. Response. Write (data );


Here I have written the json data in the correct format. Generally, you need to read data from the database and splice it into json format, or you can use some classes serialized into json data written by others. Of course, I suggest you write one by yourself, generate a class library for future use.

If you need to explain what json is, it is a data format in parallel with xml and other data, such as: [{"id": "1", "name ": "Zhang San", "age": "20" },{ "id": "2", "name": "Li Si", "age ": "18"}] format.

This should be the basic technology that every web developer should master.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.