Ajax asynchronous Submission Form data description and method examples _javascript skills

Scenario Description:
For a login page, there is a login form, but because the login verification logic is more complex, we would like to click the login does not refresh the current page, give the login results and then choose whether to jump to the new page or prompt username password error. There are a lot of problems like this. The user experience is greatly enhanced by the asynchronous fetching of data.
Background knowledge:
Ajax refers to asynchronous JavaScript and XML (asynchronous JavaScript and XML).
AJAX is not a new programming language, but a way to create better, faster, more interactive
Technology for WEB applications. With Ajax, your JavaScript can use JavaScript's XMLHttpRequest object to communicate directly with the server. With this object, your JavaScript can exchange data with the Web server without overloading the page. Ajax
Use asynchronous data transfer (HTTP requests) between the browser and the Web server, which enables the Web page to request a small amount of information from the server, rather than the entire page. AJAX can make Internet applications smaller, faster, and friendlier. Ajax
is a browser technology that is independent of Web server software. Ajax is based on the following Web standards: The Web standards that JavaScript XML HTML CSS uses in AJAX are well defined and supported by all major browsers. AJAX applications are independent of browsers and platforms. Web
Applications have many advantages over desktop applications, they can involve a wide range of users, they are easier to install and maintain, and are easier to develop. However, Internet applications are not as sophisticated and friendly as traditional desktop applications.
With Ajax, Internet applications can become more sophisticated and friendlier.
Specific usage:

Copy Code code as follows:

<script type= "Text/javascript" >
(function () {
JQuery (' #loginForm '). Click (
function () {
JQuery (' #tips '). HTML ("Logging in ...");
Jquery.post (
<span style= "White-space:pre" > </span> ' login.action ',
<span style= "White-space:pre" > </span>{
<span style= "White-space:pre" > </span> "username": jQuery (' #username '). Val (),
<span style= "White-space:pre" > </span> "Password": JQuery (' #password '). Val ()
<span style= "White-space:pre" > </span>},
<span style= "White-space:pre" > </span>function (Result) {
JQuery (' #tips '). HTML (result);
<span style= "White-space:pre" > </span>},
<span style= "White-space:pre" > </span> "JSON"
<span style= "White-space:pre" > </span>);
}
);
})();
</script>

There are four parameters in the Post method.
The first is the URL address, in the struts2, we only need to submit to the corresponding action, or specify the method. For WEBX, we need to write a URL address like this Login.htm?action=user_login&event_submit_do_user_login=any
The second is the parameter list, the data you want to submit, as a key value to the form.
The third parameter is the result handler, and the result is taken out of results.
The fourth parameter is the data return format.
What you need to do with action or screen is:

Copy Code code as follows:

HttpServletResponse response = Rundata.getresponse ();
Response.setcontenttype ("Application/json");
PrintWriter out;
try {
out = Response.getwriter ();
String result = (string) context.get (' result ');
Jsonobject json = new Jsonobject ();
Json.put ("result", result);
Out.print (JSON);
Out.flush ();
catch (IOException e) {
E.printstacktrace ();
}

Enter the processing result.