jQuery中的数组未按预期运作

Question

我正在使用PHP和jQuery Ajax，当jQuery传递一些$_POST数据到PHP后，PHP会验证这些数据，并将所有错误准备好一个数组，在完成所有验证后，找到错误的数量，如果大于0，则将数组编码为json并在屏幕上打印出来。然后，jQuery使用'success:'抓取这些数据，但它没有像预期的那样工作。

PHP文件验证：

<?php
$messages = array();

if(isset($_POST['name']) && isset($_POST['email']) && isset($_POST['subject']) && isset($_POST['message'])) {
    if(empty($_POST['name'])) {
        $messages[] = "Please fill in the Name field.";
    }
    if(empty($_POST['email'])) {
        $messages[] = "Please fill in the Email field.";
    }
    if(empty($_POST['subject'])) {
        $messages[] = "Please fill in the Subject field.";
    }
    if(empty($POST['message'])) {
        $messages[] = "Please write your message in the Message field!";
    }

    if(!filter_var($_POST['email'], FILTER_VALIDATE_EMAIL)) {
        $messages[] = "Invalid email entered!";
    }

    if(strlen($_POST['name']) > 30 || strlen($_POST['name']) < 3) {
        $messages[] = "Your name cannot be less than 3 characters or more than 30 characters.";
    }
    if(strlen($_POST['email']) > 30 || strlen($_POST['email']) < 3) {
        $messages[] = "Your email cannot be less than 3 characters or more than 30 characters.";
    }
    if(strlen($_POST['subject']) > 30 || strlen($_POST['subject']) < 3) {
        $messages[] = "The subject cannot be less than 3 characters or more than 30 characters.";
    }
    if(strlen($_POST['message']) > 2000 || strlen($_POST['message']) < 40) {
        $messages[] = "Your message cannot be less than 40 characters or more than 2000 characters.";
    }

    if(count($messages) > 0) {
        $messages['elements'] = count($messages);
        echo json_encode($messages);
    } else {

    }
}

jQuery代码：

$(document).ready( function() {
    $(document).on('click', '.contact_submit', function() {
        var name = $('input#name').val();
        var email = $('input#email').val();
        var subject = $('input#subject').val();
        var message = $('input#message').val();

        var Data = "name=" + name + "&email=" + email + "&subject=" + subject + "&message=" + message;

        $.ajax({
            type: "POST",
            url: "portal/_inc/frontend/form.php",
            data: Data,
            success: function(messages) {

                var Count = messages.length;
                $('.messages').empty();
                for(var i = 0; i < Count; i++) {
                    $('.messages').append('<li class"error">' + messages[i] + '</li>\n');
                }
            }
        });
        return false;
    });
});

所有功能都正常，但我的输出以“字符”格式显示，每次只显示一个字符。 点击此处查看屏幕截图。

- user3968841

---

你只需要翻译文本内容，不要对其进行解释。返回已翻译的文本：messages = $.parseJSON(messages); - bansi

@bansi 这样做会破坏我的点击事件...现在它什么也不做了... - user3968841

当我警告消息数组时，它会显示 [object Object]。 - user3968841

在解析 JSON 之前，消息警报是什么？ - bansi

这是解析之前的消息：http://prntscr.com/4fmcaz - user3968841

Answer 1

这是因为你的响应是一个字符串，而且你正在遍历一个字符串。

这段 PHP 代码：

echo json_encode($messages);

将对象/数组编码为JSON字符串。

以下是JS代码:

var Count = messages.length;

这将仅返回整个字符串的长度，而不是返回JSON中单个对象的数量。

---

修复它的最简单方法是在成功回调函数中解析JSON：

var messageObject = JSON.parse(messages);

现在变量messageObject将以您期望的格式包含数据。

- Shomz

---

错误，它仍然没有解决我的问题。 - user3968841

在解析消息数组后，当我使用alert函数时，它会显示[object Object]。 - user3968841

当您尝试警报对象时，这是正常的。由于JSON.parse返回一个对象，请尝试使用for(var i in messages)循环。请参见此处：http://jsfiddle.net/9hbqobvv/ - Shomz

Answer 2

在你的ajax请求中添加dataType:'JSON'：

 $.ajax({
        dataType:'JSON',
        type: "POST",
        url: "portal/_inc/frontend/form.php",
        data: Data,
        .....

并添加

 header('Content-type: application/json; charset=utf-8');

将代码添加到您的PHP中，以便JavaScript知道如何处理响应。 编辑 问题在于JSON响应是一个对象，而不是数组，因此没有.length属性。

最好像这样做：

success: function(messages) {
      $('.messages').empty();
      $.each(messages,function(){
           $('.messages').append('<li class"error">' + this + '</li>\n');
               });
        }

- andrew

---

仍然没有运气。它没有向我显示任何消息。 - user3968841

我收到的错误信息是：Uncaught TypeError: Cannot use 'in' operator to search for '528' in {"0":"请填写姓名栏。","1":"请填写电子邮件栏。","2":"请填写主题栏。","3":"请在消息栏中编写您的消息！","4":"无效...<省略>...9}。 - user3968841

它说错误在jQuery.js文件中（其中包含jQuery库）。 - user3968841

是的，好的，我现在找到了和你一样的错误，添加 dataType:'JSON'，就像我原来的帖子中所述，有人给了负面评价，但这可以解决你的问题。 - andrew