vue used Ajax (axios)

　　Vue.js version 2.0 is recommended axios to complete the ajax request. Axios is a Promise of HTTP-based library, you can use the browser and node.js in.

　　axios Chinese document library: http://www.axios-js.com/zh-cn/docs/

1.Axios simple to use

1.axios send a simple get request

Backstage:

    @RequestMapping("/index")
    @ResponseBody
    public Map index(HttpServletRequest request, HttpServletResponse response, @RequestParam Map condition) {
        System.out.println(condition);
        // 允许ajax跨域请求
        response.setHeader("Access-Control-Allow-Origin", "*");
        return condition;
    }

Reception:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="js/axios.min.js" type="text/javascript" charset="utf-8"></script>
    </head>

    <body>
        <script>
            // 为给定 ID 的 user 创建请求
            axios.get('http://localhost:8088/weixin/test/index.html?name=zs')
                .then(function(response) {
                    console.log(response);
                })
                .catch(function(error) {
                    console.log(error);
                });
        </script>
    </body>

</html>

result:

The above can also request:

        <Script>
             // request could be done above 
            axios.get ( 'HTTP: // localhost: 8088 / Weixin / Test / index.html' , { 
                    the params: { 
                        name: 'ZS2' 
                    } 
                }) 
                .then ( function (Response) { 
                    the console.log (Response); 
                }) 
                . the catch ( function (error) { 
                    the console.log (error); 
                });
         </ Script>

2. POST request sent

Background require filters allow cross-domain requests:

package cn.qlq.filter;

import java.io.IOException;

import javax.servlet.Filter;
import javax.servlet.FilterChain;
import javax.servlet.FilterConfig;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.annotation.WebFilter;
import javax.servlet.http.HttpServletResponse;

/**
 * 允许跨域请求
 */
@WebFilter(filterName = "corsFilter", urlPatterns = "/*")
public class CorsFilter implements Filter {
    public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain)
            throws IOException, ServletException {
        System.out.println(1);
        HttpServletResponse response2 = (HttpServletResponse) response;
        response2.setHeader("Access-Control-Allow-Origin", "*"); // 解决跨域访问报错
        response2.setHeader("Access-Control-Allow-Methods", "POST, PUT, GET, OPTIONS, DELETE");
        response2.setHeader("Access-Control-Max-Age", "3600"); // 设置过期时间
        response2.setHeader("Access-Control-Allow-Headers",
                "Origin, X-Requested-With, Content-Type, Accept, client_id, uuid, Authorization");
        response2.setHeader("Cache-Control", "no-cache, no-store, must-revalidate"); // 支持HTTP
                                                                                        // 1.1.
        response2.setHeader("Pragma", "no-cache"); // 支持HTTP 1.0.
                                                    // response.setHeader("Expires",
                                                    // "0");

        chain.doFilter(request, response);
    }

    @Override
    public void destroy() {

    }

    @Override
    public void init(FilterConfig arg0) throws ServletException {

    }

}

Controller Code:

    @RequestMapping("/index")
    @ResponseBody
    public Map index(HttpServletRequest request, HttpServletResponse response, @RequestBody Map condition) {
        System.out.println(condition);

        return condition;
    }

Front Code:

        <script>
            axios.post('http://localhost:8088/weixin/test/index.html', {
                    firstName: 'Fred',
                    lastName: 'Flintstone'
                })
                .then(function(response) {
                    console.log(response);
                })
                .catch(function(error) {
                    console.log(error);
                });
        </script>

result:

post request header is Content-Type application / json, transmits a data request JSON

3. Response structure

{
   // `data` response provided by the server 
  Data: {}, 

  // the HTTP status code from the server in response to the` status` 
  Status: 200 is , 

  // `statusText` the HTTP response from the server state information of 
  the statusText: 'the OK' , 

  // `head headers` server response 
  headers: {}, 

   // ` config` configuration information to request the 
  config: {},
  // 'request' 
  @ `request` the iS Generated that the this request response 
  @ The Last ClientRequest instance IS IT in Node.js (in redirects) 
  // and the XMLHttpRequest instance The Browser AN 
  Request: {} 
}

In 2.vue use axios

Back-end code:

    @RequestMapping("/index")
    @ResponseBody
    public Map index(HttpServletRequest request, HttpServletResponse response, @RequestBody Map condition) {
        condition.put("name", "zs");
        condition.put("age", 25);
        return condition;
    }

Reception:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/axios.min.js" type="text/javascript" charset="utf-8"></script>
    </head>

    <body>
        <div id="app">
            <h1>{{ data.name }} - {{ data.age }}</h1>
        </div>
        <script type="text/javascript">new Vue({
                el: '#app',
                    axios
                },null
                    data:
                data: {
            
                mounted() {
                        .post('http://localhost:8088/weixin/test/index.html', {
                            'test': 123
                        })
                        .then(response => (this.data = response.data))
                        .catch(function(error) { // 请求失败处理
                            console.log(error);
                        });
                }
            })
        </script>
    </body>

</html>

result:

vue used Ajax (axios)

1.Axios simple to use

1.axios send a simple get request

2. POST request sent

3. Response structure

In 2.vue use axios

Guess you like