php - 在运行 vue 表单后停止执行 PHP 代码
问题描述
我有以下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)
?>
因此,一旦运行此代码,我该如何阻止它加载,以便它仍然发送数据但不退出。
解决方案
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
将数据PHP
从方法发送到您的文件onSubmit
onSubmit: async function(){
this.showMsg = true;
await axios.post("/backend/contact.php",this.formData);
setTimeout(() => {
this.showMsg = false;
}, 3000);
}
async
和await
关键字是可选的。如果不需要,您可以删除。
推荐阅读
- nginx - Nginx 端口转发在监听 80 时不起作用
- routing - Sonicwall 路由速度
- javascript - js中N可以表示为K因子乘积的方式数
- mysql - 通过比较一组列值创建一个新列
- velocity - Xwiki 自动增加应用程序中的数字页面标题
- r - 如何以概率使用 ggplot2 中的 geom_roc()
- java - 如何将 ISO 8601 格式的时间戳与从 UTC 偏移的时间转换为 Java/Scala 中的 EpochMilli
- c# - 如何在内部提取 ZIP 文件并将新名称添加到可观察集合?
- javascript - 每次单击togle-slide时如何滑动div并显示不同的内容?
- python - Flask 从 nginx 实例运行 bash 命令