Странное поведение цикла с JSON и AJAX - PullRequest
Новая
       3

Странное поведение цикла с JSON и AJAX

1 голос
/ 21 февраля 2011

У нас есть эти файлы: 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>
        </div>
    </body>
</html>

и наша главная.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");
        }
    });

});

По сути, я хотел бы вывести каждый элемент $array в отдельном <div class="response"></div>

И он, кажется, частично работает.Но вместо вывода: 

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

выводится 

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

Ответы [ 2 ]

2 голосов
/ 21 февраля 2011

Мне кажется, что когда вы делаете это: 

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

Вы клонируете все элементы <div> с классом "response".Может быть, вы должны дать первому отдельный класс (или значение «id»), чтобы вы могли целенаправленно указывать на него, и убедиться, что другие не имеют этого класса.Конечно, вы также можете просто удалить класс «response» из клонированных: 

    $('.response').clone().attr('id', value.id).removeClass('response').appendTo('#res-list');
0 голосов
/ 21 февраля 2011

Когда вы клонируете «Response», вы клонируете все, включая класс, поэтому селектор «.response» соответствует 2 элементам после первого добавления. Итак, во второй раз через массив вы добавляете 2 новых элемента, а в третий раз вы добавляете 4.

Чтобы исправить это, вызовите .removeClass ('response') для вашего клонированного элемента.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...