content
2. $.get() initiates a request without parameters
3. $.get() initiates a request with parameters
4. Syntax of $.post() function
5. $.post() submits data to the server
6. Syntax of $.ajax() function
7. Use $.ajax() to initiate a GET request
8. Use $.ajax() to initiate a POST request
1. Syntax of $.get() function
The $.get() function in jQuery has a single function and is specially used to initiate a get request, so as to request resources on the server to the client for use.
The syntax of the $.get() function is as follows:
$.get(url, [data], [callback])
Among them, the meanings of the three parameters are as follows:
| parameter name | Parameter Type | Is it mandatory | illustrate |
| url | string | Yes | resource address to request |
| data | object | no | Parameters to carry during resource request |
| callback | function | no | The callback function when the request is successful |
2. $.get() initiates a request without parameters
When using the $.get() function to initiate a request without parameters, you can directly provide the requested URL address and the callback function after the request is successful.
$.get('http://www.liulongbin.top:3006/api/getbooks',function(res) {
console.log(res) //这里的res是服务器返回的数据
})
Sample code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="jquery.min.js"></script> //引入jquery文件
<style>
</style>
</head>
<body>
<button id="btnget">发起不带参数的URL请求</button>
<script>
$(function() {
$('#btnget').on('click',function() {
$.get('http://www.liulongbin.top:3006/api/getbooks',function(res) {
console.log(res);
})
})
})
</script>
</body>
</html>Run the code, right-click in the browser and inspect:
Choose XHR, which is designed to filter Ajax requests
We click the button and find that there is one more line in the column below, which means that an Ajax request has been initiated
We click on this line and switch to the Headers
Here we can see that the URL address of our Ajax request is the address we filled in in $.get(), the request method is GET, and the data is specially obtained from this address, and then the data taken out can be seen through Response, We click Preview, and this is the beautified data in Pesponse:
status is 200, 200 means success
And we can also see the data we obtained under the Console console
3. $.get() initiates a request with parameters
When using the $.get() function to initiate a request with parameters, the sample code is as follows:
$.get('http://www.liulongbin.top:3006/api/getbooks', { id:1 }，function(res) {
console.log(res)
})
The second parameter is a parameter object, which simulates obtaining the information of the book id of 1
4. Syntax of $.post() function
The $.post() function in jQuery has a single function and is dedicated to initiating a post request to submit data to the server.
The syntax of the $.post() function is as follows:
$.post(url,[data],[callback]) //中括号包起来的说明是可选参数
Among them, the meanings of the three parameters are as follows:
| parameter name | Parameter Type | Is it mandatory | illustrate |
| url | string | Yes | address to submit data |
| data | object | no | data to submit |
| callback | function | no | The callback function when the data submission is successful |
5. $.post() submits data to the server
Simulate adding book information:
$.post(
'http://www.liulongbin.top.com:3006/api/addbook', //请求的URL地址
{ //提交的数据
bookname: '水浒传',
author: '施耐庵',
publisher: '上海图书出版社'
}, function(res) {
console.log(res); // 这里的 res 是服务器返回的数据
})6. Syntax of $.ajax() function
Compared with the $.get() and $.post() functions, the $.ajax() function provided in jQuery is a more comprehensive function that allows us to configure Ajax requests in more detail.
The basic syntax of the $.ajax( function is as follows:
$.ajax({
type: '', //请求的方式，例如GET或POST
url: ''，//请求的URL地址
data: { },// 这次请求要携带的数据
success: function(res) { } // 请求成功之后的回调函数
})
7. Use $.ajax() to initiate a GET request
When using $.ajax() to initiate a GET request, just set the value of the type attribute to 'GET':
$.ajax({
type: 'GET', //请求的方式
url: 'http://www.liulongbin.top:3006/api/getbooks', // 请求的URL地址
data: { id: 1 },// 这次请求要携带的数据
success: function(res) { //请求成功之后的回调函数
console. log (res)
}
})
Run the following code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="jquery.min.js"></script>
<style>
</style>
</head>
<body>
<button id="btnget">发起post请求</button>
<script>
$(function() {
$('#btnget').on('click',function() {
$.ajax({
type: 'GET', //请求的方式
url: 'http://www.liulongbin.top:3006/api/getbooks', // 请求的URL地址
data: { id: 1 },// 这次请求要携带的数据
success: function(res) { //请求成功之后的回调函数
console. log (res)
}
})
})
})
</script>
</body>
</html>After clicking the button in the browser, see if there is data obtained under the response:
8. Use $.ajax() to initiate a POST request
When using $.ajax() to initiate a POST request, you only need to set the value of the type attribute to 'POST', and this is the data parameter that contains the data to be submitted to the server. For specific examples, refer to GET