ajax與HTML表格調用將無法正常工作

Question

我卡住了。

這就像腳本根本沒有任何功能。

 <script> 
      $("#continue").click(function() { 
     $.ajax({ 
      type: "POST", 
      url: "dbc.php?check=First", 
      data: {full_name : $('#full_name').val() 
       usr_email : $('#usr_email').val()}, 
      success: function(msg){ 
       if(msg==1){ 
        $("#First_1").hide(); 
        $("#Next_2").toggle(); 
       }else{ 
        alert(msg) 
       }    
      } 
     }); 
     return false; 
    }); 
     </script> 

     <form action="index.php?page=checkin" method="post" name="regForm"> 
    <div id="First_1"> 
    <table width="100%" cellpadding="0" cellspacing="0"> 
         <tr> 
          <td> 
           <table cellpadding="0" cellspacing="5"> 
            <tr> 
         <td style="padding: 5px;"> 
         Fullständiga namn: 
         </td> 
         <td> 
         <input name="full_name" type="text" id="full_name" class="required"> 
         </td> 
            </tr> 
            <tr> 
         <td style="padding: 5px;"> 
         Email: 
         </td> 
         <td> 
         <input name="usr_email" type="text" id="usr_email" class="required email"> 
         </td> 
            </tr> 
            <tr> 
         <td style="padding: 5px;"> 
         Sex: 
         </td> 
         <td> 
         <select name="sex"> 
         <option value="male">Kille</option> 
         <option value="female">Tjej</option> 
         </select> 
         </td> 
            </tr> 
         <td> 
         <input type="submit" id="continue" value="Continue"> 
         </td> 
       </table> 
     </td> 
      </tr> 
    </table> 
</div> 

有了這個，當我按下繼續它應該發送ajax調用，但它沒有。當我按下繼續時，它只是把我的形式的行動=「index.php？page = checkin」，即使他們返回false;點擊（在腳本中）？我甚至試圖改變表單行並插入onsubmit =「return false;」但是當我點擊按鈕時什麼也沒有發生。

Answer 1

對我來說聽起來像是一個錯字，它看起來像在你的數據字段中。

我建議做

data: "value1="+$("#val1").val()+"&value2="+$("#val2").val() 

而且調試JavaScript是打開Chrome瀏覽器的控制檯或在Firefox中使用firebugs控制檯，當您執行操作它通常會通知您的問題或缺少的好辦法它們。

最後一個注意事項：我建議在從php返回時使用json，這樣可以爲用戶提供更多的照顧消息。例如，假設您的表單不驗證服務器端（您正在驗證服務器端是否正確？），您可以返回給客戶端一個不錯的消息，向他們解釋它沒有驗證。這個怎麼做？

$.ajax({ 
      type: "POST", 
      url: "dbc.php", 
      data: "val1="+$(#val1).val()+"&val2="+$(#val2).val(), 
      success: function(json){ 
       if(json.error){ 
        //notify user of error message 
        $(#statusDiv).(json.message); 
       }else{ 
        //perform success 

       }    
      } 
     }); 

而在服務器端使用的東西，如

echo json_encode(array("error"=>1, "message"=>"<insert validation problems here>")); 

成功函數這將通過json.error，或json.message訪問。

Answer 2

的問題是它做的默認操作，因爲沒有你的jQuery代碼運行:)當你的代碼運行時，id="continue"元素現在還沒有，所以$("#continue")未發現任何一個click處理程序綁定到。這是一個簡單的辦法，換你的代碼中調用document.ready，像這樣：

$(function() { 
    $("#continue").click(function() { 
    $.ajax({ 
     type: "POST", 
     url: "dbc.php?check=First", 
     data: {full_name : $('#full_name').val() 
      usr_email : $('#usr_email').val()}, 
     success: function(msg){ 
      if(msg==1){ 
       $("#First_1").hide(); 
       $("#Next_2").toggle(); 
      }else{ 
       alert(msg) 
      }    
     } 
    }); 
    return false; 
    }); 
}); 

通過這樣做，它會等到DOM是準備好了，你的元素那裏找到/結合。此外，而不是連接到#continue按鈕的click事件，它通常是更好地附着在窗體的submit處理程序，所以它抓住了那裏，所以不是這樣的：

$("#continue").click(function() { 

你可以這樣做：

$("form[name='regForm']").submit(function() { 

一切都保持不變。

Answer 3

在新的代碼上phpbin您需要的行後一個逗號：

data: "full_name="+$("#full_name").val()+"&usr_email="+$("#usr_email").val(), // <-- COMMA HERE 

或者，在你的舊代碼（這是更好，因爲你不必處理串聯數據URL自己）你失蹤逗號也，兩線之間：

data: {full_name : $('#full_name').val(), // <-- COMMA HERE 
     usr_email : $('#usr_email').val()}, 

另外，你需要一個分號此行之後：

alert(msg); // <-- SEMICOLON HERE 

;）