Home>

jquery ajax

hi, tuesday today,What to doHey remembered,Exactly the last two days I have been learning about Ajax.Today, I will learn about jQuery and Ajax.

Jquery

----- jquery and ajax -----

Ajax is "asynchronous javascript and xml" (asynchronous javascript and xml), which refers to a web development technology for creating interactive web applications.

ajax=asynchronous javascript and xml (a subset of the standard universal markup language).

Ajax is a technology for creating fast and dynamic web pages.

With a small amount of data exchange with the server in the background,Ajax can make web pages update asynchronously.This means that without reloading the entire web page,Update a part of a web page.

Traditional web pages (without ajax) If you need to update content,The entire web page must be reloaded.

Related Reading:Jquery framework use tutorial ajax articlesGetting started with ajax

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

Use the load () method to load data from the server through an ajax request.And put the returned data into the specified element,Its calling format is:

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

The parameter url is the load server address,The optional data parameter is the data sent when requested,The callback parameter is after the data request is successful,Callback function executed.

<body>
<div>
<div>
<span>My favorite fruit</span>
<span>
<input type="button" value="load" />
</span>
</div>
<ul></ul>
</div>
<script type="text/javascript">
$(function () {
$("#btnshow"). bind ("click", function () {
var $this=$(this);
$("ul")
.html ("<img src =" images/loading.gif "/>")
.load ("http://www.imooc.com/data/fruit_part.html", function () {
$this.attr ("disabled", "true");
});
})
});
</script>
</body>

Note that with load () the elements are space-sensitive,For example, there should be no spaces at the beginning and end of the URL.E.g. no spaces after function ()

---- Use the getjson () method to load json format data asynchronously

Use the getjson () method to make asynchronous requests through ajax.Get the array in the server,And parse the obtained data,Displayed on the page,Its calling format is:

jquery.getjson (url, [data], [callback]) or $.getjson (url, [data], [callback])

The url parameter is the address of the server requesting to load the json format file.The optional data parameter is the data sent when requested,The callback parameter is after the data request is successful,Callback function executed.

<body>
<div>
<div>
<span>My favorite sport</span>
<span>
<input 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,Its calling format is as follows:

jquery.getscript (url, [callback]) or $.getscript (url, [callback])

The parameter url is the server request address,The optional callback parameter is a callback function to be executed after the request is successful.

<body>
<div>
<div>
<span>My favorite sport</span>
<span>
<input 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 the get way

When using the get () method, use the get method to request data from the server.And return the requested data through the parameters of the callback function in the method,Its calling format is as follows:

$.get (url, [callback])

The parameter url is the server request address,The optional callback parameter is a callback function to be executed after the request is successful.

<body>
<div>
<div>
<span>My profile</span>
<span>
<input 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 said to me:" + data.say + "&/li>");
}, "json");
})
});
</script>
</body>

---- Use post () method to send data from server in post mode

Compared with the get () method,The post () method is mostly used to send data to the server in the post mode.After the server receives the data,For processing,And return 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 requesting from the server,The optional callback parameter is a callback function to be executed after the request is successful.

<body>
<div>
<div>
<span>detect if the number is greater than 0</span>
<span><input type="button" value="detection" /></span>
</div>
<ul>
<li>Request a number<input 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><b>you entered"
+ $("#txtnumber"). val () + "</b>is<b>"
+ data + "</b></li>");
});
})
});
</script>
</body>

Val () here is the value of the previous selector, jquery function

---- Use serialize () method to serialize form element values

Use the serialize () method to serialize the element value of the form with the name attribute,Generate standard url-encoded text strings,It can be directly used for ajax requests, and its calling format is as follows:

$(selector) .serialize ()

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

<body>
<div>
<div>
<span>My profile</span>
<span>
<input 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"&​​gt;Male</option>
<option value="1">female</option>
</select>
</li>
<li><input name="checkbox1" type="checkbox" />Whether the data is visible</li>
<li></li>
</ul>
</form>
</div>
<script type="text/javascript">
$(function () {
$("#btnaction"). bind ("click", function () {
$("#litest"). html ($("form"). serialize ());
})
})
</script>
</body>

---- Use ajax () method to load server data

The ajax () method is the lowest and most powerful way to request server data.It can not only get the data returned by the server,It can also send requests to the server and pass values,Its calling format is as follows:

jquery.ajax ([settings]) or $.ajax ([settings])

The parameter settings is the configuration object when sending the ajax request.In that object,url represents the path requested by the server,data is the data passed when requested,datatype is the data type returned by the server,success is a callback function for successful execution of the request,type is the method for sending data requests,The default is get.

<body>
<div>
<div>
<span>Detecting Parity of Numbers</span>
<span>
<input type="button" value="detection" />
</span>
</div>
<ul>
<li>Request for a number
<input 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><b>you entered"
+ $("#txtnumber"). val () + "</b>is<b>"
+ data + "</b></li>");
}
});
})
});
</script>
</body>

---- Use ajaxsetup () method to set global ajax default options

Use the ajaxsetup () method to set some global option values ​​for ajax requests.After setting up,Subsequent ajax requests will not need to add these option values,Its calling format is:

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

The options parameter is an object,Use this object to set global option values ​​when making ajax requests.

<body>
<div>
<div>
<span>Parity and whether it is greater than 0</span>
<span>
<input type="button" value="verification 1" />
<input type="button" value="authentication 2" />
</span>
</div>
<ul>
<li>Request for a number
<input 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 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/data/check.php"
});
})
$("#btnshow_2"). bind ("click", function () {
$.ajax ({
data:{num:$("#txtnumber"). val ()},url:"http://www.imooc.com/data/check_f.php"
});
})
});
</script>
</body>

---- Using 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 made,The ajaxstop () method is used to trigger a function after an ajax request is completed.Their calling format is:

$(selector) .ajaxstart (function ()) and $(selector) .ajaxstop (function ())

Among them, the brackets in both methods are bound functions,When the ajaxstart () method binding function is executed before sending the ajax request,After the request is successful,Executes the function bound by the ajaxstop () method.

<body>
<div>
<div>
<span>Load a paragraph of text</span>
<span>
<input type="button" value="load" />
</span>
</div>
<ul>
<li></li>
</ul>
</div>
<script type="text/javascript">
$(function () {
$("#divtest"). 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>Boyfriend said to me:" + data.say + "&/li>");
}
});
})
});
</script>
</body>

----- jquery common plugin -----

---- Form validation plugin-validate

The plug-in comes with validation rules that include required, numeric, and url content.Instantly display abnormal information,It also allows custom validation rules,The plugin call method is as follows:

$(form) .validate ((options))

Where the form parameter represents the name of the form element,The options parameter represents the configuration object when the method is called,All the validation rules and the display position of the exception information are set in this object.

<body>
<form method="get" action="#">
<div>
<div>
<span>Form Validation Plug-in</span>
<span>
<input type="submit" value="submit" />
</span>
</div>
<div>
<span>Mailbox:</span><br />
<input name="email" type="text" /><br />
<span></span>
</div>
</div>
</form>
<script type="text/javascript">
$(function () {
$("#frmv"). validate (
{
/* Custom validation rules * /
rules:{
email:{
required:true,email:true
}
}
},/* Error prompt location * /
errorplacement:function (error, element) {
error.appendto (". tip");
}
}
);
});
</script>
</body>
</html>
  • Previous The usage of tostring () and valueof () in JavaScript and the difference between the two
  • Next Follow me javascript arguments object