Question

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

<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应该是什么样子才能让脚本工作？

Answer 1

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

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

Answer 2

您可能希望返回一个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');
    }
}

在这种情况下我的php应该返回什么

2 个答案: