Остановить выполнение кода PHP после запуска формы vue - PullRequest
Новая
       35

Остановить выполнение кода PHP после запуска формы vue

0 голосов
/ 05 апреля 2020

У меня есть следующая vue форма 

<FlashMessage message="Message sent!" :show="showMsg" />

<form @submit.prevent.stop="onSubmit" ref="ticketForm">
  <div class="mb-4">
    <label class="block" for="name">
      <span class="text-gray-900">Full name</span>
      <input
        class="form-input mt-1 block w-full outline-none"
        placeholder="Sherlock Holmes"
        v-model="formData.name"
        required
        id="name"
        name="name"
        type="text"
      />
    </label>
  </div>

  <div class="mb-4">
    <label class="block" for="email">
      <span class="text-gray-900">Email address</span>
      <input
        class="form-input mt-1 block w-full outline-none"
        placeholder="sherlock@bakerstreet.com"
        v-model="formData.email"
        required
        id="email"
        name="email"
        type="email"
      />
    </label>
  </div>

  <div class="mb-4">
    <label class="block" for="department">
      <span class="text-gray-700">Department</span>
      <select
        class="form-select mt-1 block w-full outline-none"
        name="deptid"
        v-model="formData.deptid"
      >
        <option value="1">General Support</option>
        <option value="5">General Support</option>
        <option value="2">Hosting Support</option>
        <option value="3">Domain Support</option>
        <option value="4">Game Support</option>
      </select>
    </label>
  </div>

  <div class="mb-4">
    <label class="block" for="message">
      <span class="text-gray-900">Message</span>
      <textarea
        class="form-input mt-1 block w-full outline-none h-56 resize-none"
        placeholder="Enter your message here"
        v-model="formData.message"
        name="message"
        id="message"
        cols="30"
        rows="10"
        required
      />
    </label>
  </div>

  <div class="flex mt-6">
    <label class="flex items-center">
      <input type="checkbox" class="form-checkbox" />
      <span class="ml-2">
        I agree to the
        <a href="#" class="underline">privacy policy</a>
      </span>
    </label>
  </div>

  <div class="flex mt-6">
    <label class="flex items-center">
      <button
        type="submit"
        name="ticketSubmit"
        value="Submit"
        class="flex items-center py-3 px-6 border rounded bg-gray-800 hover:bg-gray-900 font-medium text-white transition duration-300 ease-in-out"
      >
        <i class="fas fa-paper-plane mr-4"></i>
        Send
      </button>
    </label>
  </div>
</form>

, и у меня есть следующий скрипт 

<script>
import axios from "axios";
import FlashMessage from "../components/FlashMessage";
import FeaturesWGrid from "../components/FeaturesWGrid";
import Grid from "../components/Grid";
import GridItem from "../components/GridItem";

export default {
  name: "Contact",
  components: {
    FlashMessage,
    FeaturesWGrid,
    Grid,
    GridItem
  },
  data() {
    return {
      showMsg: false,
      formData: {
        name: "",
        email: "",
        deptid: "1",
        message: ""
      }
    };
  },
  methods: {
    onSubmit: async function() {
      this.showMsg = true;
      await axios.post("/backend/contact.php", this.formData);
      setTimeout(() => {
        this.showMsg = false;
      }, 3000);
    }
  }
};
</script>

Это показывает сообщение отправки, но когда я отправляю, оно достигает PHP файл и продолжает загружаться, пока не истечет время ожидания. Как я могу остановить загрузку файла после того, как весь код был запущен, оставаясь на той же странице?

Для большего контекста здесь есть PHP файл 

<?php
    $whmcsUrl = "";
    $api_identifier = "";
    $api_secret = "";
    $name = $_POST["name"];
    $email = $_POST["email"];
    $deptid = $_POST["deptid"];
    $message = $_POST["message"];

    // Build post values
    $postfields = array(
        'action' => 'OpenTicket',
        'identifier' => $api_identifier,
        'secret' => $api_secret,
        'deptid' => $deptid,
        'name' => $name,
        'email' => $email,
        "subject" => "Contact form Inquiry from $name",
        'message' => $message,
        'priority' => 'Medium',
        'useMarkdown' => 'false',
        'responsetype' => 'json',
    );

    // Call the API
    $ch = curl_init();
    curl_setopt($ch, CURLOPT_URL, $whmcsUrl . 'includes/api.php');
    curl_setopt($ch, CURLOPT_POST, 1);
    curl_setopt($ch, CURLOPT_TIMEOUT, 30);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
    curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, 1);
    curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, 2);
    curl_setopt($ch, CURLOPT_POSTFIELDS, http_build_query($postfields));
    $response = curl_exec($ch);
    if (curl_error($ch)) {
    die('Unable to connect: ' . curl_errno($ch) . ' - ' . curl_error($ch));
    }
    curl_close($ch);

    // Decode response
    $jsonData = json_decode($response, true);

    // Dump array structure for inspection
    var_dump($jsonData);

    exit;
?>

PHP code 

<?php
    $whmcsUrl = "";
    $api_identifier = "";
    $api_secret = "";
    $name = "";
    $email = "";
    $deptid = "";
    $message = "";

    if (isset($_POST['name'])) {
        $name = $_POST['name'];
    }

    if (isset($_POST['email'])) {
        $email = $_POST['email'];
    }

    if (isset($_POST['deptid'])) {
        $deptid = $_POST['deptid'];
    }

    if (isset($_POST['message'])) {
        $message = $_POST['message'];
    }

    // Build post values
    $postfields = array(
        'action' => 'OpenTicket',
        'identifier' => $api_identifier,
        'secret' => $api_secret,
        'deptid' => $deptid,
        'name' => $name,
        'email' => $email,
        "subject" => "Contact form Inquiry from $name",
        'message' => $message,
        'priority' => 'Medium',
        'useMarkdown' => 'false',
        'responsetype' => 'json',
    );

    // Call the API
    $ch = curl_init();
    curl_setopt($ch, CURLOPT_URL, $whmcsUrl . 'includes/api.php');
    curl_setopt($ch, CURLOPT_POST, 1);
    curl_setopt($ch, CURLOPT_TIMEOUT, 30);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
    curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, 1);
    curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, 2);
    curl_setopt($ch, CURLOPT_POSTFIELDS, http_build_query($postfields));
    $response = curl_exec($ch);
    if (curl_error($ch)) {
    die('Unable to connect: ' . curl_errno($ch) . ' - ' . curl_error($ch));
    }
    curl_close($ch);

    // Decode response
    $jsonData = json_decode($response, true);

    // Dump array structure for inspection
    var_dump($jsonData);
    var_dump($_POST)
?>

Итак, когда этот код запускается, как мне остановить его загрузку, чтобы он по-прежнему отправлял данные, но не выходил из системы.

1 Ответ

0 голосов
/ 05 апреля 2020

Предотвращение действия по умолчанию с помощью и отправка данных в PHP из метода onSubmit 

<form @submit.prevent.stop="onSubmit" ref="ticketForm">

ОБНОВЛЕНИЯ

Инициализация переменных, необходимых для привязки ваши входные данные 

data:()=>{
  return {
    formData:{
      name:null,
      // your other models
    }
  }
}

Используйте v-model для привязки полей ввода с помощью data

<form @submit.prevent.stop="onSubmit" ref="ticketForm">
  <input type="text" v-model="formData.name"> // this will bind the typing value to formData.name
</form>

Используйте axios для отправки данных в ваш файл PHP из метода onSubmit

onSubmit: async function(){
  this.showMsg = true;
  await axios.post("/backend/contact.php",this.formData);
  setTimeout(() => {
    this.showMsg = false;
  }, 3000);
}

Ключевые слова async и await являются необязательными. Вы можете удалить, если не требуется.

...