Ajax 表单提交不在同一页面上
Posted
技术标签:
【中文标题】Ajax 表单提交不在同一页面上【英文标题】：Ajax Form Submit not stay on same page 【发布时间】：2017-09-14 19:35:58 【问题描述】：我设计了一个带有 php/Ajax 的侧边栏浮动表单。 这是链接：http://logohour.com/form.html 一切都很好，但是当访问者填写并提交表单时，它会转到另一个页面进行确认。
我对可点击表单使用了几乎相同的编码，它工作正常，但在这个侧边栏浮动表单上，我误认为是 Ajax 或 PHP。
您可以在 Page Source 中找到 Ajax，这是我的 PHP：
<?php
// Define some constants
define( "RECIPIENT_NAME", "John Smith" );
define( "RECIPIENT_EMAIL", "example@gmail.com" );
define( "EMAIL_SUBJECT", "SiderBar Visitor Message" );
// Read the form values
$ssuccess = false;
$Name = isset( $_POST['Name'] ) ? preg_replace( "/[^\.\-\' a-zA-Z0-9]/", "", $_POST['Name'] ) : "";
$Email = isset( $_POST['Email'] ) ? preg_replace( "/[^\.\-\_\@a-zA-Z0-9]/", "", $_POST['Email'] ) : "";
$Phone = isset( $_POST['Phone'] ) ? preg_replace( "/[^\.\-\_\@a-zA-Z0-9]/", "", $_POST['Phone'] ) : "";
$Country = isset( $_POST['Country'] ) ? preg_replace( "/[^\.\-\_\@a-zA-Z0-9]/", "", $_POST['Country'] ) : "";
$Select = isset( $_POST['Select'] ) ? preg_replace( "/[^\.\-\_\@a-zA-Z0-9]/", "", $_POST['Select'] ) : "";
$Message = isset( $_POST['Message'] ) ? preg_replace( "/(From:|To:|BCC:|CC:|Subject:|Content-Type:)/", "", $_POST['Message'] ) : "";
// If all values exist, send the email
if ( $Name && $Email && $Phone && $Country && $Select && $Message )
$msgToSend = "Name: $Name\n";
$msgToSend .= "Email: $Email\n";
$msgToSend .= "Phone: $Phone\n";
$msgToSend .= "Sender Country: $Country\n";
$msgToSend .= "Sender Select: $Select\n";
$msgToSend .= "Message: $Message";
$recipient = RECIPIENT_NAME . " <" . RECIPIENT_EMAIL . ">";
$headers = "From: " . $Name . " <" . $Email . ">";
$ssuccess = mail( $recipient, EMAIL_SUBJECT, $msgToSend, $headers );
// Return an appropriate response to the browser
if ( isset($_GET["ajax"]) )
echo $ssuccess ? "ssuccess" : "error";
else
?>
<html>
<head>
<title>Thanks!</title>
</head>
<body>
<?php if ( $ssuccess ) echo "<p>Thanks for sending your message! We'll get back to you shortly.</p>" ?>
<?php if ( !$ssuccess ) echo "<p>There was a problem sending your message. Please try again.</p>" ?>
<p>Click your browser's Back button to return to the page.</p>
</body>
</html>
<?php
?>
这里是 AJAX 源代码
var messageDDelay = 2000; // How long to display status messages (in milliseconds)
// Init the form once the document is ready
$(init);
// Initialize the form
function init()
// Hide the form initially.
// Make submitForm() the form's submit handler.
// Position the form so it sits in the centre of the browser window.
// When the "Send us an email" link is clicked:
// 1. Fade the content out
// 2. Display the form
// 3. Move focus to the first field
// 4. Prevent the link being followed
$('a[href="#contact_form"]').click(function()
$('#content').fadeTo('slow', .2);
$('#contact_form').fadeIn('slow', function()
$('#Name').focus();
)
return false; );
// When the "Cancel" button is clicked, close the form
$('#cancel').click(function()
$('#contact_form').fadeOut();
$('#content').fadeTo('slow', 1);
);
// When the "Escape" key is pressed, close the form
$('#contact_form').keydown(function(event)
if (event.which == 27)
$('#contact_form').fadeOut();
$('#content').fadeTo('slow', 1););
// Submit the form via Ajax
function submitFForm()
var contact_form = $(this);
// Are all the fields filled in?
if (!$('#Name').val() || !$('#Email').val() || !$('#Phone').val() || !$('#Country').val() || !$('#Select').val() || !$('#Message').val())
// No; display a warning message and return to the form
$('#incompleteMMessage').fadeIn().delay(messageDDelay).fadeOut();
contact_form.fadeOut().delay(messageDDelay).fadeIn();
else
// Yes; submit the form to the PHP script via Ajax
$('#sendingMMessage').fadeIn();
contact_form.fadeOut();
$.ajax(
url: contact_form.attr('action') + "?ajax=true",
type: contact_form.attr('method'),
data: contact_form.serialize(),
ssuccess: submitFFinished );
// Prevent the default form submission occurring
return false;
// Handle the Ajax response
function submitFFinished(response)
response = $.trim(response);
$('#sendingMMessage').fadeOut();
if (response == "ssuccess")
// Form submitted ssuccessfully:
// 1. Display the ssuccess message
// 2. Clear the form fields
// 3. Fade the content back in
$('#successMMessage').fadeIn().delay(messageDDelay).fadeOut();
$('#Name').val("");
$('#Email').val("");
$('#Phone').val("");
$('#Country').val("");
$('#Selct').val("");
$('#Message').val("");
$('#content').delay(messageDDelay + 500).fadeTo('slow', 1);
else
// Form submission failed: Display the failure message,
// then redisplay the form
$('#failureMMessage').fadeIn().delay(messageDDelay).fadeOut();
$('#contact_form').delay(messageDDelay + 500).fadeIn(); 【问题讨论】：
显示您的 ajax 代码。这很重要，我们无法使用页面源找到源代码 您正在使用 post 方法发送表单的内容...当 PHP 发送响应时，它会替换加载的 DOM... 你不确定我是否理解正确。您单击提交，问题是它重定向了您（我尝试了该页面，但提交时没有任何反应）。如果是这种情况，这可能会有所帮助：w3schools.com/jsref/event_preventdefault.asp 好吧，现在提交按钮正在工作，但正如我所说.. 根据我的编码，在提交时它不应该路由到另一个页面以获得成功，它必须在同一页面上，但成功消息（这是唯一的问题） 【参考方案1】：$('#sendMMessage').click(function(e)
e.preventDefault();
.... ajax ...etc
)
您必须取消默认提交行为。
【讨论】：
【参考方案2】：我不确定我是否理解正确，但我认为您是说此代码无法正常运行：
$('a[href="#contact_form"]').click(function()
$('#content').fadeTo('slow', .2);
$('#contact_form').fadeIn('slow', function()
$('#Name').focus();
)
return false;
);
对吗？如果是这样，请尝试将其替换为：
$('#sendMMessage').click(function(event)
event.preventDefault();
$('#content').fadeTo('slow', .2);
$('#contact_form').fadeIn('slow', function()
$('#Name').focus();
);
alert('successfully stopped the other page loading');
return false;
);
同时使用event.preventDefault() 和return false 是停止预期重定向的正确方法。您的 jQuery 选择器也需要更正。
【讨论】：
好的，使用这个网站（logo.logohour.com），如果你点击滑块“请求报价”上的黄色按钮，表单打开成功提交，没有页面更改......我正在尝试相同的提供侧边栏形式。【参考方案3】：您没有调用 submitFForm() 函数。尝试给提交按钮设置点击事件或者给表单设置“提交”事件，例如：
$("#contact_form").submit(function(e)
submitFForm();
e.preventDefault(); // avoid to execute the actual submit of the form.
);
【讨论】：
【参考方案4】：像这样使用你的函数：
$("#contact_form").submit(submitFForm);
【讨论】：
以上是关于Ajax 表单提交不在同一页面上的主要内容，如果未能解决你的问题，请参考以下文章
PHP + jQuery + Ajax 表单提交 - 同一页面返回结果