ajax响应后，HTML结构受到干扰

HTML structure disturbed after ajax response

本文关键字：干扰 结构 HTML 响应 ajax      更新时间：2023-09-26

我正在使用django 1.5, python 2.7和jquery 1.9。虽然这个问题主要与javascript有关。

我的html代码如下。这形成了一个对象列表，如:

<div class="item cls">
<div class="item cls">
<div class="item cls">
<div class="item cls">
<div class="item cls">
<div class="item cls">
<div class="item cls">
<div class="item cls">

当我通过ajax获取更多数据时，形成的结构是这样的:

<div class="item cls">
<div class="item cls">
<div class="item cls">
<div class="item cls">
    <div class="item cls"> #new div
        <div class="item cls"> #new div
                <div class="item cls"> #new div
                        <div class="item cls"> #new div
HTML: 

{% for obj in objs %}        
        <div class="item cls">
            <div class="alpha"><a href="#"><img src="{{ STATIC_URL }}img/107.png" /></a></div>
            <div class="span6" id="abc_{{ obj.id }}">
            <h2 class="Title"><a href="#">{{ obj.t }}</a></h2>
            <p>{{ obj.a }}</p>
            <div class="tags">
            <a href="#"><i class="icon"></i> Intel</a>
            <a href="#"><i class="icon"></i> Architecture</a>
            </div>
           <a href="#" class="btn"><i class="icon"></i> Upload </a>
           <a href="#" class="btn"><i class="icon"></i> Download </a>
          </div>
        </div>
{% endfor %}
AJAX成功:

for(var i = 0; i < response.length; i++){
    var divs = document.getElementsByClassName('item');
    divs[parseInt(divs.length)-1].innerHTML = '<div class="item cls"><div class="alpha"><a href="#"><img src="{{ STATIC_URL }}img/107.png" /></a></div><div class="span6" id="abc_' + response[i].id + '"><h2 class="Title"><a href="#">' + response[i].t + '</a></h2><p>' + response[i].a + '</p><div class="tags"><a href="#"><i class="icon"></i> Intel</a><a href="#"><i class="icon"></i> Architecture</a></div><a href="#" class="btn"><i class="icon"></i> Upload </a><a href="#" class="btn"><i class="icon"></i> Download </a></div></div>'

在我在innerHTML中附加代码的行中有一些问题。我不明白那是什么。请帮助! !

我通过在django for loop模板外添加一个div来解决这个问题

<div class="itemContainer">
        #previous HTML code
</div>

现在在ajax成功函数中我写了

for(var i = 0; i < response.length; i++){
    var divs = $('.itemContainer')[0].innerHTML;
    $('.itemContainer')[0].innerHTML = divs.concat('//structure to concatenate');
}

我对这种方法不满意，但对我来说仍然有效。

将ajax响应"插入到"最后一个div..这就是为什么你的结构是软管。由于您正在使用jQuery，因此请利用"。insertAfter"方法。例如:

var div = jQuery('<div/>', {
    html: '<innerhtmlhere>'
});
div.insertAfter($('.item').last());

试一试，告诉我你的结果。

或者更快的实现:(如果你的响应文本是干净的)

$("<responsetexthere>").insertAfter($('.item').last());

文档:http://api.jquery.com/jQuery/jQuery2

相关文章：