Recently I learned jquery and used its post method to request data from the server. The server returns data in JSON format. It looks very simple, but there are a lot of inexplicable problems. The main reason is that the first study is too unfamiliar, and many places write irregularities. Although the materials in this area can be found online, they can be found in full bloom. Here, I will write an example in a standard format, hoping to help you, you can also save it for yourself.
This article is suitable for readers who have basic jquery and ASP. NET knowledge.
Before writing an example, you need to comment on the following key points:
Regardless of the client, there are two ways to transmit data to the server: Get method and post method. Get method passed data written directly on the URL, such as: http://www.kpdown.com/soft/download.asp? Softid = 805 & downid = 3 & id = 711 this request contains three parameters. The advantage is that it is easy to use and clear at a glance. The disadvantage is that the transmitted data is limited and insecure. The post method is executed by using specific functions. These parameters are generally used in any language, function, or post: post address, post data, return value (callback function), HTTP header information, and returned data format. The advantage of post is that the data volume is large and secure.
For the server, use ASP. for example, if you want to get the parameters passed by the get method, you can use request. querystring ["parameter name"]. If the data is transmitted to the POST method, you can use request. form ["Parameter Name. You can simply use the response. Write () method to return data to the client.
JSON is a data format. It can be easily and quickly parsed, and can rival XML. There is a lot of knowledge about it on the Internet, but the writing method is very nonstandard, it is easy to cause confusion for beginners, but more seriously causeProgramThe most common error is that the post callback function is not executed. This problem has plagued many people. It is generally caused by incorrect JSON data format. This example shows how to use JSON data in the most standard way. I am posting a simple and easy-to-understand graph here. I believe that you don't have to look at the example after reading the graph. (For more information about JSON, see authoritative Website: http://www.w3school.com.cn/json/index.asp)
In this example, HTML static Web pages are used as front-end pages and cannot be used. net aspx, because our post is sent from JavaScript, not ASP. net itself, will be ASP. net shielding, be sure to pay attention. This example uses ASP. net's general processing program ashx serves as the server. It calls the POST method of the jquery framework in Javascript, requests JSON data from the server, parses the JSON data requested, and inserts it into the HTML page. This example simulates a query function. You can enter the correct user name and password to obtain the basic information and remarks of all employees. Demonstrate a complete example of interaction between HTML calling jquery and ASP. NET servers.
Initial page:
Enter the correct page:
Input error page:
HTML front-endCode:
<! 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">JavaScript code (verification. JS):
$ (Document ). ready (function () {var txtusername = $ ("# txtusername"); // Save the text box object to improve efficiency var txtpassword = $ ("# txtpassword "); // Click Event $ ("# btnsubmit") in the register and submit button "). click (function () {If (""! = Txtusername. Val ()&&""! = Txtpassword. Val () {// put simple verification on the client to reduce server pressure // use the POST method to request data from the server $. Post ("getusermessage. ashx? T = "+ math. random (), {Username: txtusername. val (), userpassword: txtpassword. val ()}, function (JSON) {If (0! = JSON. worker. length) {$ (". worker li "). remove (); // remove the Li mark from the list of all employees // traverse the worker array in JSON to obtain all employees for (VAR I = 0; I <JSON. worker. length; I ++) {$ ("<li> name:" + JSON. worker [I]. name + ", Gender:" + JSON. worker [I]. sex + ", age:" + JSON. worker [I]. age + "</LI> "). appendto (". worker "); // read data from JSON, construct a li tag, and insert it into ul tag} else {$ (". worker li "). remove (); $ ("<li> no data or verification failed! </LI> "). appendto (". Worker ");} If (0! = JSON. remarksmessage. length) {$ (". remarksmessage li "). remove (); // traverse the remarksmessage array in JSON and obtain the remarks for (VAR I = 0; I <JSON. remarksmessage. length; I ++) {$ ("<li>" + JSON. remarksmessage [I]. remarks + "</LI> "). appendto (". remarksmessage ") ;}} else {$ (". remarksmessage li "). remove (); $ ("<li> no data or verification failed! </LI> "). appendto (". remarksmessage ") ;}} else {$ (" Li "). remove (); $ ("<li> no data or verification failed! </LI> "). appendto (". Worker "); $ (" <li> no data or verification failed! </LI> "). appendto (". remarksmessage ") ;}}," JSON ") ;}else {alert (" illegal input! ") ;}}); // Register the reset button and click event $ (" # btnreset "). click (function () {txtusername. val (""); txtpassword. val ("");});});
server code (getusermessage. ashx):<% @ Webhandler Language = "C #" class = "getusermessage" %> using system; using system. web; public class getusermessage: ihttphandler {public void processrequest (httpcontext context) {// get the get method passing parameter: request. querystring ["parameter name"]; // obtain the POST method and pass the parameter: request. form ["parameter name"]; // the POST method context used in this example. response. contenttype = "application/JSON"; // specify the returned data format as JSON string username = context. request. form ["username"]; // read the post data string userpassword = context. request. form ["userpassword"]; string jsonresult = NULL; If ("admin" == username & "123" = userpassword) {// JSON Data Standard Format jsonresult = "{\" worker \ ":" + "[" + "{\" Name \ ": \" Zhang San \", \ "Sex \": \ "male \", \ "Age \": \ "25 \"}, "+" {\ "Name \": \ "Li Si \", \ "Sex \": \ "female \", \ "Age \": \ "21 \"}, "+" {\ "Name \": \ "Wang Wu \", \ "Sex \": \ "male \", \ "Age \": \ "27 \"} "+"], "+" \ "remarksmessage \": "+" ["+" {\ "Remarks \": \ "common employee \"} "+"]} ";} context. response. write (jsonresult); // return the data context to the client. response. end () ;}public bool isreusable {get {return false ;}}}
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
