在 VueJS 中使用 POST 请求提交表单答案

【问题标题】：Submit a form using POST request in VueJS在 VueJS 中使用 POST 请求提交表单
【发布时间】：2018-07-19 11:16:25
【问题描述】：

我有一个使用 POST 请求提交数据的端点，

http://localhost:3000/entry

密钥是fname, lname, age

我可以向给定的端点发出 POST 请求，它会创建一个条目。

我正在尝试使用 VueJS 提交表单。但是，当我在表单中调用 API 时，它并没有提交数据。我检查了网络调用，它没有向端点发送任何数据。

HTML :-

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.4/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-resource/0.1.16/vue-resource.min.js"></script>
<script src="script.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="style.css">


<div id="vueApp">
  <div class="container">

    <div class="row">
      <div class="col-sm-12">
        <h3>
          Dashboard
        </h3>
      </div>
    </div> 

    <div class="row">
      <div class="col-sm-12">
        <div class="form-group">
          <label for="fname">First Name</label>
          <input type="text" class="form-control" value="" v-model="fname" />
        </div>
        <div class="form-group">
          <label for="lname">Last Name</label>
          <input type="text" class="form-control" value="" v-model="lname" />
        </div>
        <div class="form-group">
          <label for="age">Age</label>
          <input type="text" class="form-control" value="" v-model="age" />
        </div>
      </div>
      <div class="col-sm-12">
        <a href="#" class="btn btn-success" @click="submitEntry">Submit</a>
        <span v-if="ajaxRequest">Please Wait ...</span>
      </div>
    </div> 

    <div>&nbsp;</div>

    <div class="row" v-if="debug">
      <div class="col-sm-12">
        <pre>{{ $data | json }}</pre>
      </div>
    </div>

    <!-- Table Start -->

    <div class="row">
      <table style="width:100%">
        <tr>
          <th>First Name</th>
          <th>Last Name</th>
          <th>Age</th>
        </tr>
        <tr>
          <td>{{fname}}</td>
          <td>{{lname}}</td>
          <td>{{age}}</td>
        </tr>
      </table>
    </div>
    <!-- Table END -->

  </div>
</div>

script.js :-

Vue.http.options.emulateJSON = true;

new Vue({
    el: '#vueApp',
    data: {
        debug: true,
        fname: '',
        lname: '',
        age: '',
        ajaxRequest: false,
        postResults: []
    },
    methods: {
      submitEntry: function() {
        this.ajaxRequest = true;
        this.$http.post('http://localhost:3000/entry', {
              fname: this.fname,
              lname: this.lname,
              age: this.age
            }, function (data, status, request) {
                this.postResults = data;

                this.ajaxRequest = false;
            });
      }}
});

style.css :-

table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}
th, td {
    padding: 5px;
    text-align: left;    
}

【问题讨论】：

您的控制台是否出现任何错误？
不，没有显示错误。
您可能想试试@click.prevent，也可以在submitEntry() 中添加console.log 以查看它是否被调用。
将上述内容放在一个小提琴中，我首先收到一个错误，即对 http 的请求被 https 上下文阻止。当我将其更改为 https 时，正如预期的那样，我收到了 CORS 错误。 Vue 应用程序也是从 localhost:3000 提供的吗？
@DineshAhuja 你是什么意思？没有服务器？喜欢file:///......./index.html？那么 AJAX 就不起作用了。

标签： javascript post vue.js

【解决方案1】：

你可以试试这个。

axios.post('http://localhost:3000/entry',{ params: { fname: this.fname, lname: this.lname, age: this.age }})
.then(response => this.responseData = response.data)
.catch(error => {});

使用前需要链接Axios CDN

https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js

【讨论】：

【解决方案2】：

尽管这有点老了，但我也遇到了同样的问题，没有数据发送到端点（这个问题首先出现在 Google 中）。问题是 vue-resource 的 $http.post() 默认将数据发布为 resource/json 而 not 一个表单。要发布表单，请设置emulateJSON to true which will send the "request body as application/x-www-form-urlencoded content type"。

顺便说一句，结果是一个 Promise，这意味着应该使用 then() 来处理响应（正如 @ribas 正确提到的那样）。

所以上例中的 submitEntry() 应该是：

      submitEntry: function() {
        this.ajaxRequest = true;
        this.$http.post('http://localhost:3000/entry', {
            fname: this.fname,
            lname: this.lname,
            age: this.age
          }, {
            emulateJSON: true  // <-- This was missing
          }).then(function (data) {  // <-- Handle results like this
            this.postResults = data;
            this.ajaxRequest = false;
          });
      }}

使用完全不同的库 (axios) 很好，实际上是 recommended by Evan You (creator of Vue)，但它并不能解决使用 vue-resource ajax 库的实际问题。

【讨论】：

【解决方案3】：

可能是这样的

this.$http({method: 'POST', url: URL, data: data})
.then(response => {
   this.postResults = data;
   this.ajaxRequest = false;
}).catch((err) => {
  console.log(err)
})

【讨论】：