时间戳

首页 > 解决方案 > 使用 $.each 循环创建多个 div，不起作用

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 请求发送 POST 请求的地方。如果输入的表单有效，则将其插入 DB，否则，如果有任何错误，则所有错误都附加到数组 index $data[0]，最后数组是json_encoded，并且print_r()ed。

<body>
    <div class="ssss"></div>
</body>
<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);
            if (result.hasOwnProperty('0')) {
                $.each(result['0'], function(key, error) {
                    let x = 0;
                    // Display each error into a modal
                    $("div#ssss").html('<div id="dmessage_' + x + '" class = "modal" style="display:block"><p id = "pmessage_' + x + '">' + error + '</p></div>');
                    x++;
                });
            }
        }
    });
</script>

在 AJAX 请求成功时，data是JSON.parse()d 并且这个结果被分配给一个变量result。然后我们检查表单的后处理过程中是否有任何错误。使用if (result.hasOwnProperty('0'))，如果是这样，目的是显示 a 中的每个错误，<p>error</p>动态 id 包含在具有<div>动态 id 的 a 中。
为此，我创建了一个$.each()循环并启动了一个变量x = 0。现在我们循环遍历循环的内容$.each()，我们打算在其中显示 a ，其中<div></div>包含代码中显示的内容以及errorPHP 从后端发送的文本，并且 iddmessage_与 的当前值连接x。完成后，我们会递增x并再次循环以获取下一个错误。
然而，无论 PHP 发送了多少错误，只显示 1 个错误框。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()我通过编写$().html()这段代码确认了控制台显示正在创建的三个对象，
但是开发人员工具中的元素选项卡以及浏览器显示窗口仅显示一个错误框元素只显示一个。

标签： javascriptphphtmljquery

解决方案

我知道你有一个解决方案，但我会发布我的答案

第一个： echo json_encode

第二：你$data[0]从 PHP 中返回 .. 这意味着数组看起来像

['error_1' => 'Error_1_text' , 'error_2' => 'Error_2_text' , ......]

第三：在成功功能上，您将循环通过result[0]在这种情况下='error_1' => 'Error_1_text'

第四：完全不需要使用x，直接使用即可key

第五：可以直接用dataType: 'json'代替JSON.parse(data)

6.html(：改成.append(

考虑以上所有，那么您的代码应该看起来像

php

<?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
    }
?>

JS

<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>

推荐阅读