在运行 vue 表单后停止执行 PHP 代码

Question

我有以下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 代码

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

因此，一旦此代码运行，我如何阻止它加载，以便它仍然发送数据但不退出。

Answer 1

使用onSubmit方法阻止默认操作并将数据发送到PHP

<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 将数据从onSubmit 方法发送到您的PHP 文件

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

async 和 await 关键字是可选的。如果不需要，您可以删除。