Jquery 运行ajax提交方法的替代方法

大家好，我目前正在使用下面的代码在我的页面上运行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>

结婚日期
聚会规模
餐饮级
1:
2:
三：
4:
5:

$.post（）使用$.ajax（）函数，因此两者都很好使用

我更喜欢$.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);
            }
        });
    });
});

但最好在表单提交功能中执行此操作，如下所示：

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

---

如何使用上面的表单设置

$.ajax（）

？你有样品吗？举个例子。我还更改了事件，因为我发现捕获表单的提交比单击按钮更符合逻辑。可能有人试图通过在输入字段中按Enter键来提交？删除或注释掉dateType json。他显然是在使用返回的数据作为html，而不是对象值。我找不到解析ajax（）所需数据的位置。@methusaleh。您已经得到了一些很好的建议，但我也会使用

$.ajax.beforeSend（）

&

$.ajax.error（）

方法。如果是

$（'#form'）。在（'submit'，function（）{…}）

上，可以隐藏表单“beforeSend”-调用ajax，如果出现错误，可以将表单显示回来

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