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

は、これが私のフォームです：.post

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