vue-resource中的POST请求

最新推荐文章于 2024-03-29 10:07:05 发布

张侦毅

最新推荐文章于 2024-03-29 10:07:05 发布

阅读量4.4k

点赞数

文章标签： vue-resource JSON Server

本文链接：https://blog.csdn.net/ZZY1078689276/article/details/83657466

版权

文章目录

问什么要写这篇文章
注意事项
示例
- 源码
- 运行结果

问什么要写这篇文章

这里主要是接下面这两篇文章：

上面的第一篇主要讲的是在JSON Server中多种请求方式，比如说GET亦或是POST，虽然说是用REST Client来进行操作的，但是其方法和在页面中用vue-resource请求是大体一样的。

上面的第二篇主要讲的是用GET方式请求JSON Server服务器中的数据，而采用POST方式请求JSON Server服务器中的数据其大体也还是一样的。

既然此篇的POST请求在上面的两篇文章中多少都有提及，这里之所以还要写一下，其原因如下：

this.$http.get('/someUrl', [options]).then(successCallback, errorCallback);
this.$http.post('/someUrl', [body], [options]).then(successCallback, errorCallback);

从上面可以看出，在请求方式上，post请求明显比上面的多一个请求参数，而且在请求参数上，其与浏览器默认的写法也是有些不同的。

注意事项

请求报文体的类型

在上面的文章使用WebStorm的REST Client操作JSON Server中，我们知道，POST请求需要在报文体中添加Content-Type: application/json 字样，但是在这里我们并不是这么写，在这里我们如果要想达到该效果，我们需要这么写：

{emulateJSON:true}

请求参数

在GET请求中，我们可以直接把参数写在URL路径之上，但是在这里，我们就不能如此，我们添加请求参数时是这样的，比如说以添加老刘这条数据为例，其写法是这样的：

{name:'老刘'}

返回的参数

在GET请求中，我们返回的参数其实就是整个的JSON对象结果，而在POST请求中，由于我们执行的是插入数据操作，因而其返回的结果就是插入的数据对象，比如说我们要插入{name:'老刘'}这条数据，返回的插入结果为：

在这里插入图片描述

示例

源码

.html源码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue-router</title>
</head>
<body>
<div id="app">
    <ul>
        <li>{{obj.name}}</li>
    </ul>
</div>
<script src="../../../../js/vue/vue/1.0/vue.js"></script>
<script src="../../../../js/vue/vue-resource/1.2.1/vue-resource.js"></script>
<script type="application/javascript">
    var vm = new Vue({
        el:'#app'
        ,data:{
            obj:{}
        }
        ,created(){
            this.getData();
        }
        ,methods:{
            getData(){
                var url = 'http://localhost:3000/people';
                this.$http.post(url,{name:'老刘'},{emulateJSON:true}).then(function(res){
                    if(!res.ok){
                        alert('请求出错！');
                    }
                    this.obj = res.body;
                });
            }
        }
    });
</script>
</body>
</html>

db.json源码

{
  "people": [
    {
      "id": 1,
      "name": "张三"
    },
    {
      "id": 2,
      "name": "李四"
    }
  ]
}

运行结果

在这里插入图片描述

张侦毅

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
vue-resource中的POST请求

文章目录问什么要写这篇文章注意事项请求报文体的类型请求参数返回的参数示例源码运行结果问什么要写这篇文章这里主要是接下面这两篇文章：使用WebStorm的REST Client操作JSON ServerVue请求JSON Server服务器数据上面的第一篇主要讲的是在JSON Server中多种请求方式，比如说GET亦或是POST，虽然说是用REST Client来进行操作的...
复制链接

扫一扫