Insomnia-jQuery & amp; AJAX, insomnia-jquery

Last Update:2015-11-17 Source: Internet

Author: User

Tags getscript

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Insomnia-jQuery & AJAX, insomnia-jquery

I did not do things for two days. I regret things but can only bring more regrets. I did things well and forgot my insomnia two days ago.

1. jQuery

----- JQuery and AJAX ----- (PS: What Is ajax? Baidu, or read my previous blog. Never think it's a good AJAX team)

---- Use the load () method to asynchronously request data

Useload()The method loads data from the server through an Ajax request and places the returned data in the specified element. The Calling format is as follows:

load(url,[data],[callback])

The url of the parameter is the address of the loading server. The data parameter can be set to the data sent during the request. The callback parameter is the callback function executed after the data request is successful.

<Body>
<Div id = "divtest">
<Div class = "title">
<Span class = "fl"> my favorite fruit </span>
<Span class = "fr">
<Input id = "btnShow" type = "button" value = "LOAD"/>
</Span>
</Div>
<Ul> </ul>
</Div>

<Script type = "text/javascript">
$ (Function (){
$ ("# BtnShow"). bind ("click", function (){
Var $ this = $ (this );
$ ("Ul ")
. Html (" ")
. Load ("http://www.imooc.com/data/fruit_part.html", function (){
$ This. attr ("disabled", "true ");
});
})
});
</Script>
</Body>

Note: The load () element is sensitive to spaces. For example, do not have spaces at the beginning and end of a url, for example, do not have spaces after a function ().

---- Use the getJSON () method to asynchronously load JSON data

UsegetJSON()You can use Ajax asynchronous requests to obtain an array on the server and parse the obtained data. The method is displayed on the page in the following format:

jQuery.getJSON(url,[data],[callback])Or$.getJSON(url,[data],[callback])

Here, the url parameter is the server address for loading the json format file. The data parameter is the data sent during the request, and the callback parameter is the callback function executed after the data request is successful.

<Body>
<Div id = "divtest">
<Div class = "title">
<Span class = "fl"> my favorite exercise </span>
<Span class = "fr">
<Input id = "btnShow" type = "button" value = "LOAD"/>
</Span>
</Div>
<Ul> </ul>
</Div>

<Script type = "text/javascript">
$ (Function (){
$ ("# BtnShow"). bind ("click", function (){
Var $ this = $ (this );
$. GetJSON ("http://www.imooc.com/data/sport.json", function (data ){
$ This. attr ("disabled", "true ");
$. Each (data, function (index, sport ){
If (index = 3)
$ ("Ul"). append ("<li>" + sport ["name"] + "</li> ");
});

});
})
});
</Script>
</Body>

---- Use the getScript () method to asynchronously load and execute js files

UsegetScript()The method asynchronously requests and executes JavaScript files in the server. The Calling format is as follows:

jQuery.getScript(url,[callback])Or$.getScript(url,[callback])

The parameter url is the server request address. The callback parameter is the callback function executed after the request is successful.

<Body>
<Div id = "divtest">
<Div class = "title">
<Span class = "fl"> my favorite sports </span>
<Span class = "fr">
<Input id = "btnShow" type = "button" value = "LOAD"/>
</Span>
</Div>
<Ul> </ul>
</Div>

<Script type = "text/javascript">
$ (Function (){
$ ("# BtnShow"). bind ("click", function (){
Var $ this = $ (this );
$. GetScript ("http://www.imooc.com/data/sport_f.js", function (){
$ This. attr ("disabled", "true ");
});
})
});
</Script>
</Body>

---- Use the get () method to GET data from the server in get Mode

Useget()Method, the GET method is used to request data to the server, and the request data is returned through the callback function parameters in the method. The Calling format is as follows:

$.get(url,[callback])

The parameter url is the server request address. The callback parameter is the callback function executed after the request is successful.

<Body>
<Div id = "divtest">
<Div class = "title">
<Span class = "fl"> my personal data </span>
<Span class = "fr">
<Input id = "btnShow" type = "button" value = "LOAD"/>
</Span>
</Div>
<Ul> </ul>
</Div>

<Script type = "text/javascript">
$ (Function (){
$ ("# BtnShow"). bind ("click", function (){
Var $ this = $ (this );
$. Get ("http://www.imooc.com/data/info_f.php", function (data ){
$ This. attr ("disabled", "true ");
$ ("Ul"). append ("<li> my name is:" + data. name + "</li> ");
$ ("Ul"). append ("<li> my boyfriend said to me:" + data. say + "</li> ");
}, "Json ");
})
});
</Script>
</Body>

---- Use the post () method to send data from the server in POST Mode

Andget()Method,post()Most of the methods are used to send data to the server in POST mode. After the server receives the data, it processes the data and returns the processing result to the page. The Calling format is as follows:

$.post(url,[data],[callback])

The parameter url is the server request address. The optional data is the data sent when a request is sent to the server. The optional callback parameter is the callback function executed after the request is successful.

<Body>
<Div id = "divtest">
<Div class = "title">
<Span class = "fl"> check whether the number is greater than 0 </span>
<Span class = "fr"> <input id = "btnCheck" type = "button" value = "detect"/> </span>
</Div>
<Ul>
<Li> enter a number <input id = "txtNumber" type = "text" size = "12"/> </li>
</Ul>
</Div>

<Script type = "text/javascript">
$ (Function (){
$ ("# BtnCheck"). bind ("click", function (){
$. Post ("http://www.imooc.com/data/check_f.php ",{
Num: $ ("# txtNumber"). val ()
},
Function (data ){
$ ("Ul"). append ("<li> the <B> you entered"
+ $ ("# TxtNumber"). val () + "</B> Yes <B>"
+ Data + "</B> </li> ");
});
})
});
</Script>
</Body>

Here val () is to get the value of the previous selector, jQuery Function

---- Use the serialize () method to serialize the form Element value

Useserialize()The method can serialize the element values with the name attribute in the form to generate a standard URL encoded text string that can be directly used for ajax requests. The Calling format is as follows:

$(selector).serialize()

The selector parameter is the element or form element in one or more forms.

<Body>
<Div id = "divtest">
<Div class = "title">
<Span class = "fl"> my personal data </span>
<Span class = "fr">
<Input id = "btnAction" type = "button" value = "serialization"/>
</Span>
</Div>
<Form action = "">
<Ul>
<Li> name: <input name = "Text1" type = "text" size = "12"/> </li>
<Li>
<Select name = "Select1">
<Option value = "0"> male </option>
<Option value = "1"> female </option>
</Select>
</Li>
<Li> <input name = "Checkbox1" type = "checkbox"/> visibility </li>
<Li id = "litest"> </li>
</Ul>
</Form>
</Div>

<Script type = "text/javascript">
$ (Function (){
$ ("# BtnAction"). bind ("click", function (){
$ ("# Litest" ).html ($ ("form"). serialize ());
})
})
</Script>
</Body>

---- Load server data using ajax ()

Useajax()The method is the underlying and most powerful method to request server data. It can not only obtain the data returned by the server, but also send requests to the server and transmit numerical values. Its call format is as follows:

jQuery.ajax([settings])Or$.ajax([settings])

The parameter settings is the configuration object for sending an ajax request. In this object, the url indicates the Server Request Path, data indicates the data passed during the request, and dataType indicates the data type returned by the server, success is the callback function for successful request execution. type is the method for sending data requests. The default value is get.

<Body>
<Div id = "divtest">
<Div class = "title">
<Span class = "fl"> detection of the parity of numbers </span>
<Span class = "fr">
<Input id = "btnCheck" type = "button" value = "detect"/>
</Span>
</Div>
<Ul>
<Li> enter a number for the request.
<Input id = "txtNumber" type = "text" size = "12"/>
</Li>
</Ul>
</Div>

<Script type = "text/javascript">
$ (Function (){
$ ("# BtnCheck"). bind ("click", function (){
$. Ajax ({
Url: "http://www.imooc.com/data/check.php ",
Data: {num: $ ("# txtNumber"). val ()},
Type: "post ",
Success: function (data ){
$ ("Ul"). append ("<li> the <B> you entered"
+ $ ("# TxtNumber"). val () + "</B> Yes <B>"
+ Data + "</B> </li> ");
}
});
})
});
</Script>
</Body>

---- Use the ajaxSetup () method to set the global Ajax default options

UseajaxSetup()You can set the global options of the Ajax request. After the configuration is complete, the following Ajax requests do not need to add these options. The call format is as follows:

jQuery.ajaxSetup([options])Or$.ajaxSetup([options])

The option options parameter is an object that sets the global option value for Ajax requests.

<Body>
<Div id = "divtest">
<Div class = "title">
<Span class = "fl"> parity and whether it is greater than 0 </span>
<Span class = "fr">
<Input id = "btnShow_1" type = "button" value = "verify 1"/>
<Input id = "btnShow_2" type = "button" value = "verify 2"/>
</Span>
</Div>
<Ul>
<Li> enter a number for the request.
<Input id = "txtNumber" type = "text" size = "12"/>
</Li>
</Ul>
</Div>

<Script type = "text/javascript">
$ (Function (){
$. AjaxSetup ({
Url: "http://www.imooc.com/data/check.php ",
Data: {num: $ ("# txtNumber"). val ()},
Type: "post ",
Success: function (data) {$ ("ul"). append ("<li> your input <B>"
+ $ ("# TxtNumber"). val () + "</B> Yes <B>"
+ Data + "</B> </li> ");
}
});
$ ("# BtnShow_1"). bind ("click", function (){
$. Ajax ({
Data: {num: $ ("# txtNumber"). val ()},
Url: http://www.imooc.com/data/check.php"
});
})
$ ("# BtnShow_2"). bind ("click", function (){
$. Ajax ({
Data: {num: $ ("# txtNumber"). val ()},
Url: http://www.imooc.com/data/check_f.php"
});
})
});
</Script>
</Body>

---- Use the ajaxStart () and ajaxStop () Methods

ajaxStart()AndajaxStop()The method is to bind an Ajax event. The ajaxStart () method is used to trigger a function before an Ajax request is sent. The ajaxStop () method is used to trigger a function after the Ajax request is complete. Their call format is:

$(selector).ajaxStart(function())And$(selector).ajaxStop(function())

The brackets in the two methods are the bound functions. They are executed before an Ajax request is sent.ajaxStart()Method binding function. After the request is successful, run the ajaxStop () method binding function.

<Body>
<Div id = "divtest">
<Div class = "title">
<Span class = "fl"> load a piece of text </span>
<Span class = "fr">
<Input id = "btnShow" type = "button" value = "LOAD"/>
</Span>
</Div>
<Ul>
<Li id = "divload"> </li>
</Ul>
</Div>

<Script type = "text/javascript">
$ (Function (){
$ ("# Divtest"). ajaxStart (function (){
Response (this).html ("requesting data ...");
});
$ ("# Divtest"). ajaxStop (function (){
Certificate (this).html ("Data Request completed! ");
});
$ ("# BtnShow"). bind ("click", function (){
Var $ this = $ (this );
$. Ajax ({
Url: "http://www.imooc.com/data/info_f.php ",
DataType: "json ",
Success: function (data ){
$ This. attr ("disabled", "true ");
$ ("Ul"). append ("<li> my name is:" + data. name + "</li> ");
$ ("Ul"). append ("<li> my boyfriend said to me:" + data. say + "</li> ");
}
});
})
});
</Script>
</Body>

----- Common jQuery plug-ins -----

---- Form Verification plug-in -- validate

This plug-in comes with a validation rule containing required numbers, and URLs in the content to display exception information instantly. In addition, you can also customize verification rules. The method of calling the plug-in is as follows:

$(form).validate({options})

The form parameter indicates the form element name, and the options parameter indicates the configuration object when the method is called. All the verification rules and exception information are displayed in this object.

<Body>
<Form id = "frmV" method = "get" action = "#">
<Div id = "divtest">
<Div class = "title">
<Span class = "fl"> Form Verification plug-in </span>
<Span class = "fr">
<Input id = "btnSubmit" type = "submit" value = "submit"/>
</Span>
</Div>
<Div class = "content">
<Span class = "fl"> Email: </span> <br/>
<Input id = "email" name = "email" type = "text"/> <br/>
<Span class = "tip"> </span>
</Div>
</Div>
</Form>

<Script type = "text/javascript">
$ (Function (){
$ ("# FrmV"). validate (
{
/* Custom verification rules */
Rules :{
Email :{
Required: true,
Email: true
}
}
},
/* Error message location */
ErrorPlacement: function (error, element ){
Error. appendTo (". tip ");
}
}
);
});
</Script>
</Body>
</Html>

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

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

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

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

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More