Question

<已解决] [已解决]
如何在Jquery代码中显示html标签中的数据？

我遍历来自服务器的json响应，需要将这些元素写入html中的某个标记。

我有什么：我收到服务器的回复。通过它也可以。
问题：实际上附加了元素，我可以看到，因为在完成我的Jquery函数后页面大小会大大增加。如果页面大小增加，但我看不到任何文字。我想这是因为默认情况下我附加的标签的父元素是（display：none）。但我实际上是通过 $（“＃allowed”）。show（）; 来启动它。它仍然没有用。

我非常感谢任何帮助。提前致谢！

我的html摘录：

   <section id="allowed" style="display:none;">
        <div id="map_canvas"></div>
        <div id="nearest_banks">
            <form action="/nearest_banks/" method="get" id="send_radius">
              Курс ближайших банков на сегодня в радиусе
              <input type="text" name="radius" id="radius" size="5" value={{radius}} >
              <input type="submit" class="button" value="V">
               метров
            </form>
            <div id="places"> </div>
        </div>
    </section>

我的Javascript摘录：

$("#yes").click(function() {
        $("#ask_user").hide();
        $.ajax({
            type: "post",
            url: '/nearest_banks/radius',
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (data) {
                $("#allowed").show();
                var str = "";
                $("#places").empty();
                $.each(data.places, function(index, element) {
                    str += '<p>' + '<span class="name">' + element.name + '</span>' +
                            '<span class="location">' + element.location + '</span>' +
                            '</p>'
                });
                $('#places').append(str);
            }});
    });

修改我找到了解决方案。主要问题确实在于CSS。还有一些答案是关于性能改进和正确语法的，所以我根据它们编辑了代码。因此，编辑上面的代码并且工作得足够快。希望有一天这个问题会对某人有所帮助。

Answer 1

找出你的css隐藏html的原因。现在JS：

json响应示例：

var data.location= [ 
     {"ID": 139004, "Name": "Madison Square Garden", "Adress": "4 Pennsylvania Plaza, New York, NY 10001, United States"}, 
     {"ID": 1390040, "Name": "Eiffel Tower", "Adress": "Champ de Mars, 5 Avenue Anatole France, 
    75007 Paris, France"}, 
     {"ID": 1390059, "Name": "Big Ben", "Adress" : "London SW1A 0AA, United Kingdom"}
    ];

修正： p id ='location_“+ index +”'在html中包含唯一ID或删除id属性

使用元素参数：

success: function (data) {
            $("#allowed").show();
            $.each(data.location, function(index, element) {
                $('#places').append("<p id='location_" + index + "'> ID: " + element.ID+ " Name: " + element.Name +"</p>");
            });            
            console.log(data);
        }});

使用索引参数

success: function (data) {
            $("#allowed").show();
            $.each(data.location, function(index) {
                $('#places').append("<p id='location_" + index + "'> ID: " + data[index].ID+ " Name: " + data[index].Name +"</p>");
            });            
            console.log(data);
        }});

追加行json：

success: function (data) {
            $("#allowed").show();
            $.each(data.location, function(index, element) {
                $('#places').append("<p id='location_" + index + "'> " + JSON.stringify(element) + "</p>");
            });            
            console.log(data);
        }});

Jquery - 在html标记中显示数据

1 个答案: