Javascript 使用$.each循环创建多个div，不起作用

我有一个php页面设置，如下所示：

<?php
    if(isset($_POST['submit'])){
        // Validate results and if correct insert into the DB
        // Else add the respective errors
        $data[0]['error_1'] = 'Error_1_text';
        $data[0]['error_2'] = 'Error_2_text';
        /*
        .
        .
        .
        */
        $data[0]['error_n'] = 'Error_n_text';
        print_r(json_encode($data[0]));
    }
?>

AJAX请求成功时，

数据

为

JSON.parse（）

d，并且该结果被分配给变量

result

。然后，我们检查表单的后处理过程中是否存在任何错误。使用

if（result.hasOwnProperty（'0'））

，如果是这样，目的是显示

错误中的每个错误，其中包含一个动态id，其中包含一个动态id。
。

为此，我创建了一个
$.each（）
循环，并启动了一个变量
x=0
。现在，我们在
$的内容上循环。each（）
循环，在这里我们打算显示一个
，其中包含代码中显示的内容以及PHP从后端发送的
错误
文本，id是
dmessage\uucode>与当前值
x
连接在一起。完成后，我们将递增
x
，并再次循环以处理下一个错误

然而，不管PHP发送了多少错误，只会显示一个错误框。我通过在
if（）
语句中添加以下代码来确认：

let array = [];
$.each(result['0'], function(key, error) {
    // Display each error into a modal
});
array[x] = array.push(error);
console.log(array); // Displays all the errors correctly inside the console

另外值得注意的是，尽管只显示一个错误框，但每个错误都会被创建。我通过
console.log（）
ing
$（）.html（）
确认了这段代码，
但是开发人员工具中的元素选项卡以及浏览器显示窗口仅显示一个错误框。
这解决了我的问题：

<script>
    $.ajax({
        url: "http://localhost/path/to/above/file",
        method: "POST",
        data: {
            submit: 'yes',
            form_data_0: 'form_text',
            form_data_1: 'form_text',
            form_data_2: 'form_text'
        },
        success: function(data){
            // Code to check if errors were present
            result = JSON.parse(data);
            let x = 0;
            if (result.hasOwnProperty('0')) {
                $.each(result['0'], function(key, error) {
                    // Display each error into a modal
                    $("div#ssss").append('<div id="dmessage_' + x + '" class = "modal" style="display:block"><p id = "pmessage_' + x + '">' + error + '</p></div>');
                });
            }
        }
    });
</script>


$.ajax({
url:“http://localhost/path/to/above/file",
方法：“张贴”，
数据：{
提交：“是”，
form_data_0:“form_text”，
表格数据表格1:“表格文本”，
表格数据表格2:“表格文本”
},
成功：功能（数据）{
//用于检查是否存在错误的代码
result=JSON.parse（数据）；
设x=0；
if（result.hasOwnProperty（'0'））{
$.each（结果['0']，函数（键，错误）{
//将每个错误显示为一个模式
$（“div#sss”）.append（'
'+error+'
'）；
});
}
}
});
我知道你找到了解决方案，但我会发布我的答案

1st:
echo json\u encode

2nd:从PHP返回
$data[0]
。。这意味着数组看起来像

['error\u 1'=>'error\u 1\u text'，'error\u 2'=>'error\u 2\u text'，…]

3rd:在成功函数中，您将循环通过
结果[0]
，在本例中，=
'error\u 1'=>'error\u text'

4th:根本不需要使用
x
您可以直接使用
键

5th:您可以直接使用
dataType:'json'
而不是
json.parse（data）

6th:将
.html（
更改为
.append（

考虑以上所有因素，那么您的代码应该如下所示

php



JS


$.ajax({
url:“http://localhost/path/to/above/file",
方法：“张贴”，
数据类型：“json”，//不要
打印PHP响应，但
回送它。Javascript需要json。@Michael我试过了，但没有帮助。“没有帮助”以什么方式？您的
x
正在启动
0
。请使用
key
变量而不是
x
@RiteshKhandekar谢谢您，这确实解决了我的问题。
<script>
    $.ajax({
        url: "http://localhost/path/to/above/file",
        method: "POST",
        data: {
            submit: 'yes',
            form_data_0: 'form_text',
            form_data_1: 'form_text',
            form_data_2: 'form_text'
        },
        success: function(data){
            // Code to check if errors were present
            result = JSON.parse(data);
            let x = 0;
            if (result.hasOwnProperty('0')) {
                $.each(result['0'], function(key, error) {
                    // Display each error into a modal
                    $("div#ssss").append('<div id="dmessage_' + x + '" class = "modal" style="display:block"><p id = "pmessage_' + x + '">' + error + '</p></div>');
                });
            }
        }
    });
</script>

<?php
    if(isset($_POST['submit'])){
        // Validate results and if correct insert into the DB
        // Else add the respective errors
        $data['error']['error_1'] = 'Error_1_text'; // change all `$data[0]` to `$data['error']` it will be much easier 
        $data['error']['error_2'] = 'Error_2_text';
        /*
        .
        .
        .
        */
        $data['error']['error_n'] = 'Error_n_text';
        echo(json_encode($data));  // <<<< just $data here
    }
?>

<body>
    <div class="ssss"></div>
</body>
<script>
    $.ajax({
        url: "http://localhost/path/to/above/file",
        method: "POST",
        dataType : 'json',  //<<<<< here
        data: {
            submit: 'yes',
            form_data_0: 'form_text',
            form_data_1: 'form_text',
            form_data_2: 'form_text'
        },
        success: function(data){
            // Code to check if errors were present
            if (data.error) {   //<<<<< here
                $.each(data.error, function(key, error) {
                    // Display each error into a modal
                    $("div#ssss").append('<div id="dmessage_' + key + '" class = "modal" style="display:block"><p id = "pmessage_' + key + '">' + error + '</p></div>');
                });
            }else{
               $("div#ssss").html('');
            }
        }
    });
</script>