Javascript--jQuery Ajax Application

Source: Internet
Author: User

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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

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

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

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

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.