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

中使用它

并删除末尾的逗号

Jquery Ajax自动刷新<div> </div>

3 个答案: