2

由于我也曾在 SO 上看到过这个问题，所以这对许多人来说可能是重复的，但我还没有找到这个问题的答案。

我想从导航栏中选择一个项目，并通过用 AJAX 生成的数据替换当前数据来显示另一个标签内的内容。

目前我能够将数据发布到 python 服务中，它对其进行处理并最终将其返回给客户端。将数据更改为的最后一部分div没有发生。

这是我的代码。

蟒蛇服务

def dashboard(request):

    if request.is_ajax():
        which_nav_bar = request.POST['which_nav_bar']
        print which_nav_bar // prints which_nav_bar inside the terminal

    ctx = {'result' : "hellloooo"}
    return render_to_response('dashboard/dashboard1.html',ctx, context_instance = RequestContext(request))

JS文件

$(function (){
    $("#nav_bar li").click(function(){
        alert($(this).text());     // works fine
        $.ajax({
            type: "POST", //able to post the data behind the scenes
            url: "/dashboard/",
            data : { 'which_nav_bar' : $(this).text() },
            success: function(result){
                 $(".container-fluid").html(result);
            }

        });
    });
});

HTML

<div class="navbar">
              <div class="navbar-inner">
                  <ul class="nav" id="nav_bar">
                    <li class="active"><a href="#">Home</a></li>
                    <li><a href="#">Device</a></li>
                    <li><a href="#">Content</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Help</li>
                </ul>
              </div>
        </div>  

<div class="container-fluid"></div>

输出

$(".container-fluid").html(result); 这就是我实际得到的。相反，我希望我的 python 代码应该返回一些东西（在这种情况下ctx）并打印 ctx 变量。

4

3 回答 3

1

改个id

<div id="container-fluid"></div>

这是 id 选择器$("#container-fluid")

id 选择器

如果你想按类访问，你可以使用

$(".container-fluid")

类选择器

于 2013-08-29T09:49:50.743 回答
1

改变

$("#container-fluid").text(result);

至

$(".container-fluid").text(result);

#is used to access by idand .is used to access byclass

于 2013-08-29T09:55:03.130 回答
0

尝试

$("#nav_bar li").click(function(){
        var text_input = $(this).text();     // works fine
        $.ajax({
            type: "POST", //able to post the data behind the scenes
            url: "/dashboard/",
            data : { 'which_nav_bar' : text_input  }
            success: function(result){
                $("#container-fluid").text(result);
            }

        });
    });

在您使用的代码中

data : { 'which_nav_bar' : $(this).text()},

但在您的 ajax 请求$(this).text()中将是未定义的，

所以将它分配给一个变量并在里面使用它data{}

并删除最后的逗号

于 2013-08-29T09:52:45.827 回答