Django之AJAX简单使用
AJAX简介:
AJAX(Asynchronous Javascript And XML)翻译成中文就是“异步的Javascript和XML”。即使用Javascript语言与服务器进行异步交互,传输的数据为XML(当然,传输的数据不只是XML,现在更多使用json数据)。
AJAX 不是新的编程语言,而是一种使用现有标准的新方法。
AJAX 最大的优点是在不重新加载整个页面的情况下,可以与服务器交换数据并更新部分网页内容。(这一特点给用户的感受是在不知不觉中完成请求和响应过程)
AJAX 不需要任何浏览器插件,但需要用户允许JavaScript在浏览器上执行。
a.同步交互:客户端发出一个请求后,需要等待服务器响应结束后,才能发出第二个请求;
b.异步交互:客户端发出一个请求后,无需等待服务器响应结束,就可以发出第二个请求。
AJAX除了异步的特点外,还有一个就是:浏览器页面局部刷新;
AJAX请求‘Content-Type'三种类型:
前端js进行http请求和后端代码进行数据传输的消息格式:
&连接的赋值序列:'Content-Type':'application/x-www-form-urlencoded'(默认)
片段数据:'Content-Type':'multipart/form-data'(上传文件使用,同时请求方式为post,django自动识别解析,文件为request.FILES)
json字符串:'Content-Type':'application/json'(请求数据为json字符串时需要指定,django不能自动识别,需要对request.body进行手动解析操作)
AJAX的简单使用:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<title>login</title>
</head>
<body>
<div>
用户名:<input type="text" name="username" id="username">
密码:<input type="password" name="password" id="password">
<input type="button" id="submit" value="提交">{% csrf_token %}
<span id="status"></span>
</div>
</body>
<script>
//以post方式请求(csrf)
$(function () {
$('#submit').click(function () {
$.ajax({
url: "{% url 'auth' %}",//请求路径
type: 'post', //请求方式
data: { //请求数据(post请求的csrf认证键值对固定)
username: $('#username').val(),
password: $('#password').val(),
csrfmiddlewaretoken: $('input[name=csrfmiddlewaretoken]').val(),
},
success: function (response) {//请求回调函数
if (response == 1) {
location.href = "{% url 'index' %}"
} else {
$('#status').text('账号或密码有误!')
}
}
})
})
}) //以get方式请求
$(function () {
$('#submit').click(function () {
$.ajax({
url:"{% url 'auth' %}",
type:'get',
data:{
username: $('#username').val(),
password: $('#password').val(),
},
success:function (response) {
if(response==1){
location.href="{% url 'index' %}"
}else{
$('#status').text('账号或密码有误!')
}
}
})
})
})
</script> </html>
login.html
urls.py
urlpatterns = [
url(r'^login/',views.login,name='login'),
url(r'^auth/',views.auth,name='auth'),
url(r'^index/',views.index,name='index'),
]
views.py
def login(request):
if request.method == 'GET':
return render(request, 'login.html')
#ajax请求的处理视图函数
def auth(request):
#POST请求
if request.method == 'POST':
name = request.POST.get('username')
psd = request.POST.get('password')
print(name, psd, type(name), type(psd))
if name == "yang" and psd == '':
status = 1
else:
status = 0
return HttpResponse(status)
#GET请求
if request.method == 'GET':
if request.GET.get('username') == 'yang' and request.GET.get('password') == '':
status = 1
else:
status = 0
return HttpResponse(status) def index(request):
return render(request, 'index.html')
views.py
AJAX请求CSRF认证cookie处理:
<script src="{% static 'js/jquery.cookie.js' %}"></script>
<script>
$.ajax({
url: "/cookie_ajax/",
type: "POST",
headers: {"X-CSRFToken": $.cookie('csrftoken')}, // 从Cookie取csrftoken,并设置到请求头中
data: {"username": "chao", "password": 123456},
success: function (data) {
console.log(data);
}
})
</script>
最新文章
- ASP.NET Core Loves JavaScript
- POJ1273Drainage Ditches[最大流]
- Table &#39;performance_schema.session_variables&#39; doesn&#39;t exist
- 常用的工具cmd命令
- 浅谈iOS中的单例模式
- Android隐藏虚拟按键,关闭开机动画、开机声音
- 小米2及其他Android手机无法连接mac解决方案
- 廖雪峰Python3笔记
- C/C++ 多线程机制
- redis学习笔记(二)-五种数据类型
- Jenkins持续集成之小试牛刀
- 关于C# 怎么调用webapi来获取到json数据
- Golang福利爬虫
- Windows向虚拟机Linux传输文件方法
- mac os下提高android studio运行速度终极方法
- 解决Matlab当中for循环运行慢的问题
- alpha版发布
- Yarn application has already exited with state FINISHED
- Hadoop集群完全分布式坏境搭建
- S导入部门数据 更新父部门、责任人