Jquery Ajax 自动刷新 <div>

Question

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

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

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

这是我的代码。

python 服务

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); this 是我实际得到的。相反，我希望我的 python 代码应该返回一些东西（在本例中为 ctx）并打印 ctx 变量。

Answer 1

更改它的 ID

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

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

id-selector

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

$(".container-fluid")

class-selector

Answer 2

改变

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

到

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

#用于id访问，.用于class访问

Answer 3

试试

$("#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{}中使用它

并删除末尾的逗号