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

我是vue新手

我有一个简单的表单，如下所示：

<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提交它。

要从Vue.js生成XMLHTTPRequests，通常需要使用库。我推荐，也是

我建议你从阅读这两本书开始，但我已经给出了一个简短的例子，说明如何将这一点应用到下面的问题中

安装axios并将其导入组件。您可能会使用像Thread或npm这样的包管理器，如果您使用npm（常用），则项目文件夹中的以下命令应该可以执行此操作：

在组件中定义submitMyForm（）方法，该方法将通过调用axios为您提交表单。以下是此类方法的（伪代码）示例：

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

提交

要使表单数据在组件方法中可用，可以使用v-model绑定。在您的情况下，您可以在组件的数据对象中定义两个变量，每个输入字段一个。然后可以在axios.post（）调用中发送这些变量

---

还有其他模式可以做到这一点，我个人喜欢的一种模式是在Vuex操作中使用和执行所有api调用，按模块组织。我更喜欢这一点，因为它支持组件之间的代码重用，并从我的组件中消除了服务器通信的责任，使它们保持良好和简单。但是这需要更多的参与，上面的方法很好开始使用。

Vue.js有一个名为Vue resource的官方软件包，可以作为HTTP客户端使用，但是官方文档建议使用Axios

安装Axios并设置组件

$ npm install axios
OR
$ yarn add axios

在Vue组件中使用Axios

<template>
  <div><div/>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {};
  };
}
</script>

从“axios”导入axios；
导出默认值{
数据（）{
返回{}；
};
}

现在在您的例子中，您的模板应该如下所示

<template>
    <div>
        <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.prevent="startRun">
           </fieldset>
        </form>
    <div/>
        </template>

<script>
   import axios from "axios";

   export default {
      data() {
         return {};
      },
      methods: {
           startRun() {
              axios.post("api endpoint")
              .then(response => console.log(response))
           }
      }
   }
</script>

文件处理
从“axios”导入axios；
导出默认值{
数据（）{
返回{}；
},
方法：{
startRun（）{
axios.post（“api端点”）
.then（response=>console.log（response））
}
}
}

**注意*：*这不是你的工作代码，而是你如何解决问题的想法

$ npm install axios
OR
$ yarn add axios

<template>
  <div><div/>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {};
  };
}
</script>

<template>
    <div>
        <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.prevent="startRun">
           </fieldset>
        </form>
    <div/>
        </template>

<script>
   import axios from "axios";

   export default {
      data() {
         return {};
      },
      methods: {
           startRun() {
              axios.post("api endpoint")
              .then(response => console.log(response))
           }
      }
   }
</script>