使用Ajax与Django通信实例

我的开发环境

• Django 1.11.4
• Python 3.5.1
• Jquery 1.11.2

简单需求描述

网页中一个表格，点击启动按钮后，服务器执行启动动作，并且执行后需要根据返回码更新界面。这是一个典型的Ajax需求，我们使用Jquery库一步一步实现这个过程。

下面记录使用过程

步骤1. Html中定义一个button按钮

在Django的Template文件中，定义一个id为btn_start_task的button，并且该Button在Form标签中。

<form method="post">
{% csrf_token %}
<button id="btn_start_task" value={{ task.id }} type="button" class="btn btn-xs btn-default">启动</button>
</form>

步骤2. Url路由设置

设置完前端后，我们创建一个路由，将url路径与view函数对应，同时起个名字，这个名字在Ajax函数中可以用 url: '{% url "StartEvalTask" %}', 也可以用url: '/ajax/start_eval_task/'引用

url(r'^ajax/start_eval_task/$', views.start_eval_task, name='StartEvalTask'),

步骤3. 使用Jquery挂接Button的click函数

task_id取自button中的value作为参数，这个函数的意思是，一旦点击按钮，就调用url对应的函数，并且传递参数data过去，类型为Json。如果顺利执行完，会弹框提醒执行完毕。

$(document).ready(function() {
    $("#btn_start_task").click(function () {
       task_id=$(this).attr("value")
      $.ajax({
        url: '{% url "StartEvalTask" %}',
        data: {json_data: JSON.stringify({'task_id': task_id})},
        dataType: 'json',
        success: function (data) {
          if (data.start_completed==1) {
            alert("start_completed!!!");
            // 其他操作；
          }
        }
      }); 
    });
  });

注1. JSON.stringify函数作用是将Javascript对象转换为JSON字符串。

步骤4. View中执行函数的定义

通过Ajax传递过来的数据，需要用json.loads去获取，注意返回值是字典。

import json
def start_eval_task(request):
    dict = json.loads(request.GET.get('json_data'))
    task_id = dict['task_id']
    task = EvalTask.objects.get(id=task_id)
    task.start()
    data = {
        'start_completed': 1
    }
    return JsonResponse(data)

​框架就是这样，可以根据实际需求，继续扩展。