運行ajax提交方法的其他方法

Question

大家好，我正在使用下面的代碼在我的頁面上運行ajax提交，並且懷疑它是否是處理它的最有效的方式，因爲用於捕獲用戶數據的各種方法。

更好的方法需要什麼？

這是JavaScript代碼我目前使用：

$(document).ready(function() { 
    $("#submit").click(function() { 
     $("#form").hide(300); 
     $.post('run.php', $("#form").serialize(), 
     function(data) { 
      $("#result").html(data); 
     }); 
     return false; 
    }); 
}); 

這是我的形式：

<form id="booking"> 
      <table width="600" cellpadding="2px" cellspacing="2px" style="font-size: 20px;"> 
      <tr> 
       <th width="296" align="left">Date Of Wedding</th> 
       <td width="288"><input name='date' type='text' class='larger' id='date' value='' size='20'/></td> 
      </tr> 
      <tr> 
       <th align="left">Party Size</th> 
       <td><input name='partySize' type='text' class='larger' id='partySize' value='' size='20' /></td> 
      </tr> 
      <tr> 
       <th align="left">Catering Grade</th> 
       <td>1: 
       <input name='cateringGrade' type='radio' class='larger' value=1 size='12'/> 
       2: 
       <input name='cateringGrade' type='radio' class='larger' id='cateringGrade' value=2 size='12'/> 
       3: 
       <input name='cateringGrade' type='radio' class='larger' id='cateringGrade' value=3 size='12'/> 
       4: 
       <input name='cateringGrade' type='radio' class='larger' id='cateringGrade' value=4 size='12'/> 
       5: 
       <input name='cateringGrade' type='radio' class='larger' id='cateringGrade' value=5 size='12'/></td> 
      </tr> 
      <tr> 
       <th align="left">&nbsp;</th> 
       <td>&nbsp;</td> 
      </tr> 
      <tr> 
       <th align="left">&nbsp;</th> 
       <td><input name="submit" type="button" value="Submit" id="submit"/></td> 
      </tr> 
      </table> 
     </form> 

Answer 1

$(document).ready(function() { 
    $("#submit").click(function() { 
     var form = $("#form"); 
     form.hide(300); 
     $.ajax({ 
      url: 'run.php', 
      type: form.attr('method'), // POST or GET, 
      data: form.serialize(), 
      success: function(data) { 
      // handle with response 
      $("#result").html(data); 
      } 
     }); 
     return false; 
    }); 
}); 

但最好做到在提交表單功能類似以下內容：

$(document).ready(function() { 
     $('form').submit(function(e) { 
      e.preventDefault(); 
      var form = $(this); 
      form.hide(300); 
      $.ajax({ 
       url: 'run.php', // you can also use form.attr('action') if url is dynamic 
       type: form.attr('method'), // POST or GET, 
       data: form.serialize(), 
       success: function(data) { 
       // handle with response 
       $("#result").html(data); 
       } 
      }); 
     }); 
    }); 

Answer 2

$。員額（）使用$。阿賈克斯（）函數，這樣既很適合。

我更喜歡$ .ajax（），因爲我覺得它更合乎邏輯並且易於配置。

我想你的腳本改成這樣：

$(document).ready(function() { 
    $("#form").bind('submit', function(e) { 
     e.preventDefault(); 
     $(this).hide(300); 
     $.ajax({ 
      type: 'POST', 
      url: 'run.php', 
      data: $("#form").serialize(), 
      success: function(data) { 
       $("#result").html(data); 
      } 
     }); 
    }); 
});