【Ajax】- Uso básico de Ajax

1. ¿Qué es Ajax?

Ajax es una tecnología en el navegador: se utiliza para implementar páginas web de clientes para solicitar datos del servidor. Su nombre completo en inglés es Asynchronous Javascript And XML , abreviatura Ajax.

ajaxTiene que estar basado en un navegador, lo que significa que habrá un navegador, y no habrá ajaxnavegador sin navegador.ajax

Los recursos estáticos (páginas web, imágenes) no necesitan ajax, los datos dinámicos solo necesitan ajax

En el campo front-end, el servidor puede ver una computadora y el cliente es el navegador

Ajax en la vida:

1. Detectar dinámicamente si el nombre de usuario está ocupado

2. Carga dinámicamente una lista de sugerencias para la búsqueda

3. Actualizar parcialmente los datos de la página web

2. Método de solicitud de Ajax

5 formas de solicitar:

1. POST agrega datos al servidor

2. GET para obtener datos del servidor

3. DELETE elimina datos en el servidor

4. PUT actualiza los datos en el servidor (centrándose en actualizaciones completas: como actualizar la información completa del usuario)

5. PATCH actualiza los datos en el servidor (centrándose en actualizaciones parciales: por ejemplo, solo actualizando el número de teléfono móvil del usuario)

biblioteca 3.axios

 

axios(pronunciado: Aike C Os) es la biblioteca más popular en el círculo de front-end, centrándose en las solicitudes de datos.

Axios es una biblioteca de solicitud de red basada en promesas para navegadores y node.js

En los siguientes cursos de Vue y React, se utilizará axios para solicitar datos.

Dirección del sitio web oficial en chino: Axios Documento chino | Sitio web en chino de Axios | Axios es una biblioteca de solicitud de red basada en promesas, que se puede usar en navegadores y node.js Dirección del sitio web oficial en inglés: axios - npm

4. API de Axios

Puede axiospasar configuración relevante para crear una solicitud

programación orientada a documentos ajax

Solo urlse requiere. Si no se especifica method, la solicitud utilizará el GETmétodo .

4-1 La sintaxis básica es la siguiente:

ejecutar GETsolicitud

 // 为给定 ID 的 user 创建请求
 axios.get('/user?ID=12345')
   .then(function (response) {
     console.log(response);
   })
   .catch(function (error) {
     console.log(error);
   });
 ​
 // 上面的请求也可以这样做
 axios.get('/user', {
     params: {
       ID: 12345
     }
   })
   .then(function (response) {
     console.log(response);
   })
   .catch(function (error) {
     console.log(error);
   });

ejecutar POSTsolicitud

 axios.post('/user', {
     firstName: 'Fred',
     lastName: 'Flintstone'
   })
   .then(function (response) {
     console.log(response);
   })
   .catch(function (error) {
     console.log(error);
   });

Ejecutar múltiples solicitudes simultáneas

function getUserAccount() {
   return axios.get('/user/12345');
 }
 ​
 function getUserPermissions() {
   return axios.get('/user/12345/permissions');
 }
 ​
 axios.all([getUserAccount(), getUserPermissions()])
   .then(axios.spread(function (acct, perms) {
     // 两个请求现在都执行完成
   }));

4-2 ejes (config)

// 1.引入资源,引入之后，就会在全局挂载一个axios实例，我们发请求就可以直接使用这个实例 
     <script src="./lib/axios.js"></script>
 ​
 // 2.axios({ 配置 }).then(请求成功的回调函数)
 axios({
   method: '请求的类型',          // method:请求方式，如get,post,这个方式一定要参照接口文档
   url: '请求的URL地址'           // url:必须的，如果没有报错，它是请求地址--服务器资源地址
 }).then((result) => {       // result 可以顺便一个
   // then 用来指定请求成功之后的回调函数
   // 形参中的 result 是请求成功之后的结果
 })

Inicie una solicitud GET basada en axios:

 La dirección URL de la solicitud GET de prueba es http://www.zeng.com:3006/api/getbooks

Nota: Esta prueba es una interfaz simulada. Para conocer la interfaz específica, consulte el documento de interfaz proporcionado por el backend

axios({
   method: 'GET',
   url: 'http://www.zeng.com:3006/api/getbooks'
 }).then((result) => {       
   console.log(result)
 })
 // result:
 {
   config: { url: 'http://xxxx', ss: 'xx' },
   data: { code: 0, message: '成功', data: ['xx', 'yy'] },
   headers: { 'content-length': '1054', },
   request: { readyState: 4 },
   status: 200,
   statusText: 'OK'
 }
 // result是一个对象  result.data 才是服务器返回的结果  但data里面还有对象数据
 // 可以使用解构对函数参数传参
     then(({data}) => { console.log({data})})

Parámetros de consulta para solicitudes GET

Los datos de la lista de todos los libros se devuelven de la consulta en este momento. Si desea especificar las condiciones de consulta, puede especificar los parámetros de consulta a través de la paramsopción :

Puede consultar múltiples o solo

// 第一种传参写法 ：parmas  用于查询多个参数
 axios({
     method: 'get',
     url: 'http://www.zeng.com:3006/api/getbooks',
     params: {
         id:1,               // 表示获取 id=1 的图书
         bookname: 'love'    // 表示获取 id=1 并且 bookname=love 的图书
 ​
     }
 }).then((result) => { console.log(result) })
 `细节：
 1.params固定写死
 2.params是一个对象，里面的每组键值对就是一个一个的参数和值
 3.可以传递多个参数`
 ​
 // 第二种写法get方式的参数也可以在url中拼接，格式为： ?参数=值&参数=值
 url: 'http://www.zeng.com:3006/api/getbooks?id=10338',
 `细节：
 1.不能在参数中写空格，除非真的需要
 2.字符串不用加引号
 3.？是必需的
 4.参数名一定要参照文档的说明，不能随意乱写`

Solicitud POST basada en axios

Nota: las solicitudes GET envían datos usando parámetros, las solicitudes POST envían datos usando datos

Los parámetros de poner, parchear y publicar deben configurarse utilizando datos

Dirección completa: dirección del servidor + ruta del recurso

 axios({
   method: 'POST',       
   url: 'http://www.zeng.com:3006/api/addbook',
   // 请求体 data
   data: {           // POST 是新增数据，使用data添加属性和属性值
     bookname: '水浒传',
     author: '施耐庵',
     publisher: '顺义出版社'
   }
 }).then(result => {
   console.log(result.data.message)      // 提示是否添加成功
 })
 ​
 `result.data.status
 status=0 说明当前请求成功 status=1说明请求不成功`

5. Formatos de parámetros compatibles con axios

Objeto: {clave:valor,clave:valor}, que se convertirá en clave=valor&clave=valor dentro de axios

： ： Clave = valor & clave = valor & clave = valor ....

json字符串：'{"clave":"valor","clave":"valor"}'

datos de formulario: nuevo