Today, I will take the time to learn about jquery and ajax, jqueryajax.

Last Update:2015-11-19 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 ＞

Today, I will take the time to learn about jquery and ajax, jqueryajax.

Hi, what do you do today on Thursday? I remember, I 've been learning about ajax for the last two days. Now I want to learn about jquery and ajax.

1. jQuery

----- JQuery and AJAX -----

AJAX is "Asynchronous Javascript And XML" (Asynchronous JavaScript And XML), which is a Web page development technology used to create interactive web applications.

AJAX = Asynchronous JavaScript and XML (subset of standard General Markup Language ).

AJAX is a technology used to create fast dynamic web pages.

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.

If you need to update the content of a traditional web page (without AJAX), you must reload the entire web page.

Related reading: jquery framework tutorials AJAX: a beginner AJAX tutorial

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

Use the load () method to load data in the server through Ajax requests and place the returned data in the specified element. The call 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> </div> <script type = "text/javascript"> $ (function () {$ ("# btnShow "). bind ("click", function () {var $ this = $ (this ); $ ("ul" cmd.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

Using the getJSON () method, you can use Ajax asynchronous requests to obtain the arrays on the server and parse the obtained data. The results are displayed on the page. The call format is as follows:

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"> one of 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); $. 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

The getScript () method is used to asynchronously request and execute 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> </ 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

When the get () method is used, the GET method is used to request data from the server, and the request data is returned through the callback function parameters in the method. The call 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 profile </span> <span class =" fr "> <input id =" btnShow "type =" button "value =" LOAD "/> </span> </div> <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

Compared with the get () method, the post () method is mostly 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 call 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 = ""/> </span> </div> <ul> <li> enter 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>" + $ ("# txtNumber") you entered "). val () + "</B> is <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

The serialize () method can be used to 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 profile </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> <select name = "Select1"> <option value = "0 "> male </option> <option value =" 1 "> female </option> </select> </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 ()

The ajax () method is the underlying and most powerful method for requesting server data. It can not only obtain the data returned by the server, but also send requests to the server and pass numerical values, the Calling 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"> detect the parity of numbers </span> <span class =" fr "> <input id =" btnCheck "type =" button "value =" "/> </span> </div> <ul> <li> request to enter a number <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>" + $ ("# txtNumber") you entered "). val () + "</B> is <B>" + data + "</B> </li> ");}});})}); </script> </body>

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

You can use the ajaxSetup () method to set some 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:

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> request to enter a number <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> the <B>" + $ ("# txtNumber") you entered "). val () + "</B> is <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

The ajaxStart () and ajaxStop () methods are used to bind Ajax events. 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 both methods are bound functions. When the ajaxStart () method bound function is executed before an Ajax request is sent, the ajaxStop () method bound function is executed after the request is successful.

<Body> <div id = "divtest"> <div class = "title"> <span class = "fl"> load a Text Segment </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" 2.16.ajaxstart(function(%%%%%(this%.html ("requesting data... ") ;}); $ (" # divtest ").ajaxstop(function(){((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> </form> <script type = "text/javascript"> $ (function () {$ ("# frmV "). validate ({/* Custom verification rules */rules: {email: {required: true, email: true }},/* error location */errorPlacement: function (error, element) {error. appendTo (". tip ") ;}};}); </script> </body>

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