0

我正在尝试分两部分加载页面。第二部分仅在用户单击“显示更多详细信息”时呈现

<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>

我的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>

所以基本上我无法在模板中加载 json 返回值。我可以修复它吗？或者我解决问题的方法是错误的。

谢谢。

4

3 回答 3

1

我给你看一个例子：

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")

这是你需要的吗？

于 2016-03-05T12:54:48.320 回答
0

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

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

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

于 2012-07-07T06:01:06.350 回答
0

在 HTML 中，您设置了 id，但您使用的是类选择器。

它应该是：

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

代替：

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

.是类选择器，#是 id 选择器。

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

于 2012-07-16T23:32:02.867 回答