为啥我的 AJAX 方法将表单输入发送到 URL？
Posted
技术标签:
【中文标题】为啥我的 AJAX 方法将表单输入发送到 URL？【英文标题】：Why is my AJAX method sending form input to the URL?为什么我的 AJAX 方法将表单输入发送到 URL？ 【发布时间】：2021-07-11 07:35:18 【问题描述】：一旦用户提交表单，我想使用 JQuery/AJAX 来阻止页面重定向/重新加载。
但是发生了什么，用户数据被刷新并显示在 URL 中——即使我使用的是 POST 方法！
我的landing.html 页面上有 2 个表单，但我只给出其中 1 个的编码：
看来我的问题出在我的 contactForm.js 中：
$(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('');
);
landing.html：contactUsForm：
<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>
如果我不使用 AJAX，我的 contactUsForm.php 工作正常：
<?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;
?>
如果我不使用 AJAX 功能，则提交表单，发送电子邮件并重定向页面（我不想要）
我一遍又一遍地编写这些表格来尝试解决这个问题。我制作的所有其他表单都可以与 AJAX 完美搭配。这些文件位于文件末尾：
<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>
【问题讨论】：
你所描述的听起来很像常规的表单提交，而不是 AJAX 调用。如果这是真的，你能在开发者工具栏的网络标签中验证吗？ @El_Vanja 我刚刚看了看，这正是正在发生的事情。它根本不运行 AJAX 代码。我也尝试在按钮本身上将代码调用为onsubmit() 函数 - 但没有运气。
我从来没有用过jqBootstrapValidation，所以我不知道机制。您是否尝试过从其中记录某些内容以查看是否触发了任何处理程序（submitError 和 submitSuccess）？
在本地运行代码我在 $this is undefined 的 $.ajax complete 回调中收到错误。它适用于$(this)。您自己运行脚本时是否遇到任何其他控制台错误？
@Matt 你是明星！我的日志中也出现了这个错误，并应用了你的建议并且它工作得很好！！！我现在将发布我的日志和工作代码
【参考方案1】：
特别感谢@Matt 和@El_Vanja 提供帮助。我知道我自己发布答案是不正确的。但认为它会帮助任何未来遇到同样问题的开发人员。
根据@El_Vanja 的建议
我在每个运行的函数中添加了console.log 以查找问题。代码正在运行并且正在发送电子邮件，但表单数据未绑定到电子邮件。这是因为使用了不正确的变量名。
根据@Matt 的建议
代码正在运行，电子邮件与表单数据一起发送，但我仍然在 console.log 的 $.ajax complete 函数中收到 $this is undefined。然后我按照@Matt 的建议将$this 更改为$(this)。更新代码后，它的工作：
控制台日志
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
更新的contactUsForm.js
$(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('');
);
contactUsForm.php 文件无需更改
【讨论】：
以上是关于为啥我的 AJAX 方法将表单输入发送到 URL？的主要内容，如果未能解决你的问题，请参考以下文章
使用 post 方法提交表单后，表单数据附加到 php 中的 url 为啥？
为啥我的 php 没有将我的联系表单输入发送到我的电子邮件？
如何使用ajax将从jquery for循环创建的输入值发送到php [重复]