2011-02-26 56 views
2

我已经成功地安装在这份基于jQuery的注册表格: http://net.tutsplus.com/tutorials/javascript-ajax/building-a-sleek-ajax-signup-form/AJAX电子邮件申请表单+的.htaccess清洁网址问题

但是,当我把它应用到我的主要布局,这是基于PHP的,并使用清洁网址,表单的工作时髦: 我提交一封电子邮件,它停留在“请稍候...”状态。 我猜测它停止运行$.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 
} 

我一直在试图解决此几个小时,仍然没有找到一个解决方案。

任何提示/有用的信息将是真棒。

/*编辑:包括萤火虫分析*/

感谢弥敦道!我想你的建议,并与下面的错误来到了,当我跑的测试(试图提交表单):

"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!"}" 

它基本上让我对整个页面的代码,所有的方式,直到成功消息。入口DOES成功出现在mysql中。
我认为这个问题真的是JSON被传递......我根本不太熟悉。它似乎打嗝htaccess /干净URL的发生。
我不知道该如何解决这个问题。你有什么建议吗?从这里

+0

在Firefox安装Firebug的,运行脚本见网络控制台发生了什么。 – 2011-02-26 02:15:23

+0

我如何在Firefox中运行脚本和调试?我以前从未使用过萤火虫...... – Jay 2011-02-26 11:27:31

+0

为了响应Firebug的建议,我在上面发布了一个修改。如果有人有任何想法,请告诉我。谢谢!! – Jay 2011-02-28 19:55:44

回答

0

问题似乎是你的回应包括来自页面的HTML,这是无效的JSON代码。请确保回复只包含以下内容:

{"status":"success","message":"You have been signed up!"} 

您的代码还包含HTML,如您在示例中发布的DOCTYPE标头。

没有看到响应页面上的代码,很难建议如何删除HTML。

希望这是有帮助的。

1

下载萤火:https://addons.mozilla.org/en-US/firefox/addon/firebug/

  • 安装
  • 打开Firefox并加载所需的网页,然后点击浏览器窗口的右下角的小火型甲虫

Firebug Icon

然后您需要选择控制台选项卡并刷新您的网站,以便con只需正确加载,您现在需要做的就是在您的应用程序请求您的ajax动作后观看控制台! Console Tab

你会看到一个加载条出现与GET或POST(取决于你用哪种形式的方法),这样就可以告诉你已经发送的是什么数据,并从PHP文件中的任何错误。

1

错误不在您的JavaScript中,这是因为您在窗体的action属性中具有的php页面。你已经打印了doc类型标签后的json。删除doctype标签并尝试。让我知道如果仍然有问题。

响应应该只包含像这样的json。

{"status":"success","message":"You have been signed up!"} 
1

将PHP代码从教程放在文档的最顶端。

确保此代码STARTS您的文档,jQuery的,HTML,CSS的任何后不来,等

<?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; 
    } 
    ?>