在django模板中处理ajax和jquery

我试图将页面分为两部分加载。 第二部分仅在用户单击“显示更多详细信息”时渲染

<script>
$(document).ready(function(){
    $('#toggle_details').click(function(e){
        e.preventDefault();
        if ($(this).hasClass('up')){
            $(this).removeClass('up').addClass('down');
            $('#toggle_text').html('Show More Details');
        }
        else {
            $(this).removeClass('down').addClass('up');
            $.ajax({
                url: 'some_url_returning_json',
                data: $(this).serialize(),
                processData: false,
                dataType: "json",
                success: function(data) {
                    $( '.name' ).html(data.name);
                    $( '.lname' ).html(data.lname);
                    alert(data.name);
                }
            })
            $('#toggle_text').html('Hide Details');
        }
        $('#details').slideToggle("slow");
        return false;
    });
    $('#details').hide();
});    
</script>

$（文档）.ready（函数（）{
$（“#切换#详细信息”）。单击（函数（e）{
e、 预防默认值（）；
if（$（this）.hasClass（'up'））{
$（this）.removeClass（'up'）.addClass（'down'）；
$（'#toggle_text'）.html（'Show More Details'）；
}
否则{
$（this）.removeClass（'down'）.addClass（'up'）；
$.ajax({
url:'some_url_returning_json'，
数据：$（this）.serialize（），
processData:false，
数据类型：“json”，
成功：功能（数据）{
$（'.name'）.html（data.name）；
$（'.lname'）.html（data.lname）；
警报（data.name）；
}
})
$（'#toggle_text'）.html（'Hide Details'）；
}
$（“#详细信息”）。滑动切换（“慢速”）；
返回false；
});
$（“#详细信息”）.hide（）；
});    

我的html是：

<div class="ad-grp-tbl creative-tbl custom-tbl">
    <table width="100%">
        <tr>
            <th>Status:</th>

            <td id='status'>{{ status }}</td>
        </tr>
    </table>
    <table width="100%" id="details">
        <tr>
            <th>Name:</th>
            <td id="name" >{{data.name}}</td>
        </tr>

        <tr>
            <th>Last Name:</th>
            <td id ="lname">{{ data.lname}}</td>
        </tr>
    </table>
    <table>
        <tr>
            <th class="tog">
                <span id="toggle_text" style="color:blue;font-weight:bold">Show More Details</span>
                <span class="down" id="toggle_details"></span>
            </th>
            <td></td>
        </tr>
    </table>
</div>

地位：
{{status}}
姓名：
{{data.name}
姓氏：
{{data.lname}
显示更多细节

因此，基本上我无法在模板中加载json返回值。 我能修好它吗。或者我解决问题的方法是错误的

---

谢谢。

Ajax+JQuery将得到响应，并且应该在页面中适当地放置数据。原始页面的模板并没有太多的作用

但是，您必须实现单独的url+视图+模板来处理ajax请求。您可以使用现有视图，但需要处理ajax请求（即只发送部分html，可能使用另一个模板）

---

ajax响应模板应该只发送html的相关部分，而不是整个html页面。

在html中，您设置了ID，但使用的是类选择器

应该是：

$( '#name' ).html(data.name);
$( '#lname' ).html(data.lname);

而不是：

$( '.name' ).html(data.name);
$( '.lname' ).html(data.lname);

是类选择器，

#

是id选择器

您可以尝试使用Firebug或Chrome开发工具查看上面的返回项。

我向您展示了一个示例：

def post_ajax(request):
    TOTLE = 5
    OFFSET = int(request.GET.get('offset', 0))
    END = OFFSET + TOTLE

    if OFFSET + 1 >= Post.objects.count():
        LOADED = "已经全部加载完毕"
        return HttpResponse(LOADED)
    posts = Post.objects.filter(pub_time__lte=timezone.now())[OFFSET:END]

    json_list = []
    for post in posts:
        t = get_template('blog/ajax_post.html')
        html = t.render(Context({'post': post}))
        # print(html)
        json_list.append({
            'html': html,
        })
    data = json.dumps(json_list)
    return HttpResponse(data, content_type="application/json")

---

这是你需要的吗？

你错过了“；”ajax方法的分号