Today, I'm taking the time to clean up the knowledge of jquery and Ajax _jquery

Source: Internet
Author: User
Tags getscript numeric value serialization

Hi, two today, do something, ah, remember, just the first two days have been learning Ajax-related knowledge, and then learn about jquery and Ajax related knowledge.

1, JQuery

-----jquery and Ajax-----

Ajax, "Asynchronous JavaScript and XML" (Asynchronous JavaScript and XML), refers to a web development technology that creates interactive Web applications.

AJAX = Asynchronous JavaScript and XML (a subset of standard generic markup languages).

AJAX is a technique for creating fast-moving web pages.

AJAX enables asynchronous updating of Web pages by making a small amount of data exchange in the background with the server. This means you can update portions of a Web page without reloading the entire page.

Traditional Web pages (without AJAX) if you need to update the content, you must overload the entire page page.

Related reading: jquery framework use tutorial AJAX Chapter AJAX Beginner's introductory course Ajax

----Asynchronously request data using the load () method

Use the load () method to load data from the server through an AJAX request and place the returned data in the specified element in the following format:

Load (Url,[data],[callback])

The parameter URL is the load server address, the option data parameter is sent when the request is made, and the callback parameter is the callback function that executes after the data request succeeds.

<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 ("
</body>

Note that the elements in the load () are sensitive to spaces, such as the beginning of the URL with no spaces at the end, such as function () after no space

----to load JSON-formatted data asynchronously using the Getjson () method

Using the Getjson () method, the array in the server can be obtained by means of an AJAX asynchronous request, and the obtained data is parsed and displayed on the page in the format of the call:

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 format file, the data that is sent when the option data parameter is requested, and the callback function that is executed after the callback parameter succeeds for the request.

<body>
<div id= "Divtest" >
<div class= "title" >
<span class= "FL" > My favorite Sport </ 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 load and execute the JS file asynchronously

Use the Getscript () method to asynchronously request and execute a JavaScript-formatted file in the server, and its invocation format looks like this:

Jquery.getscript (Url,[callback]) or $.getscript (Url,[callback))

The parameter URL is the server request address, and the option callback parameter is the callback function that executes after the request succeeds.

<body>
<div id= "Divtest" >
<div class= "title" >
<span class= "FL" > My favorite Sport </ 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>

----FETCH data from the server using the Get () method

When using the Get () method, a Get method is used to request data from the server, and the requested data is returned through the parameters of the callback function in the method, and its invocation format is as follows:

$.get (Url,[callback])

The parameter URL is the server request address, and the option callback parameter is the callback function that executes after the request succeeds.

<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></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> boyfriend says to me:" + Data.say + "</li>");
}, "JSON");})
;
</script>
</body>

----send data from the server by post () using the post () method

Compared to the Get () method, the post () method is used to send data to the server post, the server receives the data, processes it, and returns the processing results to the page, which is called the following format:

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

The parameter URL is the server request address, which is the option data sent to the server when requested, and the option callback parameter is the callback function that executes after the request succeeds.

<body>
<div id= "Divtest" >
<div class= "title" >
<span class= "FL" > Detect if the number is greater than 0</ span> 
<span class= "fr" ><input id= "btncheck" type= "button" value= "Detect"/></span>
div>
<ul>
<li> request to enter a digital <input id= "Txtnumber" type= "text" size= "
"/></li> </ul>
</div>
<script type= "Text/javascript" >
$ (function () {
$ ("#btnCheck"). Bind ("click", Function () {
$.post ("http://www.imooc.com/data/check_f.php", {
num:$ ("#txtNumber"). Val ()
the
function (data) {
$ ("ul"). Append ("<li> <b>" you entered
+ $ ("#txtNumber"). Val () + </ B> is <b> "
+ data +" </b></li> ");
});
}); </script>
</body>

Here's Val () is to get the value of the previous selector, jquery's function

----serialization of form element values using the Serialize () method

Using the Serialize () method, you can serialize the value of an element with the Name property in the form, generate a standard URL-encoded text string, directly available to an AJAX request, and its calling format is as follows:

$ (selector). Serialize ()

Where the selector parameter is an element or form element itself 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= "/></li>"
<li>
<select name= "Select1" >
<option value= "0" > Male </ option>
<option value= "1" > Women </option>
</select>
</li>
<li> <input name= "Checkbox1" type= "checkbox"/> data is visible </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 the Ajax () method

Using the Ajax () method is the most basic, most powerful method of requesting server data, not only to get the data returned by the server, but to send a request to the server and pass a numeric value, which is called in the following format:

Jquery.ajax ([Settings]) or $.ajax ([settings])

Where the parameter setting is the configuration object when the AJAX request is sent, in which the URL represents the path that the server requested, the data that is passed at request, the data type datatype for the server, success the callback function for the successful execution of the request, Type is the default to get by the way the data request is sent.

<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= "detect"/>
</span>
</div>
<ul>
<li> request to enter a digital 
<input id= "Txtnumber" type= "text" size= ""/>
</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> you have entered <b> "
+ $ (" #txtNumber "). Val () +" </b> is <b> "
+ data +" </b></li> " );
}
});
})
});
</script>
</body>

----Use the Ajaxsetup () method to set the global AJAX default option

Using the Ajaxsetup () method, you can set some global option values for AJAX requests, and when the settings are complete, the following AJAX requests will not need to add these option values, which are called in the following format:

Jquery.ajaxsetup ([options]) or $.ajaxsetup ([options])

The option options parameter is an object that sets the global option value for an AJAX request when the object is set.

<body> <div id= "Divtest" > <div class= "title" > <span class= "FL" > parity and whether 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 Enter a number <input id= "Txtnumber" type= "text" size= " "/> </li> </ul> </div> <script type=" Text/javascript > $ (function () {$.ajaxsetup ({URL: "h Ttp://www.imooc.com/data/check.php ", data: {num: $ (" #txtNumber "). Val ()}, type:" Post ", success:function (data) {$ (" ul " 
). Append ("<li> you entered <b>" + $ ("#txtNumber"). Val () + "</b> is <b>" + Data + "</b></li>");
}
}); $ ("#btnShow_1"). Bind ("click", Function () {$.ajax ({data: {num: $ ("#txtNumber"). Val ()}, URL: "Http://www.imooc.com/dat
A/check.php "}); }) $ ("#btnShow_2"). Bind ("click", Function () {$.ajax ({data: {num: $ ("#txtNumber"). Val ()}, URL: "http://www.imooc.com/d
Ata/check_f.php "}); })
}); </script> </body>

----Use the Ajaxstart () and Ajaxstop () methods

The Ajaxstart () and Ajaxstop () methods are binding Ajax events. The Ajaxstart () method is used to trigger the function before the AJAX request is emitted, and the Ajaxstop () method is used to trigger the function after the AJAX request completes. They are called in the following format:

$ (selector). Ajaxstart (function ()) and $ (selector). Ajaxstop (function ())

Of these, the parentheses in the two methods are all bound functions that perform the function of the Ajaxstart () method binding before the Ajax request is sent, and after the request succeeds, perform the function bound by the Ajaxstop () method.

<body>
<div id= "Divtest" >
<div class= "title" >
<span class= "FL" > Load a 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 () {
$ ( This). HTML ("requesting data ...");
$ ("#divtest"). Ajaxstop (function () {
$ (this). HTML ("Data request complete!"). ");
});
$ ("#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> boyfriend said to me:" + Data.say + "</li>");
});}); </script>
</body>

-----jquery Common Plug-ins-----

----Form Validation Plug-in--validate

The plug-in includes a mandatory, numeric, url in the content of the validation rules, real-time display of exception information, in addition, also allows custom validation rules, plug-in invoke method is as follows:

$ (form). Validate ({options})

Where form parameters represent the name of the form element, the options parameter represents the configuration object when the method is invoked, and all validation rules and exception information are set in the object.

 <body> <form id= "FRMV" method= "Get" action= "#" > <div id= "divtest" > < Div class= "title" > <span class= "fl" > Form verification plug-ins </span> <span class= "fr" > <input id= "btnsubmit" type = "Submit" value= "submitted"/> </span> </div> <div class= "Content" > <span class= "FL" > Mailbox: </span ><br/> <input id= "email" name= "email" type= "text"/><br/>-<span "Tip" ></span> & lt;/div> </div> </form> <script type= "Text/javascript" > $ (Function () {$ ("#frmV"). Validate ({/* Custom validation Rule/rules: {email:{required:true, Email:true}}},/* error prompt position * * Errorplacement:function (Error, Element) {ERROR.A
Ppendto (". Tip");
}
}
);
}); </script> </body>  
 
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.