Asp. Net + JQuery. Ajax $. post

Source: Internet
Author: User

Some time ago, I was a little confused. After the patient guidance from the teacher and the teacher, I finally realized my problem. Now I am going back to the regular route and continue to study B/S.

After nearly half a month of edification, JQuery has gradually gained a close affinity. At that time, I interviewed Yiqing and asked him how he felt after watching the JQuery video. Yiqing said: "I can understand it, understand it, and do not know where to start ". This may be a hard nut for most beginners. Now I use a simple logon page to help you better understand how JQuery. Ajax works.

First, create an html page for interaction with users. The Code is as follows:

<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> Then we use JQuery to bind a click event for the html login button. The Code is as follows:
// When loading the form, bind the event $ (document) to the logon button ). ready (function () {$ ("# login "). click (function () {$. post ('login. ashx', {// parameter 1: userName: $ ("# userName "). val (), // parameter 2: passWord: $ ("# passWord "). val ()}, // callback function (data) {// output result alert (data) ;}, // return type "text ");});});
JQuery. post (url, [data], [callback], [type]) is used to interact with the server. It has four parameters. url: Tell Ajax which page to submit data for processing, data: The parameter to be passed during the submission process. callback: the callback function is used to receive the return value of the server. type: the type of the return value, which is generally text or Json.

Then, the general processing program login. ashx (server) is used to process the request submitted by JQuery. Ajax through the post method. The Code is as follows:

Using System; using System. collections. generic; using System. linq; using System. web; namespace Demo {/// <summary> // login abstract description /// </summary> public class login: IHttpHandler {public void ProcessRequest (HttpContext context) {context. response. contentType = "text/plain"; // receives the string userName = context parameter passed in by Ajax. request ["userName"]. toString (); string passWord = context. request ["passWord"]. toString () ; // Make a judgment on the parameters passed in by Ajax and pass them back to Ajax if (userName = "admin" & passWord = "admin") {context. response. write ("Logon successful");} else {context. response. write ("Logon Failed! ") ;}} Public bool IsReusable {get {return false ;}}}}

Finally, let's check the Demo running effect:

During the two Logon Processes, we can find that when both the user name and password are "1", the dialog box is "Logon Failed". When both the user name and password are "admin, the dialog box is "Logon successful ".

Looking back at the entire implementation process, we can easily find that JQuery. ajax receives the value entered by the user on the page, and then submits the value to the backend server through the post method. the backend server receives the post-submitted request and processes it. After the processing, it uploads it back to Ajax and JQuery. ajax uses the callback function in the post method to process the data returned by the server and complete a user request.

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.