https://github.com/cuihuanhuan/pro1.git 这是我的静态的demo,要改一下变成从views传数据到js中，生成饼图，谢谢了以下是我的代码：我这样写的代码，静态页面里面是乱码下面是静态页面的饼图js代码中series的数据，下面是效果图

django项目中如何传json数据到模板中，填充highcharts里的series，生成饼图？

3 个回答

landpack

✓ 已被采纳

可以使用Ajax来提交啊！
给你一个简单的例子吧！
在views.py里面添加一个视图方法如下；
注意在头部导入一个JsonResponse
from django.http import HttpResponse,JsonResponse

def ajax_sample(request):
    if request.method == 'POST':
        #POST goes here . is_ajax is must to capture ajax requests. Beginner's pit.
        if request.is_ajax():
            email = request.POST.get('email')
            password = request.POST.get('password')
            data = {"email":email,"password":password,"rsp":"hello I from server"}
            return JsonResponse(data)

    return render(request,'ajax_sample.html')

在你的templates里面可以写你的html文件

{% load staticfiles %}
<html>
    <head>
    <link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet">
    <script src="{% static 'js/jquery.js' %}"></script>
    </head>
<body>


<div class="container">
<form class="form-signin" method="POST">
    {% csrf_token %}
    <h2 class="form-signin-heading">Ajax submit form</h2>
<div class="row">
<div class="col-sm-3">
    <label for="inputUsername" class="sr-only">Username</label>
    <input type="username" id="username" class="form-control" placeholder="Username" required autofocus>
    <label for="inputEmail" class="sr-only">Email Address</label>
    <input type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus>
    <label for="inputPassword" class="sr-only">Password</label>
    <input type="password" id="inputPassword" class="form-control" placeholder="Password" required>
    <button id="submit" class="btn btn-primary" type="submit">Sign in</button>
</div>
</div>
</form>

</div>

<script>

function getCookie(name) {
    var cookieValue = null;
    if (document.cookie && document.cookie != ''){
        //cookies is something like "csftoken=ejfbewbfjenwnflrkmgkrmg"
        var cookies = document.cookie.split(';');
    for (var i = 0; i < cookies.length; i++){
        var cookie = jQuery.trim(cookies[i]);
    // Does this cookie string begin with the name we want?
    if(cookie.substring(0,name.length + 1) == (name + '=')) {
        //So, here we just want to return a value of csftoken 
        cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
        break;
      }
    }
  }
  return cookieValue;
}
$("#submit").click(function(e){
    e.preventDefault();

    //Prepare csrf token
    var csrftoken = getCookie('csrftoken');
    var email = $('#inputEmail').val();
    var password = $('#inputPassword').val();
    
    $.ajax({
        url: window.location.href,  //the endpoint, commonly same url
        type: "POST", //http method
        data: { csrfmiddlewaretoken : csrftoken,
                email: email,
                password: password,
                },  // data sent with the post request

    //handle a successful response
        success : function(json){
            console.log(json);  // another sanity check
            //On success show thr data posted to server as a message
            alert('Hi '+json['email']+'!.'+' You have entered password:'+json['password']+json["rsp"]);
                },
    //handle a non-success response
            error: function(xhr,errmsg,err){
            console.log(xhr.status + ": " + xhr.responseText); // provide a bit more info about error to the console
            }
        });
});
</script>



</body>
</html>

注意，这里使用的是Jquery中得Ajax函数，所以你需要下载一个jquery.min.js到你的静态文件（例如js/jquery.min.js)；对于boostrap你可以暂时不包含，因为它只是修饰作用！
以上的代码实现的功能就是从网页获取一个表单，并且通过ajax上传到服务器，服务器接收成功会返回到客户端，客户端的success函数会获得返回的json数据，我想你的需求应该也大致如此吧！
有什么问题可以继续交流！

views.py这样写：