0

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

2 回答 2

1

$.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);
            }
        });
    });
});
于 2012-05-03T07:36:51.253 回答
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);
              }
            });
        });
    });
于 2012-05-03T07:40:29.297 回答