contenido
1. Sintaxis de la función $.get()
2. $.get() inicia una solicitud sin parámetros
3. $.get() inicia una solicitud con parámetros
4. Sintaxis de la función $.post()
5. $.post() envía datos al servidor
6. Sintaxis de la función $.ajax()
7. Use $.ajax() para iniciar una solicitud GET
8. Use $.ajax() para iniciar una solicitud POST
1. Sintaxis de la función $.get()
La función $.get() en jQuery tiene una sola función y se usa especialmente para iniciar una solicitud de obtención, a fin de solicitar recursos en el servidor al cliente para su uso.
La sintaxis de la función $.get() es la siguiente:
$.get(url, [data], [callback])
Entre ellos, los significados de los tres parámetros son los siguientes:
| nombre del parámetro | Tipo de parámetro | es obligatorio | ilustrar |
| URL | cuerda | Sí | dirección del recurso a solicitar |
| datos | objeto | no | Parámetros a llevar durante la solicitud de recursos |
| llamar de vuelta | función | no | La función de devolución de llamada cuando la solicitud es exitosa |
2. $.get() inicia una solicitud sin parámetros
Al usar la función $.get() para iniciar una solicitud sin parámetros, puede proporcionar directamente la dirección URL solicitada y la función de devolución de llamada después de que la solicitud sea exitosa.
$.get('http://www.liulongbin.top:3006/api/getbooks',function(res) {
console.log(res) //这里的res是服务器返回的数据
})
Código de muestra:
<!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>Ejecute el código, haga clic derecho en el navegador e inspeccione:
Elija XHR, que está diseñado para filtrar solicitudes Ajax
Hacemos clic en el botón y encontramos que hay una línea más en la columna a continuación, lo que significa que se ha iniciado una solicitud Ajax
Hacemos clic en esta línea y cambiamos a los encabezados
Aquí podemos ver que la dirección URL de nuestra solicitud Ajax es la dirección que completamos en $.get(), el método de solicitud es GET, y los datos se obtienen especialmente de esta dirección, y luego se pueden ver los datos extraídos a través de Response, hacemos clic en Preview, y estos son los datos embellecidos en Pesponse:
el estado es 200, 200 significa éxito
Y también podemos ver los datos que obtuvimos en la consola Consola
3. $.get() inicia una solicitud con parámetros
Cuando se usa la función $.get() para iniciar una solicitud con parámetros, el código de muestra es el siguiente:
$.get('http://www.liulongbin.top:3006/api/getbooks', { id:1 }，function(res) {
console.log(res)
})
El segundo parámetro es un objeto de parámetro, que simula obtener la información de la identificación del libro de 1
4. Sintaxis de la función $.post()
La función $.post() en jQuery tiene una sola función y está dedicada a iniciar una solicitud de publicación para enviar datos al servidor.
La sintaxis de la función $.post() es la siguiente:
$.post(url,[data],[callback]) //中括号包起来的说明是可选参数
Entre ellos, los significados de los tres parámetros son los siguientes:
| nombre del parámetro | Tipo de parámetro | es obligatorio | ilustrar |
| URL | cuerda | Sí | dirección para enviar datos |
| datos | objeto | no | datos a enviar |
| llamar de vuelta | función | no | La función de devolución de llamada cuando el envío de datos es exitoso |
5. $.post() envía datos al servidor
Simule agregar información del libro:
$.post(
'http://www.liulongbin.top.com:3006/api/addbook', //请求的URL地址
{ //提交的数据
bookname: '水浒传',
author: '施耐庵',
publisher: '上海图书出版社'
}, function(res) {
console.log(res); // 这里的 res 是服务器返回的数据
})6. Sintaxis de la función $.ajax()
En comparación con las funciones $.get() y $.post(), la función $.ajax() proporcionada en jQuery es una función más completa que nos permite configurar las solicitudes de Ajax con más detalle.
La sintaxis básica de la función $.ajax( es la siguiente:
$.ajax({
type: '', //请求的方式，例如GET或POST
url: ''，//请求的URL地址
data: { },// 这次请求要携带的数据
success: function(res) { } // 请求成功之后的回调函数
})
7. Use $.ajax() para iniciar una solicitud GET
Cuando use $.ajax() para iniciar una solicitud GET, simplemente establezca el valor del atributo de tipo en 'GET':
$.ajax({
type: 'GET', //请求的方式
url: 'http://www.liulongbin.top:3006/api/getbooks', // 请求的URL地址
data: { id: 1 },// 这次请求要携带的数据
success: function(res) { //请求成功之后的回调函数
console. log (res)
}
})
Ejecute el siguiente código:
<!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>Después de hacer clic en el botón en el navegador, vea si hay datos obtenidos bajo la respuesta:
8. Use $.ajax() para iniciar una solicitud POST
Al usar $.ajax() para iniciar una solicitud POST, solo necesita establecer el valor del atributo de tipo en 'POST', y este es el parámetro de datos que contiene los datos que se enviarán al servidor. Para ejemplos específicos, consulte OBTENER