如何在vue 2.6中通过Ajax提交表单

Question

我是新手。

我有一个简单的表格，看起来像这样：

<form :action=" appUrl +'ConnectionHandler'" method="post" enctype="multipart/form-data">

  <fieldset 
    id="fileHandlingButtons"
    :disabled="is_fileHandler_disabled"
    >
    <legend>File Handling</legend>
    <input
      type="file" 
      id="selectFile"
      name="selectFile"
    >
    <input
      type="button"
      value="Run"
      id="run"
      @click="startRun"
    >

  </fieldset>
</form>

我想不使用提交类型就提交到后端。相反，我想通过ajax提交它。

Answer 1

要从Vue.js发出XMLHTTPRequest，通常会使用一个库。我推荐Axios，它也是referenced in the Vue guide。

我建议您先阅读这两个内容，但下面给出了一个简短的示例，说明如何将其应用于您的问题。

安装axios，并将其导入您的组件。您将使用像yarn或npm这样的包管理器，如果您使用npm（常用），则在项目文件夹中应使用以下命令：

npm install axios

在您的组件中定义一个SubmitMyForm（）方法，该方法将通过调用axios来为您提交表单。这是这种方法的一个（伪代码）示例：

submitMyForm() {
  axios.post('your-api-url', {
    dataField1: value,
    dataField2: value
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });
}

例如，向要提交表单的任何用户操作添加侦听器：

<button @click="submitMyForm()">Submit</button>

要在组件方法中使用表单数据，应使用v模型绑定here is a link to the guide entry.。在您的情况下，您可以在组件的数据对象中定义两个变量，每个输入字段一个。然后可以在axios.post（）调用中发送这些变量。

还有其他模式可以执行此操作，我个人喜欢使用Vuex并在Vuex操作中执行所有api调用，这些调用按模块进行组织。我之所以喜欢它，是因为它可以在组件之间重复使用代码，并消除了组件之间服务器通信的责任，使它们保持美观和简单。但这还涉及更多点，上面的方法很好入门。