使用JSON和AJAX奇怪的循环行为 [英] Strange loop behavior with JSON and AJAX
问题描述
我们有以下文件： action.php的
＆LT; PHP
$阵列=阵列（
0 =＆GT;阵列（
'ID'=＆GT; 2，
'名'=＆GT; 开始，
'密码'=＆GT; 开始
），
1 =＆GT;阵列（
'ID'=＆GT; 3，
'名'=＆GT; 地中海，
'密码'=＆GT; 配有
），
2 =＆GT;阵列（
'ID'=＆GT; 4，
'名'=＆GT; 持续，
'密码'=＆GT; '持续'
）
）;
回声json_en code（$阵列）;
？＆GT;
的index.php
＆LT; HTML＆GT;
＆LT; HEAD＆GT;
＆LT;冠军＆GT;测试＆LT; /标题＆GT;
＆LT;脚本类型=文/ JavaScript的SRC =JS / jquery.js和＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本类型=文/ JavaScript的SRC =JS / main.js＆GT;＆LT; / SCRIPT＆GT;
＆LT; /头＆GT;
＆LT;身体GT;
＆LT; DIV ID =资源列表＆GT;
＆LT; DIV CLASS =回应ID =1＆GT;
名称：＆LT;跨度类=名与GT;采样＆LT; / SPAN＆GT;＆LT; BR＆GT;
密码：＆LT;跨度类=密码＆GT;测试＆LT; / SPAN＆GT;＆LT; BR＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; /身体GT;
＆LT; / HTML＆GT;
和我们的 main.js
$（文件）。就绪（函数（）{
$阿贾克斯（{
键入：POST，
网址：'action.php的，
数据类型：JSON，
成功：函数（MSG）{
$每个（味精，函数（指数值）{
$（'回应'）的clone（）ATTR（'身份证'，value.id）.appendTo（'＃资源列表）。
$（'＃'+ value.id +'.NAME'）HTML（value.name）;
$（'＃'+ value.id +'。密码）HTML（value.password）。
}）;
}，
错误：函数（）{
$（'回应'）HTML（出现错误）。
}
}）;
}）;
基本上我想输出 $阵列每个元素在不同的＆LT; DIV CLASS =响应＆GT;＆LT; / DIV＆GT;
和它似乎是部分地工作。而不是输出，但：
名称：样品
密码：测试
名称：启动
密码：启动
名称：地中海
密码：医学版
产品名称：尾
密码：去年
它输出
名称：样品
密码：测试
名称：启动
密码：启动
名称：地中海
密码：医学版
名称：启动
密码：启动
产品名称：尾
密码：去年
名称：启动
密码：启动
名称：地中海
密码：医学版
名称：启动
密码：启动
在我看来，当你做到这一点：
$（'回应。）的clone（）ATTR（'身份证'，value.id）.appendTo（'＃资源列表）。
您克隆所有的＆LT; DIV＆GT; 与类回应的元素。也许你应该给第一个独立的类（或一个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');
这篇关于使用JSON和AJAX奇怪的循环行为的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
