如何在DIV中显示JSON响应中的错误？

Question

我有一个AJAX表单来更改密码，我想在HTML DIV中显示所有验证错误。

以下是我的代码，提交表单工作正常，但我无法将错误传递给DIV，我不断获得：[object Object]。

var url = "/posts/editProfile"; // the script where you handle the form input.

$.ajax({
       type: "POST",
       url: url,
       data: $("#profileForm").serialize(), // serializes the form's elements.
       success: function(data)
       {

           alert(data); // show response from the php script.

       },

       error: function(data)
       {

        console.log(data);

        $("#response").text(data);

       }

     });

e.preventDefault(); 

});

<div id="response"> <!-- output here --> </div>

这是我在控制台中收到的回复的屏幕截图。

Answer 1

这是因为你试图通过简单地传递错误对象来设置div元素的内部文本，这就是你获得[object object]的原因我建议你在调试模式下检查错误对象，或者只是打印就像你实际做的那样，而不是做

$("#response").text(data);

做类似

的事情

$("#response").text(data.responseJSON.responseText);

但是这只会在DIV中转储一些错误文本，我想你想向用户展示一些有意义的验证，为了达到这个目的，只需使用你的错误对象以最适合你的方式显示正确的数据。

Answer 2

这个问题大约三年了，到目前为止，我没有找到答案，但是我敢肯定，您已经找到了解决该问题的方法。 这种简单的方法，我的解决方案是：

error: function(error)
{
    // this Error is an Object
    var errors = error.responseJSON.errors;
    // Loop this object and pring Key or value or both
    for (const [key, value] of Object.entries(errors)) {
         console.log(`${key}: ${value}`);
    }
 }