3

对于这里的大多数人来说，这个问题可能是基本的，但我真的厌倦了没有得到想要的 o/p。我想在单击列表中的项目（id = vzlabs_data）时进行 AJAX 调用，并且应在表中更新其各自的数据（id = table_data）。

目前，我能够发布数据，对它进行 db 调用，获取它的数据，并且获取的数据正在 python 解释器中打印，但不会在表中更新。

我哪里错了？

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">Device</a>
            </li>
            <li><a href="#content">Content</a>
            </li>
            <li><a href="#about">About</a>
            </li>
            <li><a href="#help">Help</a>
            </li>
        </ul>
    </div>
</div>
<div class="pull-right">From :
    <input type="text" id="from" name="from" />To :
    <input type="text" id="to" name="to" />
</div>
<br>
<br>
<div class="container-fluid">
    <div class="row-fluid">
        <div class="span2 pull-left">//****** An item is picked up from this list**********
            <ul class="nav nav-tabs nav-stacked"
            id="vzlabs_data">
                <li class="active"><a href="#">All Data</a>
                </li>
                <li><a href="#">VZW3RD</a>
                </li>
                <li><a href="#">VZWLAB</a>
                </li>
                <li><a href="#">VZW2ND</a>
                </li>
            </ul>
        </div>
        <!-- end of div span2-->
        <div id="pie_chart" class="span4" style="height: 275px"></div>
        <!-- end of div span4-->
        <div class="span5">
            <table class="table table-striped" id="table_data">
                <thead>
                    <tr>
                        <th>Categories</th>
                        <th>Subscribers</th>
                        <th>Rate(bps)</th>
                        <th>Tonage(Bytes)</th>
                    </tr>
                </thead>
                <tbody>// Data is updated over here. {% for key, value in vzlab_data.items %}
                    <tr>
                        <td>{{key}}</td>
                        <td>{{value.subscriber}}</td>
                        <td>{{value.rate_bps}}</td>
                        <td>{{value.tonage_bytes}}
                            <div class="progress">
                                <div class="bar" style="width: 60%;"></div>
                            </div>
                        </td>
                    </tr>{%endfor%}</tbody>
            </table>
        </div>
        <!-- end of div span7-->
    </div>
    <!-- end of div row-->

JS函数

$(function () {
    $("#vzlabs_data li").click(function () {
        $.ajax({
            type: "POST",
            url: "/dashboard/",
            data: {
                'lab': $(this).text()
            },
            success: function (result) {
                $("#table_data").html(result);
            }
        });
    });
});

视图.py 

def dashboard(request):
    vzlab_data = get_vzlab_data("All Data")

    if request.is_ajax():
        lab           = request.POST['lab']
        vzlab_data    = get_vzlab_data(lab)
        return HttpResponse(simplejson.dumps(vzlab_data), mimetype='application/javascript')


ctx = {'vzlab_data' : vzlab_data}

return render_to_response('dashboard/dashboard1.html',ctx, context_instance = RequestContext(request))
4

4 回答 4

3

好的，你显然得到了 JSON 结果。所以你的 $.ajax() 方法应该包含它需要'JSON'数据类型。像这样：

$.ajax({
    type: "POST",
    url: "/dashboard/",
    data: {
        'lab': $(this).text()
    },
    dataType: 'json',
    success: function (result) {
        // THIS IS ACTUALLY WRONG
        //$("#table_data").html(result);
    }
});

然后您需要解析 JSON 并将其构建为 HTML 字符串。现在，如果你得到 'result' 作为 json 字符串（它应该是一个 javascript 关联数组，如果我没记错的话），你必须将它转换为关联数组：var resultObj = JSON.parse(json)

然后您可以在 Javascript 中构建 HTML 字符串并使用该构建的字符串来实际：

$("#table_data").html(yourBuildedString);

代码的“最终”版本：

$.ajax({
  type: "POST",
  url: "/dashboard/",
  data: {
    'lab': $(this).text()
  },
  dataType: 'json',
  success: function (result) {
    // ok you don't need to do this, jquery already converted json into Javascript object for you
    //var resultObj = JSON.parse(result);

    // parsing the resultObj into string, just example, you have to do it yourself
    // var parsedTableContent = "<tr><td>"+result['Education']['subscriber']+"</td><td>"+result['Education']['tonage_bytes']+"</td></tr>"
    $("#table_data").html(parsedTableContent);
  }
});

还有一件事，我注意到在您的回复中有这样的关键：技术和计算

作为一种好的做法，您可能希望将来避免在数组键中使用空格

于 2013-08-30T10:43:53.403 回答
2

将dataType属性设置为返回的数据类型。如果json返回对象，它将不会显示在 html 中，

尝试提醒响应以检查它是否返回响应

把它放在你的成功函数中

 // let's say you have an object like = {  number: { ... } } in your JSON data
    var html="";

              html += '<tr><td>'+result.number+'</td></tr>';
              html +=  '<tr><td>'+result.name+'</td></tr>';  // another object name

$('#table_data').html(html);
于 2013-08-30T10:41:01.453 回答
1

采用 ：

success: function (result) {
    $("#table_data").html(result);
    $("#table_data").trigger('create');//To refresh the page content on success call back

}

如果您使用的是最新版本，则.trigger('create')折旧。而是使用：

 $("#table_data").page();

也只是为了确保您获得成功回调的结果，请尝试console.log(result);.

所以 ：

success: function (result) {
    console.log(result);
    $("#table_data").html(result);
    $("#table_data").trigger('create');//To refresh the page content on success call back

}
于 2013-08-30T10:26:10.670 回答
1

如果返回的数据result不是表格数据（例如，不包含表单中的数据<tr>...</tr>或<tbody>...</tbody>所有必要的行和单元格，那么浏览器将不会在表格中显示它。

您可以发布返回的实际数据result吗？

于 2013-08-30T10:31:41.743 回答