使用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,很麻烦。
评论
No comments yet.