AJAX 电子邮件注册表单 + .htaccess 清除 URL 问题
Posted
技术标签:
【中文标题】AJAX 电子邮件注册表单 + .htaccess 清除 URL 问题【英文标题】：AJAX Email Signup Form + .htaccess Clean URLs problem 【发布时间】：2011-07-04 16:55:01 【问题描述】：我已经在这里成功安装了这个基于 jQuery 的注册表单： http://net.tutsplus.com/tutorials/javascript-ajax/building-a-sleek-ajax-signup-form/
但是当我将它应用到基于 php 并使用干净 URL 的主布局时，表单的工作方式很时髦：
我提交了一封电子邮件，它停留在“请稍候...”状态。
我猜它停止运行$.ajax( 行。
JS代码如下：
<script type="text/javascript">
// code using jQuery
$(document).ready(function()
$('#newsletter-signup').submit(function()
//check the form is not currently submitting
if($(this).data('formstatus') !== 'submitting')
//setup variables
var form = $(this),
formData = form.serialize(),
formUrl = form.attr('action'),
formMethod = form.attr('method'),
responseMsg = $('#signup-response');
//add status data to form
form.data('formstatus','submitting');
//show response message - waiting
responseMsg.hide()
.addClass('response-waiting')
.text('Please Wait...')
.fadeIn(200);
//send data to server for validation
$.ajax(
url: formUrl,
type: formMethod,
data: formData,
success:function(data)
//setup variables
var responseData = jQuery.parseJSON(data),
klass = '';
//response conditional
switch(responseData.status)
case 'error':
klass = 'response-error';
break;
case 'success':
klass = 'response-success';
break;
//show reponse message
responseMsg.fadeOut(200,function()
$(this).removeClass('response-waiting')
.addClass(klass)
.text(responseData.message)
.fadeIn(200,function()
//set timeout to hide response message
setTimeout(function()
responseMsg.fadeOut(200,function()
$(this).removeClass(klass);
form.data('formstatus','idle');
);
,3000)
);
);
);
//prevent form from submitting
return false;
);
);
// end noConflict wrap
</script>
HTACCESS 看起来像这样：
<IfModule mod_rewrite.c>
RewriteEngine On
# COMPANY NAVIGATION
#Sends URI to index.php for parsing
RewriteRule !\.(css|gif|jpg|png|ico|txt|xml|js|pdf|htm|zip)$ /path/to/main/folder/index.php [NC]
</IfModule>
将变量传递给 index.php。在 index.php 中，我将所有内容拆分为一个数组，并以这种方式解析 URL：
function create_url_array($url)
strip_tags($url);
$url_array = explode("/", $url);
array_shift($url_array); // First one is empty
return $url_array;
$url = $_SERVER['REQUEST_URI'];
$url_array = create_url_array($url);
if($url_array[1] == "folder")
// include relevant page/s etc
我已经尝试解决这个问题几个小时，但仍然没有找到解决方案。
任何提示/有用的信息都会很棒。
/* 编辑：包含 Firebug 分析 */
感谢内森！我尝试了您的建议，并在运行测试（尝试提交表单）时出现以下错误：
"uncaught exception: Invalid JSON:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
...
"status":"success","message":"You have been signed up!""
它基本上给了我整个页面的代码，一直到成功消息。该条目确实出现在 mysql 中。 我认为问题实际上是传递的 JSON ......我一点也不熟悉。它似乎在 htaccess/clean URL 出现的地方打嗝。 我不知道去哪里解决这个问题。你有什么建议吗？
【问题讨论】：
在firefox中安装firebug，运行你的脚本看看net控制台会发生什么。 如何在 firefox 中运行脚本和调试？我以前从未使用过萤火虫... 我在上面发布了一个编辑，以响应 Firebug 的建议。如果有人有任何想法，请告诉我。谢谢！！ 实际上，有没有办法做到这一点，而无需在表单的“action=''”属性中添加任何内容？相反，让 jQuery 处理所有事情？ 【参考方案1】：从这里下载 Firebug：https://addons.mozilla.org/en-US/firefox/addon/firebug/
安装 打开 Firefox 并加载您想要的网页，然后点击浏览器窗口右下角的小火甲虫然后，您需要选择控制台选项卡并刷新您的网站，以便控制台正确加载，您现在需要做的就是在您从应用程序请求 ajax 操作后观看控制台！
您将看到一个带有 GET 或 POST 的加载栏（取决于您使用的表单方法），这将能够告诉您已发送哪些数据以及 php 文件中的任何错误。
【讨论】：
【参考方案2】：错误不在您的 javascript 中，这是因为您在表单的 action 属性中拥有的 php 页面。您已在 doc 类型标签之后打印了 json。删除 doctype 标签并尝试。如果还有问题，请告诉我。 响应应该只包含这样的 json。
"status":"success","message":"You have been signed up!"
【讨论】：
【参考方案3】：问题似乎是您的响应包含来自页面的 HTML，这是无效的 JSON 代码。确保响应仅包含以下内容：
"status":"success","message":"You have been signed up!"
您的代码还包括 HTML，例如您在示例中发布的 DOCTYPE 标头。
没有看到响应页面上的代码，很难建议如何删除 HTML。
希望这有帮助。
【讨论】：
【参考方案4】：将教程中的 PHP 代码放在文档的最顶部。
确保此代码STARTS您的文档，并且不会出现在 任何 jQuery、HTML、CSS 等之后。 p>
<?php
//email signup ajax call
if($_GET['action'] == 'signup')
mysql_connect('localhost','YOUR DB USERNAME','YOUR DB PASSWORD');
mysql_select_db('YOUR DATABASE THAT CONTAINS THE SIGNUPS TABLE');
//sanitize data
$email = mysql_real_escape_string($_POST['signup-email']);
//validate email address - check if input was empty
if(empty($email))
$status = "error";
$message = "You did not enter an email address!";
else if(!preg_match('/^[^\W][a-zA-Z0-9_]+(\.[a-zA-Z0-9_]+)*\@[a-zA-Z0-9_]+(\.[a-zA-Z0-9_]+)*\.[a-zA-Z]2,4$/', $email)) //validate email address - check if is a valid email address
$status = "error";
$message = "You have entered an invalid email address!";
else
$existingSignup = mysql_query("SELECT * FROM signups WHERE signup_email_address='$email'");
if(mysql_num_rows($existingSignup) < 1)
$date = date('Y-m-d');
$time = date('H:i:s');
$insertSignup = mysql_query("INSERT INTO signups (signup_email_address, signup_date, signup_time) VALUES ('$email','$date','$time')");
if($insertSignup) //if insert is successful
$status = "success";
$message = "You have been signed up!";
else //if insert fails
$status = "error";
$message = "Ooops, Theres been a technical error!";
else //if already signed up
$status = "error";
$message = "This email address has already been registered!";
//return json response
$data = array(
'status' => $status,
'message' => $message
);
echo json_encode($data);
exit;
?>
【讨论】：
以上是关于AJAX 电子邮件注册表单 + .htaccess 清除 URL 问题的主要内容，如果未能解决你的问题，请参考以下文章
登录表单电子邮件 ID 将使用 ajax 成功功能以密码重置表单显示，无需刷新页面