Vue+axios的四种异步请求，参数的携带以及接收

当前位置:

首页 > 编程开发 > Java教程 >

Vue+axios的四种异步请求，参数的携带以及接收

Vue中axios发送GET, POST, DELETE, PUT四种异步请求，参数携带和接收问题

web.xml配置如下

<!-- 注册SpringMVC的前端控制器DispatcherServlet -->
    <servlet>
        <servlet-name>springMVC</servlet-name>
        <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
        <init-param>
            <param-name>contextConfigLocation</param-name>
            <param-value>classpath:springmvc.xml</param-value>
        </init-param>
        <!-- 将DispatcherServlet设置为随Web应用一起启动 -->
        <load-on-startup>1</load-on-startup>
    </servlet>

    <!--过滤所有的.do请求-->
    <servlet-mapping>
        <servlet-name>springMVC</servlet-name>
        <url-pattern>*.do</url-pattern>
    </servlet-mapping>

    <!--配置请求方式过滤器，HiddenHttpMethodFilter可将_method = POST请求方式转化为PUT,DELETE,PATCH三种中的一种，使用hidden标签提交同步请求使用， axios异步请求直接指定方式即可-->
    <filter>
        <filter-name>HiddenHttpMethodFilter</filter-name>
        <filter-class>org.springframework.web.filter.HiddenHttpMethodFilter</filter-class>
    </filter>
    <filter-mapping>
        <filter-name>HiddenHttpMethodFilter</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>

1、GET请求

发送GET请求：

<!--params是关键字，说明所携带的参数,json格式参数-->  
axios.get('/edit.do', {params: {id: value}})
    .then((response) => {
    //TODO
    })

Controller接收GET请求：

@GetMapping("/edit")
public Result edit(Integer id){
    //TODO
}

2、POST请求

发送POST请求：

var params = {
    currentPage: this.pagination.currentPage,    //当前页码
    pageSize: this.pagination.pageSize,          //页面大小
    queryString: this.pagination.queryString     //搜索条件
}
<!--POST请求第二个参数，可直接携带json格式的参数-->
axios.post('/findPage.do', params)
    .then(response => {
        //TODO
    })

Controller接收POST请求：

public class QueryPageBean implements Serializable {
    private Integer currentPage;//页码
    private Integer pageSize;//每页记录数
    private String queryString;//查询条件
}

@PostMapping("/findPage")
public PageResult findPage(@RequestBody QueryPageBean queryPageBean){
    //TODO
}

3、DELETE请求

发送DELETE请求：

<!--DELETE请求第二个参数，可携带多个json格式的参数，但需要params作为json参数的关键字-->
axios.delete('/delete.do', {params: {id: value}})
    .then((response) => {
        //TODO
    })

Controller接收DELETE请求：

@DeleteMapping("/delete")
public Result delete(Integer id){
    //TODO
}

4、PUT请求

发送PUT请求：

<!--PUT请求第二个参数，可直接携带json格式的参数-->
axios.put('/update.do', {name:userName,age:userAge,address:userAddress})
    .then((response) => {
        //TODO
    })

Controller接收PUT请求：

public class User implements Serializable {
    private String name;
    private Integer age;
    private String address;
}

@PutMapping("/update")
public Result update(@RequestBody User user){
    //TODO
}

出处：https://www.cnblogs.com/iron-fivesblog/p/15042632.html

栏目列表