Twitter Bootstrap 下拉 AJAX 调用

Question

试图让下拉更新由 Google Chart API 构建的图表。 我现在遇到的问题很少。

1. 它将request 发送到错误的URL，而不是/graph/，它正在将数据发送到它现在所在的页面/services/。所以我不能继续调试它，因为它甚至不会将POST 发送到需要它的地方。 /graph/(ajax.py) 是包含 AJAX 数据的那个

2. 我知道现在它没有传递任何数据，但我什至无法弄清楚如何访问正确的视图。如果 1 是固定的，那么从 twitter bootstrap 的下拉菜单中传递值的最佳方法是什么

HTML

信用转到this

<form id="select-graph" name="select-graph" method="POST">
{% csrf_token %}
    <div class="btn-group">
        <button type="submit" class="btn btn-default dropdown-toggle" data-toggle="dropdown" formmethod="POST">
        Action <span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
            <li><a onclick="$('#select-graph').submit()">Option 1</a></li>
            <li><a href="#">Option 2</a></li>
            <li class="divider"></li>
            <li><a href="#">About</a></li>
        </ul>
    </div>  
</form>

AJAX 脚本

信用转至this

<script type="text/javascript">
            var graphid = 1;
            $('#select-graph').submit(function() {
                $.ajax({
                    url: 'https://www.google.com/jsapi?callback',
                    cache: true,
                    dataType: 'script',
                    success: function(){
                    google.load('visualization', '1', {packages:['corechart'], 'callback' : function(){
                        $.ajax({
                            type: "POST",
                            dataType: "json",
                            url: '/graph/',
                            success: function(jsondata) {
                                var data = google.visualization.arrayToDataTable(jsondata);
                                var options = {title: 'My Daily Activities'};
                                var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
                                chart.draw(data, options);
                            }
                        })    
                    }
                  })
                }
            })
            return true
        })  
</script>

/graph/ - ajax.py

def insider_graphs(request):   
    if request.method == 'POST' :
        #code that works, this json.dumps with 
        #special encoder works in all others parts 
        #of the code and charts look fine
        return HttpResponse({'array':json.dumps(data, cls=SpecialEncoder)},  content_type="application/json", context_instance=RequestContext(request))  

解决方案

基于公认的解决方案，我必须进行一些小修改才能使其工作：

jsondata 正在传递的项目里面有我需要的项目，所以我需要 jsondata['jsondata'] 而不是调用jsondata，其中'jsondata'是我从 django 传递下来的对象名称

新行： var data = google.visualization.arrayToDataTable(jsondata['jsondata']);

Answer 1

实际上，您正在提交两个提交：一个发布到/graph/（ajax），另一个发布到/services/（不是ajax）。第二个会重新加载页面。

您需要更改的是防止触发第二次提交。您可以通过在提交callbak中调用preventDefault()事件方法来归档它：

$('#select-graph').submit(function(event) {
    event.preventDefault();

    $.ajax({
        url: 'https://www.google.com/jsapi?callback',
        cache: true,
    /* rest of your code */
    ....
});

更新

jsfiddle

更新 2：返回 json 的有效 Django 视图

return HttpResponse(
    json.dumps({'array': data}, cls=SpecialEncoder),
    content_type="application/json",
    context_instance=RequestContext(request)
)