0


我正在尝试将 HTML 表单中的数据发布到 REST 后端服务，该服务使用 JSON 作为数据。定义了我的表格：

<form name="form" >
    <input type="text" placeholder="Name" value="name" size="60"/></div>
    <input type="text" placeholder="Surname" value="surname" size="60"/></div>
    <input type="submit" value="Save" @click="getPostsViaREST"/>
</form>

这是我用来发布数据的 Axios 方法：

methods: {
    getPostsViaREST: function() {

    var form = document.querySelector('form');

    var user = new FormData(form);

    axios.post("/users", user)
        .then(response => {
            this.getViaREST()
        })
},

但是我收到 415 错误响应，所以我想问题是我没有以 JSON 格式发送数据（后端使用 JSON）。我想一种解决方法可能是使用 document.getElementById 并发布单个字段。为了学习，我想知道使用FormData是否仍然可以做到这一点。

编辑：我尝试了一些方法将表单数据转换为 JSON，但似乎一个空的有效负载被发送到服务器端：

    var form = document.querySelector('form');

    var formData = new FormData(form);
    var object = {};
    formData.forEach(function(value, key){
        object[key] = value;
    });
    var json = JSON.stringify(object);


    axios.post("/users",  json)
        .then(response => {
            this.getViaREST()
        })
},

谢谢！

4

1 回答 1

1

您显然有两个选择：

  1. 您可以v-model用于表单输入绑定：
<form name="form" >
    <input type="text" placeholder="Name" v-model="name" size="60"/></div>
    <input type="text" placeholder="Surname" v-model="surname" size="60"/></div>
    <input type="submit" value="Save" @click="getPostsViaREST"/>
</form>

您可以在发送数据时使用它们构建一个 json 对象：

methods: {
    getPostsViaREST() {
      // No form data, but json here
      var user = {
        // name and surname should exist in [data] or [computed] section
        name: this.name,
        surname: this.surname
      };

      axios.post("/users", user)
        .then(response => {
            this.getViaREST()
        })
},
  1. 或者您可以保留您的代码并更改后端以接受表单数据：您不能通过客户端请求指示后端接受某些类型。
于 2019-12-13T08:18:34.497 回答