Using the Ajax () method to load server data
The use of the ajax()
method is the lowest, most powerful method of requesting server data, it can not only get the data returned by the server, but also send a request to the server and pass a numeric value, its invocation format is as Follows:
jQuery.ajax([settings])
Or$.ajax([settings])
Where the parameter settings is the configuration object when the AJAX request is sent, in which the object
The URL represents the path requested by the server,
Data is passed at the time of the request,
DataType the type of data returned by the server,
Success the callback function for the successful execution of the request,
Type is the way to send data requests by default to Get.
<!DOCTYPE HTML Public "-//w3c//dtd XHTML 1.0 transitional//en" "http://www.w3.org/TR/xhtml1/DTD/ Xhtml1-transitional.dtd "><HTMLxmlns= "http://www.w3.org/1999/xhtml"> <Head> <title>Using the Ajax () method to load server data</title> <Scriptsrc= "http://libs.baidu.com/jquery/1.9.0/jquery.js"type= "text/javascript"></Script> <Linkhref= "style.css"rel= "stylesheet"type= "text/css" /> </Head> <Body> <DivID= "divtest"> <Divclass= "title"> <spanclass= "fl">Detecting the parity of numbers</span> <spanclass= "fr"> <inputID= "btncheck"type= "button"value= "detection" /> </span> </Div> <ul> <Li>request to enter a number<inputID= "txtnumber"type= "text"size= " a" /> </Li> </ul> </Div> <Scripttype= "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> is <b>" +Data+ "</b></li>"); } }); }) }); </Script> </Body></HTML>
Using the load () method to request data asynchronously
The load()
method uses the AJAX request to load the data from the server and puts the returned data into the specified element, which is called in the following format:
load(url,[data],[callback])
The parameter URL is the load server address, and optionally the data parameter is the callback function that is sent when the data request is requested, and the callback parameter is the execution of the Database.
Asynchronously loading json-formatted data using the Getjson () method
The getJSON()
method can get the data in the server by the way of Ajax asynchronous request, and parse the obtained data, which is displayed in the page, it is called in the following format:
jQuery.getJSON(url,[data],[callback])
Or$.getJSON(url,[data],[callback])
Where the URL parameter is the server address for the request to load the json-formatted file, the option data parameter is the one sent at the request, the callback parameter is the callback function that executes after the data request succeeds
<!DOCTYPE HTML Public "-//w3c//dtd XHTML 1.0 transitional//en" "http://www.w3.org/TR/xhtml1/DTD/ Xhtml1-transitional.dtd "><HTMLxmlns= "http://www.w3.org/1999/xhtml"> <Head> <title>Asynchronously loading json-formatted data using the Getjson () method</title> <Scriptsrc= "http://libs.baidu.com/jquery/1.9.0/jquery.js"type= "text/javascript"></Script> <Linkhref= "style.css"rel= "stylesheet"type= "text/css" /> </Head> <Body> <DivID= "divtest"> <Divclass= "title"> <spanclass= "fl">One of my favorite sports</span> <spanclass= "fr"> <inputID= "btnshow"type= "button"value= "load" /> </span> </Div> <ul></ul> </Div> <Scripttype= "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) {$ ("ul"). Append ("<li>" +sport["name"] + "</li>"); }); }); }) }); </Script> </Body></HTML>
Javascript--jQuery Ajax Application