1

我想在不刷新页面的情况下提交表单，我有这个表单：

<form method="post" action="user-add.php" id="user-add-form">
<input type="text" id="username" name="username" maxlength="15">
<button type="submit" name="add_user" class="btn btn-primary" id="user-add-submit">Add user</button>
</form>

和这个 jquery 函数（使用 jquery 验证插件）：

submitHandler: function() {

    $('#user-add-submit').button('loading');

    var post = $('#user-add-form').serialize();
    var action = $('#user-add-form').attr('action');

    $("#message").slideUp(350, function () {

        $('#message').hide();

        $.post(action, post, function (data) {

            $('#message').html(data);
            $('#message').slideDown('slow');

            if (data.match('success') !== null) {
                $('#user-add-form input').val('');
                $('#user-add-submit').button('reset');
            } else {
                $('#user-add-submit').button('reset');
            }
        });
    });
}

但我的问题是 user-add.php 应该是什么样的脚本才能工作？

4

2 回答 2

5

你的回调函数本身回答了这个问题：

function (data) {
    $('#message').html(data);  // #1
    $('#message').slideDown('slow');

    if (data.match('success') !== null) {  // #2
        $('#user-add-form input').val('');
        $('#user-add-submit').button('reset');
    } else {
        $('#user-add-submit').button('reset');
    }
}
  • 它必须返回 HTML，因为结果直接进入 DOM (#1)
  • HTML 必须包含（或不包含）区分大小写的子字符串“success”，具体取决于操作的结束方式（#2）

如果我们假设函数不会被修改，上述情况成立。但是修改函数以使其对计算机更友好是一个好主意。您可以改为返回一些如下所示的 JSON：

{
    html: "the HTML for your page goes here",
    successful: true
}

这html是您要显示successful的内容，供内部使用。这样，您不必将字符串"success"与确定操作是否确实成功结合起来。使用此方案，您的回调将如下所示：

function (json) {
    $('#message').html(json.html);  // #1
    $('#message').slideDown('slow');

    if (json.successful) {
        $('#user-add-form input').val('');
        $('#user-add-submit').button('reset');
    } else {
        $('#user-add-submit').button('reset');
    }
}
于 2012-09-29T17:21:08.493 回答
3

您可能希望返回一个 JSON 对象，其中包含一个用于成功标志的布尔值和一个用于 HTML 的字符串：

echo json_encode(array('success' => $success, 'html' => $html));

然后你可以像这样改变你的成功回调 - 摆脱纯字符串比较以确定操作是否成功是一件好事，甚至可能很重要，具体取决于 HTML 包含的内容（如果“成功”出现在其他地方怎么办？ ):

function(data) {
    $('#message').html(data.html);
    $('#message').slideDown('slow');

    if(data.success) {
        $('#user-add-form input').val('');
        $('#user-add-submit').button('reset');
    }
    else {
        $('#user-add-submit').button('reset');
    }
}
于 2012-09-29T17:21:44.170 回答