Как отправить форму через ajax в vue 2.6 - PullRequest
Новая
       41

Как отправить форму через ajax в vue 2.6

0 голосов
/ 23 января 2020

Я vue newb ie.

У меня есть простая форма, которая выглядит следующим образом: 

<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.

Ответы [ 2 ]

0 голосов
/ 23 января 2020

Vue. js имеет официальный пакет, который называется vue -ресурс, который работает как HTTP-клиент, но официальная документация предлагает использовать Ax ios.

Установка Ax ios и настройка компонента 

$ npm install axios
OR
$ yarn add axios

Использование Ax ios в Vue Components 

<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>

** Примечание *: * это будет не ваш рабочий код, а идея о том, как вы решите свою проблему

0 голосов
/ 23 января 2020

Для создания запросов XMLHTTP из Vue. js вы обычно используете библиотеку. Я рекомендую Топор ios, который также указан в руководстве Vue .

Я предлагаю вам начать с чтения этих двух, но я привел короткий пример того, как вы можете применить это к вашей проблеме ниже.

  1. Установите топор ios и импортируйте его к вашему компоненту. Вы бы использовали менеджер пакетов, например yarn или npm, если вы используете npm (обычно используется), следующая команда в папке вашего проекта должна сделать это: 
npm install axios
Определите метод submitMyForm () в вашем компоненте, который собирается отправить форму за вас, сделав вызов ax ios. Вот (псевдокод) пример того, как такой метод будет выглядеть: 
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-модели, здесь - ссылка на руководство. . В вашем случае вы можете определить две переменные в объекте данных вашего компонента, по одной для каждого из ваших полей ввода. затем вы можете отправить эти переменные в вызове ax ios .post ().

Для этого есть другие шаблоны, один из которых мне лично нравится - использовать Vuex и делать все вызовы API в действиях Vuex, организованных на модуль. Я предпочитаю это, потому что это позволяет повторно использовать код между компонентами и снимает с сервера ответственность за взаимодействие с сервером, делая их красивыми и простыми. Но это немного сложнее, вышеописанный метод хорош для начала.

...