Introduction to js ajax form submission

It was not too short to learn the code, but ajax was rarely used. Later I learned about it. The following is my opinion and understanding of ajax as a newcomer to ajax.

Ajax: asynchronous requests. By performing a small amount of data exchange with the server in the background, AJAX can implement asynchronous updates on webpages. This means that you can update a part of a webpage without reloading the entire webpage.

Recently, I tested ajax to submit a form. The form submission methods post and get use the post method. Although the GET method is simpler and faster than the POST method, and can be used in most cases. However, the use of POST requests is more effective in the following situations:

1. Unable to use cached files (Updating files or databases on the server)

2. Send large amounts of data to the server (there is no limit on the size of POST data)

3. When sending user input containing unknown characters, POST is more stable and reliable than GET.

$ Get form submission

The get () method loads information through a remote http get request.

Format

$ (Selector). get (url, data, success (response, status, xhr), dataType)

For example:

Request the demo. php webpage and send two parameters. Ignore the returned value:

1
$. Get ("demo. php", {name: "John", time: "2 "});
Demo. php is the URL of the request.

{Name: "John", time: "2"} data to be sent to the server.

 
$ POST form submission

$. Post

JQuery. post (url, [data], [callback], [type]): use the POST method for asynchronous requests.

Parameters:

Url (String): The URL of the request.

Data (Map): (optional) data to be sent to the server, expressed in Key/value pairs.

Callback (Function): (optional) callback Function when the load is successful (this method is called only when the Response returns success ).

For example, the verification code is used during registration.

<Script type = "text/javascript">
Function redirect (url ){
Location. href = url;
 }
$ ("# Code_btn"). click (function (){
Var tel = $ ("# username"). val ();
If (tel = ""){
Alert ("Enter the correct mobile phone number for account registration ");
$ ("# Username"). focus ();
Return false;
 }
If (! (/^ 1 [3 | 4 | 5 | 8 | 7] [0-9] \ d {4, 8} $/. test (tel ))){
Alert ("Please use the correct mobile phone number for account registration! ");
$ ("# Username"). focus ();
Return false;
};
 
Var codeNum = $ ("# code"). val ();
$. Post ('{APP_PATH} index. php? M = member & c = index & a = public_send_message ', {tel: tel, codeNum: codeNum}, function (result ){
// Console. log (result );
})
Timep (60 );
 
});
Function timep (j ){
$ ("# Code_btn"). attr ('disabled ', "true ");
$ ("# Code_btn"). val (j + "second ");
Time = setInterval (function (){
J = J-1;
$ ("# Code_btn"). val (j + "second ");
If (j = 0 ){
$ ("# Code_btn"). removeAttr ('disabled ');
ClearInterval (time );
J = 60;
$ ("# Code_btn"). val ("Click to obtain the verification code ");
 }
},1000 );
 }
</Script>

APP_PATH} index. php? M = member & c = index & a = public_send_message is the URL of the request.

{Tel: tel, codeNum: codeNum} is the data to be sent to the server, expressed in Key-value pairs of Key/value.