[Django] - 使用Ajax与Django通信

使用Jquery库与Django进行Ajax通信，是较为常见的一个方法。

下面记录使用过程。

Html中的button

需要将button放在Form中，定一个id为btn_start_task的button

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

使用Jquery挂接Button的click函数

task_id取自button中的value作为参数，这里解决了如何向click函数传参的问题。

JSON.stringify将Javascript对象转换为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!!!");
          }
        }
      }); 
    });
  });

View中函数的定义

Json_data存到了Request.Get中，我们取到id值后，就可以做想做的操作了。

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)

Url路由设置

路由很简单，将url路径与view函数对应，同时起个名字，这个名字在Ajax函数中可以用  url: '{% url "StartEvalTask" %}', 也可以用

url: '/ajax/start_eval_task/',

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

注释1. templete对应的View，最好是Function而不是View。如果是ListView或DetailView，会出现无法Post 405错误，要想解决必须重载def post，很麻烦。