又該我的PHP回報在這種情況下

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必須包含（或不包含）區分大小寫的子字符串「成功」，具體取決於操作如何結束（＃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

您可能要返回包含爲成功標誌的布爾以及用於在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'); 
    } 
}