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');
    }
}
  • 結果は直接 DOM に渡されるため、HTML を返す必要があります (#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

成功フラグのブール値と HTML の文字列を含む JSON オブジェクトを返したい場合があります。

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 に答える