jQuery - AJAX introduction and methods
jQuery - Introduction to AJAX
What is AJAX?
AJAX = Asynchronous JavaScript and XML.
In short, AJAX loads data in the background and displays it on the web page without reloading the entire web page.
About jQuery and AJAX
jQuery provides multiple methods related to AJAX.
With jQuery AJAX methods, you can use HTTP Get and HTTP Post to request text, HTML, XML or JSON from a remote server - and you can load this external data directly into selected elements of the web page.
Without jQuery, AJAX programming is still somewhat difficult.
Writing regular AJAX code is not easy because different browsers implement AJAX differently. This means you have to write additional code to test the browser. However, the jQuery team has solved this problem for us. We only need a simple line of code to implement the AJAX function.
AJAX load() method
jquery load() method is one of the non-refresh methods in jquery ajax. It can implement direct The content in the loaded page is placed in the specified ID, or the page can be refreshed with parameters. Let me introduce to you some usage and common problems of load().
Syntax:
$(selector).load(URL,data,callback);
Required URL parameters specify the URL you wish to load.
The optional data parameter specifies the set of query string key/value pairs sent with the request.
The optional callback parameter is the name of the function executed after the load() method is completed.
Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").load("");});
});
</script>
</head>
<body>
<div id="div1">
<h2>使用 jQuery AJAX 修改文本内容</h2>
</div>
<button>获取外部内容</button>
</body>
</html>You can also add jQuery selectors to URL parameters.
The following example loads the content of the element with id="p1" in the "demo_test.txt" file into the specified <div> element.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").load("/try/ajax/demo_test.txt #p1");
});
});
</script>
</head>
<body>
<div id="div1"><h2>使用 jQuery AJAX 修改文本</h2></div>
<button>获取外部文本</button>
</body>
</html>Optional callback parameter specifications The callback function to be enabled when the load() method completes. The callback function can set different parameters:
responseTxt - Contains the result content when the call is successful
statusTXT - Contains the status of the call xhr - Contains the
XMLHttpRequest object.
AJAX get() and post() methods
jQuery get() and post() methods are used to request from the server through HTTP GET or POST requests data.
HTTP Request: GET vs. POST
Two common methods of request-response on the client and server side are: GET and POST.
GET - Request data from the specified resource POST - Submit the data to be processed to the specified resource
GET is basically used to obtain (retrieve) data from the server. Note: The GET method may return cached data.
POST can also be used to get data from the server. However, the POST method does not cache data and is often used to send data along with the request.
jQuery $.get() method
$.get() method requests data from the server via an HTTP GET request.
Syntax:
$.get(URL,callback);
Required URL parameters specify the URL you wish to request.
The optional callback parameter is the name of the function executed after the request is successful.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$.get("/try/ajax/demo_test.php",function(data,status){
alert("数据: " + data + "\n状态: " + status);
});
});
});
</script>
</head>
<body>
<button>发送一个 HTTP GET 请求并获取返回结果</button>
</body>
</html>$.get() The first parameter is the URL we wish to request ("demo_test.php").
The second parameter is the callback function. The first callback parameter stores the content of the requested page, and the second callback parameter stores the status of the request.
Tip: This PHP file ("demo_test.php") is similar to this:
<?php
echo 'This is data read from the PHP file. ';
?>
jQuery $.post() method
$.post() method requests from the server through HTTP POST request data.
Syntax:
$.post(URL,data,callback);
Required URL parameters specify the URL you wish to request.
The optional data parameter specifies the data to be sent with the request.
The optional callback parameter is the name of the function executed after the request is successful.
The following example uses $.post() to send data along with the request:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$.post("/try/ajax/demo_test_post.php",{
name:"php中文网",
url:"http://www.php.cn"
},
function(data,status){
alert("数据: \n" + data + "\n状态: " + status);
});
});
});
</script>
</head>
<body>
<button>发送一个 HTTP POST 请求页面并获取返回内容</button>
</body>
</html>The first parameter of $.post() is the URL we wish to request ("demo_test_post.php" ).
Then we send the data along with the request (name and city).
The PHP script in "demo_test_post.php" reads these parameters, processes them, and returns the results.
The third parameter is the callback function. The first callback parameter stores the content of the requested page, while the second parameter stores the status of the request.
Tip: This PHP file ("demo_test_post.php") looks like this:
<?php $name = isset($_POST['name']) ? htmlspecialchars($_POST['name']) : ''; $city = isset($_POST['url']) ? htmlspecialchars($_POST['url']) : ''; echo '网站名: ' . $name; echo "\n"; echo 'URL 地址: ' .$city; ?>
![Front-end project-Shangyou [HTML/CSS/JS technology comprehensive practice]](https://img.php.cn/upload/course/000/000/068/63bfcb2974f91471.jpg)
![Zero-based front-end course [Vue advanced learning and practical application]](https://img.php.cn/upload/course/000/000/068/63bbd15353895588.jpg)
![WEB front-end tutorial [HTML5+CSS3+JS]](https://img.php.cn/upload/course/000/000/068/63ba60c8da520536.jpg)
![Apipost practical application [api, interface, automated testing, mock]](https://img.php.cn/upload/course/000/000/068/63b3c967a20f4861.jpg)
