Strange loop behavior with JSON and AJAX_问答_开发者

Strange loop behavior with JSON and AJAX

开发者 https://www.devze.com 2023-02-12 23:53 出处：网络

We have these files: Action.php <?php $array = array( 0 => array( \'id\' => \"2\", \'name\' => \"Start\",

We have these files: Action.php

<?php

$array = array(
    0 => array(
        'id' => "2",
        'name' => "Start",
        'password' => "start"
    ),
    1 => array(
        'id' => "3",
        'name' => "Med",
        'password' => 'med'
    ),
    2 => array(
        'id' => "4",
        'name' => "Last",
        'password' => 'last'
    )
);

echo json_encode($array);

?>

Index.php

<html>
    <head>
        <title>Test</title>
        <script type="text/javascript" src="js/jquery.js"></script>
        <script type="text/javascript" src="js/main.js"></script>
    </head>
    <body>
        <div id="res-list">
            <div class="response" id="1">
                Name: <span class="name">Sample</span><br>
                Password: <span class="password">Test</span><br>
            </div>
    开发者_StackOverflow    </div>
    </body>
</html>

and our main.js

$(document).ready(function(){

    $.ajax({
        type: "POST",
        url: 'action.php',
        dataType: 'json',
        success: function(msg){
            $.each(msg, function(index, value){
                $('.response').clone().attr('id', value.id).appendTo('#res-list');
                $('#'+ value.id +' .name').html(value.name);
                $('#'+ value.id +' .password').html(value.password); 
            });
        },

        error: function(){
            $('.response').html("An error occurred");
        }
    });

});

Basically i'd like to output every element of $array in a different <div class="response"></div>

And it seems to be partially working. But instead of outputting:

Name: Sample
Password: Test
Name: Start
Password: start
Name: Med
Password: med
Name: Last
Password: last

it outputs

Name: Sample
Password: Test
Name: Start
Password: start
Name: Med
Password: med
Name: Start
Password: start
Name: Last
Password: last
Name: Start
Password: start
Name: Med
Password: med
Name: Start
Password: start

Seems to me that when you do this:

    $('.response').clone().attr('id', value.id).appendTo('#res-list');

You clone all the <div> elements with class "response". Maybe you should give the first one a separate class (or an "id" value) so that you can target it specifically, and make sure that the other ones don't have the class. You could of course just remove the class "response" from the cloned ones too:

    $('.response').clone().attr('id', value.id).removeClass('response').appendTo('#res-list');

When you clone "Response", you're cloning everything including the class, so the selector '.response' matches 2 elements after you append the first time. So the 2nd time through the array, you're appending 2 new items, and on the 3rd time, you're appending 4.

To correct this, call .removeClass('response') on your cloned element.