Today I have time to give you some information about jquery and ajax

2020-11-18 05:15:48
OfStack

hi, today is Tuesday. What are you going to do? I just remember that I have been studying ajax for the past two days on 1.

1, jQuery

-- -- -- -- -- jQuery and AJAX -- -- -- -- --

AJAX is "Asynchronous Javascript And XML" (asynchronous JavaScript and XML), refers to a kind of web development technology to create interactive web applications.

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

AJAX is a technology for creating fast, dynamic web pages.

AJAX enables web pages to be updated asynchronously by exchanging a small amount of data with the server in the background. This means that parts of the page can be updated without reloading the entire page.

Traditional web pages (without AJAX) must reload the entire web page if they need to update content.

AJAX article AJAX Introduction to AJAX

-- Request data asynchronously using the load() method

The load() method is used to load the data in the server through the Ajax request, and the returned data is placed in the specified element. Its invocation format is as follows:

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

The parameter url is the address of the loading server. It is optional that the parameter data is the data sent when the request is made and the parameter callback 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=" loading " />
</span>
</div>
<ul></ul>
</div>
<script type="text/javascript">
$(function () {
$("#btnShow").bind("click", function () {
var $this = $(this);
$("ul")
.html("<img src='Images/Loading.gif' alt=''/>")
.load("http://www.imooc.com/data/fruit_part.html",function(){
$this.attr("disabled", "true");
});
})
});
</script>
</body>

Note that load() is used where elements are sensitive to whitespace, such as url without Spaces at the beginning or the end, such as function() without Spaces

-- Use the getJSON() method to asynchronously load the data in JSON format

Using the getJSON() method, the array in the server can be obtained through the asynchronous request of Ajax, and the obtained data can be parsed and displayed in the page. Its invocation format is as follows:

jQuery. getJSON (url, [data], [callback]) or $. getJSON (url, [data], [callback])

Among them, url parameter is the server address of the request to load json format file, optionally data parameter is the data sent when the request, 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 1 sport </span> 
<span class="fr">
<input id="btnShow" type="button" value=" loading " />
</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>

-- Load and execute the js file asynchronously using the getScript() method

The getScript() method is used to asynchronously request and execute the file in JavaScript format on the server, which is called in the following format:

jQuery. getScript (url, [callback]) or $. getScript (url, [callback])

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


<body>
<div id="divtest">
<div class="title">
<span class="fl"> My favorite sport </span> 
<span class="fr">
<input id="btnShow" type="button" value=" loading " />
</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 get() to get data from the server in GET fashion

When using the get() method, GET method is adopted to request data from the server, and the requested data is returned through the parameters of the callback function in the method. Its invocation format is as follows:

$.get(url,[callback])

The parameter url is the server request address, and the optional callback parameter is the callback function that executes after the request is successful.


<body>
<div id="divtest">
<div class="title">
<span class="fl"> My personal information </span> 
<span class="fr">
<input id="btnShow" type="button" value=" loading " />
</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> My boyfriend said to me, " + data.say + "</li>");
}, "json");
})
});
</script>
</body>

-- Send data from the server in POST mode using the post() method

Compared with get() method, post() method is mostly used to send data to the server in POST way. After the server receives the data, it processes the data and returns the processing result to the page. The invocation format is as follows:

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

The parameter url is the server request address, and the optional data is the data sent when the request is made to the server, and the optional callback parameter is the callback function executed after the successful request.


<body>
<div id="divtest">
<div class="title">
<span class="fl"> Check if the number is greater than 0</span> 
<span class="fr"><input id="btnCheck" type="button" value=" detection " /></span>
</div>
<ul>
<li> Request input 1 A digital  <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> You enter the <b> "
+ $("#txtNumber").val() + " </b> is <b> "
+ data + " </b></li>");
});
})
});
</script>
</body>

val() here is a function of jQuery, which was the value of selector before

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

Using the serialize() method, the element values with name attributes in the form can be serialized to generate a standard URL encoded text string, which can be directly used for ajax requests. Its invocation format is as follows:

$(selector).serialize()

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


<body>
<div id="divtest">
<div class="title">
<span class="fl"> My personal information </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>
<li>
<select name="Select1">
<option value="0"> male </option>
<option value="1"> female </option>
</select>
</li>
<li><input name="Checkbox1" type="checkbox" /> Whether the 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 the server data using the ajax() method

Using the ajax() method is the lowest level and most powerful way to request server data. It can not only get the data returned by the server, but also send the request and pass the value to the server. It is called in the following format:

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

The parameter settings is the configuration object when sending THE ajax request. In this object, url represents the path of the server request, data is the data passed when the request is made, dataType is the data type returned by the server, success is the callback function executed successfully when the request is made, type is the way to send the data request, and get is the default.


<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=" detection " />
</span>
</div>
<ul>
<li> Request input 1 A digital  
<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> You enter the <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 1 global option values for the Ajax request. When this is done, subsequent Ajax requests do not need to add these option values. It is called in the following format:

jQuery. ajaxSetup ([options]) or $. ajaxSetup ([options])

The optional options parameter is an object that sets the global option value at the time of the Ajax request.


<body>
<div id="divtest">
<div class="title">
<span class="fl"> Is the odd and even sum greater than 0</span> 
<span class="fr">
<input id="btnShow_1" type="button" value=" validation 1" />
<input id="btnShow_2" type="button" value=" validation 2" />
</span>
</div>
<ul>
<li> Request input 1 A digital  
<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> You enter the <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>

-- Use the ajaxStart() and ajaxStop() methods

The ajaxStart() and ajaxStop() methods bind the Ajax event. The ajaxStart() method is used to fire the function before the Ajax request is issued, and the ajaxStop() method is used to fire the function after the Ajax request is completed. Their invocation format is:

$(selector). ajaxStart (function ()) and $(selector). ajaxStop (function ())

Where the parentheses in both methods are bound functions, the function bound by the ajaxStart() method is executed before sending the Ajax request, and the function bound by the ajaxStop () method is executed after the request is successful.


<body>
<div id="divtest">
<div class="title">
<span class="fl"> loading 1 paragraph </span> 
<span class="fr">
<input id="btnShow" type="button" value=" loading " />
</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 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>

--jQuery commonly used plug-in

Form validation plug-in -- validate

The plug-in comes with a validation rule that contains the required, numeric, URL content to display exception information immediately. In addition, it also allows you to customize validation rules by calling the following methods:

$(form).validate({options})

The form parameter represents the name of the form element, the options parameter represents the configuration object when the method is invoked, and the location of all validation rules and exception information is set in this object.


<body>
<form id="frmV" method="get" action="#">
<div id="divtest">
<div class="title">
<span class="fl"> Form validation plug-in </span> 
<span class="fr">
<input id="btnSubmit" type="submit" value=" submit " />
</span>
</div>
<div class="content">
<span class="fl"> Email address: </span><br />
<input id="email" name="email" type="text" /><br />
<span class="tip"></span>
</div>
</div>
</form>
<script type="text/javascript">
$(function () {
$("#frmV").validate(
{
/* Custom validation rules */
rules: {
email:{
required:true,
email:true
}
}
},
/* Error location */
errorPlacement: function (error, element) {
error.appendTo(".tip");
}
}
);
});
</script>
</body>
</html>