ajax表单提交多个值并获得响应

Question

我正在使用一个表单并提交一个表单，其中包括名字、姓氏、电子邮件、用户名等字段。当ajax返回时，它返回一个错误消息字符串。如何分离该错误消息？我正在使用这个代码

Answer 1

要将AJAX响应作为文本输出到网页上，首先在HTML中创建一个新的DIV

<div id="response"></div>

并使用以下脚本将Ajax文本响应写入DIV。您需要使用函数调用它。

var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("response").innerHTML=xmlhttp.responseText;
}

有关Ajax响应的更多信息http://www.w3schools.com/ajax/ajax_xmlhttprequest_response.asp

Answer 2

可以使用响应代码。代码应该代表实际的错误。

当ajax返回时，它返回一个错误消息字符串。如何分离该错误消息？

您可以将错误消息集合作为JSON字符串发送，并根据需要在错误处理函数中处理这些错误。

在出错的情况下：

<?php
http_response_code(400);
// maps a form field to an error message.
$a = array('username' => 'no username', 'email' => 'no email');
echo json_encode($a);

在正常情况下：

<?php
http_response_code(200);
echo "Success message";

当您可以为单个状态代码设置事件处理程序，甚至只为success和fail回调设置事件处理程序时，此方案可以与许多ajax库配合使用。

jQuery的一个示例：

$.ajax({
  statusCode: {
    400: function(jqXHR, textStatus, errorThrown) {
        var errors = JSON.parse(errorThrown);
        if (errors.username) {
            $('#username-error').text(errors.username);
        }
    },
    200: function(data) {
        // ...
    }
  }
});

香草JavaScript的一个示例：

var handlers = {
   400: function (responseText) {
       var errors = JSON.parse(responseText);
       if (errors.username) {
           var name_error = document.querySelector('#username-error');
           name_error.textContent = errors.username;
       }
   },
   200: function (responseText) { /* ... */ }
};

function ajaxCall(url, handlers) {
    var r = new XMLHttpRequest(); 
    r.open("POST", url, true);
    r.onreadystatechange = function () {
        if (r.readyState === 4 && typeof handers[r.status] === 'function') {
            handers[r.status](r.responseText);
        }
    };
    r.send(/* ... */);
}

ajaxCall('userform_validation.php', handlers);