使用JSON和AJAX奇怪的循环行为奇怪、行为、JSON、AJAX

2023-09-11 01:35:07 作者:ミ卌除囘憶

我们有以下文件: action.php的

 < PHP

$阵列=阵列(
    0 =>阵列(
        'ID'=> 2,
        '名'=> 开始,
        '密码'=> 开始
    ),
    1 =>阵列(
        'ID'=> 3,
        '名'=> 地中海,
        '密码'=> 配有
    ),
    2 =>阵列(
        'ID'=> 4,
        '名'=> 持续,
        '密码'=> '持续'
    )
);

回声json_en code($阵列);

?>
 

的index.php

 < HTML>
    < HEAD>
        <冠军>测试< /标题>
        <脚本类型=文/ JavaScript的SRC =JS / jquery.js和>< / SCRIPT>
        <脚本类型=文/ JavaScript的SRC =JS / main.js>< / SCRIPT>
    < /头>
    <身体GT;
        < D​​IV ID =资源列表>
            < D​​IV CLASS =回应ID =1>
                名称:<跨度类=名与GT;采样< / SPAN>< BR>
                密码:<跨度类=密码>测试< / SPAN>< BR>
            < / DIV>
        < / DIV>
    < /身体GT;
< / HTML>
 
AJAX JSON操作

和我们的 main.js

  $(文件)。就绪(函数(){

    $阿贾克斯({
        键入:POST,
        网址:'action.php的,
        数据类型:JSON,
        成功:函数(MSG){
            $每个(味精,函数(指数值){
                $('回应')的clone()ATTR('身份证',value.id).appendTo('#资源列表)。
                $('#'+ value.id +'.NAME')HTML(value.name);
                $('#'+ value.id +'。密码)HTML(value.password)。
            });
        },

        错误:函数(){
            $('回应')HTML(出现错误)。
        }
    });

});
 

基本上我想输出 $阵列每个元素在不同的< D​​IV CLASS =响应>< / DIV>

和它似乎是部分地工作。而不是输出,但:

 名称:样品
密码:测试
名称:启动
密码:启动
名称:地中海
密码:医学版
产品名称:尾
密码:去年
 

它输出

 名称:样品
密码:测试
名称:启动
密码:启动
名称:地中海
密码:医学版
名称:启动
密码:启动
产品名称:尾
密码:去年
名称:启动
密码:启动
名称:地中海
密码:医学版
名称:启动
密码:启动
 

解决方案

在我看来,当你做到这一点:

  $('回应。)的clone()ATTR('身份证',value.id).appendTo('#资源列表)。
 

您克隆所有的< D​​IV> 与类回应的元素。也许你应该给第一个独立的类(或一个id值),这样就可以针对它专门,并确保其他的人不具备的类。当然,你可以只取出从克隆的那些类回应太:

  $('回应')。克隆()。ATTR('身份证',value.id).removeClass(回应)。appendTo('#资源列表 );
 

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>
        </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');