如何在ajax响应中显示jquery循环

时间:2016-04-01 11:59:32

标签: php jquery json ajax

我正在尝试显示ajax响应输出,这是一个数组,它在console.log中看起来很好,但是没有显示在resp div中。

这是jquery ajax代码

的index.php

$(document).ready(function(){
   $("#demo").click(function(){
        $.ajax({
            url:"response.php",
            type:"post",
            data:{ "a":"a"},
                success: function(obj){
                var json = $.parseJSON(obj);
                $.each(json,function(k,v){
                    $(".resp").html("<li>"+v+"</li>");
                    console.log("<li>"+v+"</li>");
                }); 
            },
            error: function(error){
                alert(error);
            }
        })
 });
});

这里是response.php

$a=array("1"=>"a","2"=>"b","3"=>"c","4"=>"d","5"=>"e","6"=>"f","7"=>"g","8"=>"h","9"=>"i","10"=>"j");
echo json_encode($a);

这里是html

<div><button id="demo">Click me</button></div>
<div class="resp"></div>

1 个答案:

答案 0 :(得分:1)

您需要.append()代替.html: -

$(".resp").append("<li>"+v+"</li>");

注意: - 当您使用.html()时,首先删除附加了相应元素的完整html,然后添加新元素。

虽然.append()不会删除任何内容,但它只是将新的附加到该元素的现有html。

当您要求将其附加到<ul></ul>内时,您可以通过两种方式执行此操作:

1。<div class="resp"><ul></ul></div>然后$(".resp ul").append("<li>"+v+"</li>");

2.直接使用此代码,无需进行其他更改: -

success: function(obj){ var json = $.parseJSON(obj); var data = '<ul>'; $.each(json,function(k,v){ data += "<li>"+v+"</li>"; }); data += '</ul>'; $(".resp ul").append(data); },