Axios POST 表單數據為 JSON

Question

我正在嘗試將 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()
        })
},

謝謝！

Answer 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()
        })
},

2. 或者您可以保留您的代碼並更改后端以接受表單數據：您不能通過客戶端請求指示后端接受某些類型。