人生苦短 ~
Tips：仅适用于 Python 3+（反正差别不大，py2 改改也能用）。因为据 Python 之父 Guido van Rossum 说会在 2020 年停止对 Python 2 的官方支持，所以如果你还在使用 Python 2 那就要早做准备了，毕竟没有官方的支持使用起来也不顺心的。
1. Ajax 介绍
Ajax 即 “Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。
Ajax = 异步 Javascript 和 XML（标准通用语言的子集）。
Ajax 是一种用于创建快速动态网页的技术。
Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
传统的网页（不使用 Ajax）如果需要更新内容，必须重载整个网页页面。
来源：百度百科
2. 视图页面
在文件夹 \templates 中新建页面 ajax_request.html 和在 /static/js/ajax_request.js 页面，html 文件暂时添加如下代码，js 文件暂时为空：
<!DOCTYPE html>
{% load static %} <!-- 模板标签加载静态文件路径，也可以改成 load staticfiles -->
<html>
<head>
<title>HelloDjango</title>
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script><!-- 这里引入的是百度的 JQuery -->
<script type="text/javascript" src="{% static 'js/ajax_request.js' %}"></script> <!-- 我们 get post 请求需要使用的自定义 js -->
</head>
<body> </body>
</html>
在我们的应用模块中 /mydjango/views.py 添加以下四个函数，函数暂时返回空：
# 默认访问页面
def ajax_index(request):
return render(request, 'ajax_request.html') # Ajax GET 提交数据
def ajax_get(request):
return HttpResponse('') # Ajax POST 提交数据
def ajax_post(request):
return HttpResponse('') # Ajax 返回 JSON 数据
def ajax_json(request):
return HttpResponse('')
在我们的应用模块中 /mydjango/urls.py 添加一下四个访问链接：
path('ajax/index/', views.ajax_index),
path('ajax/get/', views.ajax_get),
path('ajax/post/', views.ajax_post),
path('ajax/json/', views.ajax_json),
3. GET 提交数据
在 ajax_request.html 页面 body 中添加需要提交数据的 html 代码：
<h3>GET 提交数据：</h3>
<input type="number" id="num1" /> *
<input type="number" id="num2" />
<button onclick="fun_get();"> = </button>
<font style="color:red;"><span id="result_get"></span></font>
<hr />
在 views.py 中的 ajax_get 方法中获取数据并实现操作：
# Ajax GET 提交数据
def ajax_get(request):
a = request.GET.get("a")
b = request.GET.get("b")
n = int(a) * int(b)
return HttpResponse(str(n))
js 添加 get 请求操作：
function fun_get() {
var a = $("#num1").val();
var b = $("#num2").val();
$.get("/mydjango/ajax/get/", { 'a': a, 'b': b }, function(ret){
$('#result_get').html(ret);
});
}
可以看到浏览器请求的地址和执行结果：
4. POST 提交数据
在 ajax_request.html 页面 body 中添加需要提交数据的 html 代码：
<h3>POST 提交数据：</h3>
<input type="number" id="num_post1" /> *
<input type="number" id="num_post2" />
<button onclick="fun_post();"> = </button>
<font style="color:red;"><span id="result_post"></span></font>
<hr />
在 views.py 中的 ajax_post 方法中获取数据并实现操作：
# Ajax POST 提交数据，csrf_exempt 是告诉你的视图不要检查 csrf 标记，不加的话会报 403 错误
# 需要导入包 from django.views.decorators.csrf import csrf_exempt
@csrf_exempt
def ajax_post(request):
a = request.POST.get("a", 0) # 0 是默认值
b = request.POST.get("b", 0)
n = int(a) * int(b)
return HttpResponse(str(n))
js 添加 post 请求操作：
function fun_post() {
var a = $("#num_post1").val();
var b = $("#num_post2").val();
$.ajax({
type : 'post',
url : '/mydjango/ajax/post/',
dataType : 'json',
data : {
'a': a,
'b': b
},
success : function(ret) {
$('#result_post').html(ret);
},
error : function(err) {
}
});
}
可以看到浏览器请求的地址和执行结果：
5. POST 返回 JSON 数据
在 ajax_request.html 页面 body 中添加需要提交数据的 html 代码：
<h3>POST 请求 JSON 数据：</h3>
<button onclick="fun_json();"> 请求 JSON </button>
<font style="color:green;"><span id="result_json"></span></font>
<hr />
在 views.py 中的 ajax_json 方法中获取数据并实现操作：
# Ajax 返回 JSON 数据，csrf_exempt 是告诉你的视图不要检查 csrf 标记，不加的话会报 403 错误
# 需要导入包 from django.views.decorators.csrf import csrf_exempt
@csrf_exempt
def ajax_json(request):
name_dict = {'name': 'Django', 'age': 18, 'phone': ''}
return HttpResponse(json.dumps(name_dict), content_type='application/json')
js 添加 post 请求 JSON 操作：
function fun_json() {
$.ajax({
type : 'post',
url : '/mydjango/ajax/json/',
dataType : 'json',
success : function(ret) {
$('#result_json').html(JSON.stringify(ret));
},
error : function(err) {
}
});
}
可以看到浏览器请求的地址和执行结果：
~ 我学 Python