【Ajax】- Basic usage of Ajax

1. What is Ajax

Ajax is a technology in the browser: it is used to implement client web pages to request data from the server. Its full English name is Asynchronous Javascript And XML , abbreviation Ajax.

ajaxIt needs to be based on a browser, which means that there will be a browser, and there will be ajaxno browser without a browser.ajax

Static resources (web pages, pictures) do not need ajax, dynamic data only needs ajax

In the front-end field, the server can see a computer, and the client is the browser

Ajax in life:

1. Dynamically detect whether the username is occupied

2. Dynamically load a list of suggestions for search

3. Partially refresh the data of the web page

2. Ajax request method

5 ways to request:

1. POST adds data to the server

2. GET to get data from the server

3. DELETE deletes data on the server

4. PUT updates the data on the server (focusing on complete updates: such as updating the user's complete information)

5. PATCH updates the data on the server (focusing on partial updates: for example, only updating the user's mobile phone number)

3.axios library

 

axios(pronounced: Aike C Os) is the most popular library in the front-end circle, focusing on data requests.

Axios is a promise-based network request library for browsers and node.js

In the following Vue and React courses, axios will be used to request data.

Chinese official website address: Axios Chinese document | Axios Chinese website | Axios is a promise-based network request library, which can be used in browsers and node.js English official website address: axios - npm

4.Axios API

You can axiospass relevant configuration to create a request

ajax document oriented programming

Only urlis required. If not specified method, the request will use the GETmethod .

4-1 The basic syntax is as follows:

execute GETrequest

 // 为给定 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);
   });

execute POSTrequest

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

Execute multiple concurrent requests

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 axios(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 是请求成功之后的结果
 })

Initiate a GET request based on axios:

 The URL address of the test GET request is http://www.zeng.com:3006/api/getbooks

Note: This test is a simulated interface. For the specific interface, see the interface document provided by the 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})})

Query parameters for GET requests

The list data of all books is returned from the query just now. If you want to specify the query conditions, you can specify the query parameters through the paramsoption :

Can query multiple or single

// 第一种传参写法 ：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.参数名一定要参照文档的说明，不能随意乱写`

POST request based on axios

Note: GET requests submit data using params, POST requests submit data using data

The parameters of put, patch and post need to be set using data

Full address: server address + resource path

 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. Parameter formats supported by axios

Object: {key:value,key:value}, which will be converted to key=value&key=value inside axios

： ： Key = value & key = value & key = value ....

json字符串：'{"key":"value","key":"value"}'

formdata:new