2011-02-26 55 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; 
    } 
    ?>