Php 为什么我的AJAX方法会将表单输入发送到URL？
一旦用户提交表单，我想使用JQuery/AJAX来阻止页面重定向/重新加载 但是现在发生的是，用户数据被刷新并显示在URL中——即使我使用的是POST方法 我的landing.html页面上有两个表单，但我只给出其中一个表单的编码： 我的问题似乎在contactForm.js的某个地方：Php 为什么我的AJAX方法会将表单输入发送到URL？,php,jquery,ajax,forms,post,Php,Jquery,Ajax,Forms,Post,一旦用户提交表单，我想使用JQuery/AJAX来阻止页面重定向/重新加载 但是现在发生的是，用户数据被刷新并显示在URL中——即使我使用的是POST方法 我的landing.html页面上有两个表单，但我只给出其中一个表单的编码： 我的问题似乎在contactForm.js的某个地方： $(function() { $("#contactUsForm input,#contactUsForm textarea").jqBootstrapVali
$(function() {
$("#contactUsForm input,#contactUsForm textarea").jqBootstrapValidation({
preventSubmit: true,
submitError: function($form, event, errors) {
// additional error messages or events
},
submitSuccess: function($form, event) {
event.preventDefault(); // prevent default submit behaviour
// get values from FORM
var name = $("input#c_fName").val();
var email = $("input#c_email").val();
var phone = $("input#c_phone").val();
var message = $("textarea#c_message").val();
var firstName = name; // For Success/Failure Message
// Check for white space in name for Success/Fail message
if (firstName.indexOf(' ') >= 0) {
firstName = name.split(' ').slice(0, -1).join(' ');
}
$.ajax({
url: "././forms/contactUsForm.php",
type: "POST",
data: {
name: name,
phone: phone,
email: email,
message: message
},
cache: false,
success: function() {
// Success message
$('#c_success').html("<div class='alert alert-success'>");
$('#c_success > .alert-success').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>×")
.append("</button>");
$('#c_success > .alert-success')
.append("<strong>Your message has been sent. </strong>");
$('#c_success > .alert-success')
.append('</div>');
//clear all fields
$('#contactUsForm').trigger("reset");
},
error: function() {
// Fail message
$('#c_success').html("<div class='alert alert-danger'>");
$('#c_success > .alert-danger').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>×")
.append("</button>");
$('#c_success > .alert-danger').append($("<strong>").text("Sorry " + firstName + ", it seems that my mail server is not responding. Please try again later!"));
$('#c_success > .alert-danger').append('</div>');
//clear all fields
$('#contactUsForm').trigger("reset");
},
complete: function() {
setTimeout(function() {
$this.prop("disabled", false); // Re-enable submit button when AJAX call is complete
}, 1000);
}
});
},
filter: function() {
return $(this).is(":visible");
},
});
$("a[data-toggle=\"tab\"]").click(function(e) {
e.preventDefault();
$(this).tab("show");
});
});
/*When clicking on Full hide fail/success boxes */
$('#c_fName').focus(function() {
$('#c_success').html('');
});
$（函数（）{
$（“#联系人表单输入，#联系人表单文本区域”）.jqBootstrapValidation({
对,，
submitError：函数（$form、event、errors）{
//其他错误消息或事件
},
submitSuccess：函数（$form，event）{
event.preventDefault（）；//防止默认提交行为
//从表单中获取值
var name=$（“输入#c#u fName”）.val（）；
var email=$（“输入c#U电子邮件”）.val（）；
var phone=$（“输入c#u phone”）.val（）；
var message=$（“textarea#c#u message”）.val（）；
var firstName=name；//对于成功/失败消息
//检查名称中是否有空格以显示成功/失败消息
if（firstName.indexOf（“”）>=0）{
firstName=name.split（“”）.slice（0，-1）.join（“”）；
}
$.ajax({
url:“.//forms/contactUsForm.php”，
类型：“POST”，
数据：{
姓名:姓名,，
电话:电话,，
电邮:电邮,，
信息：信息
},
cache:false，
成功：函数（）{
//成功信息
$（'c#u success'）.html（“”）；
$（'c#u success>.alert success'）.html（“×；”）
.附加（“”）；
$（“#c#u success>.alert success”）
.append（“您的邮件已发送。”；
$（“#c#u success>.alert success”）
.附加（“”）；
//清除所有字段
$（'contactUsForm'）。触发器（“重置”）；
},
错误：函数（）{
//失败消息
$（'c#u success'）.html（“”）；
$（'c#u success>.alert danger'）.html（“×；”）
.附加（“”）；
$（“#c#u success>.alert danger”）.append（$（“”）.text（“对不起”+firstName+”，我的邮件服务器似乎没有响应。请稍后再试！”）；
$（“#c#u success>.alert danger”）.append（“”）；
//清除所有字段
$（'contactUsForm'）。触发器（“重置”）；
},
完成：函数（）{
setTimeout（函数（）{
$this.prop（“disabled”，false）；//在AJAX调用完成时重新启用提交按钮
}, 1000);
}
});
},
过滤器：函数（）{
return$（this）.is（“：可见”）；
},
});
$（“a[数据切换=\”选项卡\“]）。单击（函数（e）{
e、 预防默认值（）；
$（此）.tab（“显示”）；
});
});
/*单击完全隐藏失败/成功框时*/
$（'c#fName'）。焦点（函数（）{
$（'#c#u success'）.html（''）；
});
<form name="contactUsForm" id="contactUsForm" action="forms/contactUsForm.php" method="POST">
<!-- First Name -->
<div class="control-group form-group col-12" >
<div class="controls">
<label for="c_fName">Full Name:</label>
<input
type="text"
class="form-control"
id="c_fName"
name="c_fName"
required
data-validation-required-message="Please enter your full name.."
placeholder="Johnny Smith">
</div>
</div>
<!-- Phone Number -->
<div class="control-group form-group">
<div class="controls">
<label for="c_phone">Phone Number:</label>
<input
type="tel"
class="form-control"
id="c_phone"
name="c_phone"
data-validation-required-message="Please enter your phone number."
placeholder="Example: 021 XXX XXXX...">
</div>
</div>
<!-- Email Address -->
<div class="control-group form-group">
<div class="controls">
<label for="c_email">Email Address:</label>
<input
type="email"
class="form-control"
id="c_email"
name="c_email"
required
data-validation-required-message="Please enter your email address."
placeholder="Example: jane.doe@email.com">
</div>
</div>
<!-- Message -->
<div class="control-group form-group">
<div class="controls">
<label for="c_message">Message:</label>
<textarea
rows="6"
cols="100"
class="form-control"
id="c_message"
name="c_message"
required
data-validation-required-message="Please enter your message"
maxlength="999" s
tyle="resize:none"
placeholder="Please tell us about your enquiry...">
</textarea>
</div>
</div>
<div id="c_success"></div>
<button
type="submit"
class="btn btn-primary"
id="sendMessageButton"
style="width: 100%;margin: auto" >
Send Message</button>
</form>
全名：
电话号码：
电邮地址：
信息：
发送消息
<?php
$name = strip_tags(htmlspecialchars($_POST['c_fName']));
$email_address = strip_tags(htmlspecialchars($_POST['c_email']));
$phone = strip_tags(htmlspecialchars($_POST['c_phone']));
$message = strip_tags(htmlspecialchars($_POST['c_message']));
// Create the email and send the message
$to = 'email@email.com';
$email_subject = "Website Contact Form: $name";
$email_body = "You have received a new message from your website contact form.\n\n"."Here are the details:\n\nName: $name\n\nEmail: $email_address\n\nPhone: $phone\n\nMessage:\n$message";
$headers = "From: email@email.com\n";
$headers .= "Reply-To: $email_address";
mail($to,$email_subject,$email_body,$headers);
return true;
?>
<script src="assets/vendor/jquery/jquery.min.js"></script>
<script src="assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="assets/js/main.js"></script>
<script src="js/jqBootstrapValidation.min.js" ></script><!--Used for other form-->
<script src="js/bookingForm.js"></script>
<script src="js/contactForm.js"></script>
特别感谢@Matt&@El_Vanja对此的帮助。我知道我自己发布答案是不对的。但我认为这将有助于任何未来遇到同样问题的开发人员 在@El_Vanja的建议之后 我在运行的每个函数中添加了
console.log控制台中获得$这是未定义的。在$上记录。ajax complete
函数。然后我按照@Matt的建议将$this
更改为$（this）
。更新代码后，其工作状态为：
控制台日志
更新的contactUsForm.js
$（函数（）{
$（“#联系人表单输入，#联系人表单文本区域”）.jqBootstrapValidation({
对,，
submitError：函数（$form、event、errors）{
//其他错误消息或事件
console.log（'第5-8行之间发生错误'）；
},
submitSuccess：函数（$form，event）{
log（'submitSuccess已启动'）；
event.preventDefault（）；//防止默认提交行为
//从表单中获取值
var c#u fName=$（“输入#c#u fName”）.val（）；
var c#u email=$（“输入c#u email”）.val（）；
var c#u phone=$（“输入c#u phone”）.val（）；
var c#u message=$（“textarea#c#u message”）.val（）；
var firstName=name；//对于成功/失败消息
//检查名称中是否有空格以显示成功/失败消息
submitSuccess has started contactUsForm.js:11:13
variables have been assigned contactUsForm.js:20:14
Variable assignment complete contactUsForm.js:24:14
AJAX Success is starting contactUsForm.js:36:14
$(function() {
$("#contactUsForm input,#contactUsForm textarea").jqBootstrapValidation({
preventSubmit: true,
submitError: function($form, event, errors) {
// additional error messages or events
console.log('Error occured between line 5 - 8');
},
submitSuccess: function($form, event) {
console.log('submitSuccess has started');
event.preventDefault(); // prevent default submit behaviour
// get values from FORM
var c_fName = $("input#c_fName").val();
var c_email = $("input#c_email").val();
var c_phone = $("input#c_phone").val();
var c_message = $("textarea#c_message").val();
var firstName = name; // For Success/Failure Message
// Check for white space in name for Success/Fail message
console.log('variables have been assigned');
if (firstName.indexOf(' ') >= 0) {
firstName = c_fName.split(' ').slice(0, -1).join(' ');
}
console.log('Variable assignment complete');
$.ajax({
url: "././forms/contactUsForm.php",
type: "POST",
data: {
c_fName: c_fName,
c_phone: c_phone,
c_email: c_email,
c_message: c_message
},
cache: false,
success: function() {
console.log('AJAX Success is starting');
// Success message
$('#c_success').html("<div class='alert alert-success'>");
$('#c_success > .alert-success').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>×")
.append("</button>");
$('#c_success > .alert-success')
.append("<strong>Your message has been sent. </strong>");
$('#c_success > .alert-success')
.append('</div>');
//clear all fields
$('#contactUsForm').trigger("reset");
},
error: function() {
// Fail message
console.log('AJAX error is occuring');
$('#c_success').html("<div class='alert alert-danger'>");
$('#c_success > .alert-danger').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>×")
.append("</button>");
$('#c_success > .alert-danger').append($("<strong>").text("Sorry " + firstName + ", it seems that my mail server is not responding. Please try again later!"));
$('#c_success > .alert-danger').append('</div>');
//clear all fields
$('#contactUsForm').trigger("reset");
},
complete: function() {
setTimeout(function() {
$(this).prop("disabled", false); // Re-enable submit button when AJAX call is complete
}, 1000);
}
});
},
filter: function() {
return $(this).is(":visible");
},
});
$("a[data-toggle=\"tab\"]").click(function(e) {
e.preventDefault();
$(this).tab("show");
});
});
/*When clicking on Full hide fail/success boxes */
$('#c_fName').focus(function() {
$('#c_success').html('');
});