8.Django --Ajax
Django --Ajax
1.简介
以前:往后台提交数据，form表单标签
js语言中封装的一个发送http请求的模块，xmlhttprequest对象，经过jquery的封装起名为ajax
AJAX（Asynchronous Javascript And XML）翻译成中文就是“异步的Javascript和XML”。即使用Javascript语言与服务器进行异步交互，传输的数据为XML（当然，传输的数据不只是XML,现在更多使用json数据）。
AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行
a.同步交互：客户端发出一个请求后，需要等待服务器响应结束后，才能发出第二个请求；
b.异步交互：客户端发出一个请求后，无需等待服务器响应结束，就可以发出第二个请求。
AJAX特点:
1.异步传输数据
2.浏览器页面局部刷新
2.使用Ajax需要引入jQuery文件
1.引入静态文件
在根目录创建statics(名字随意)目录,把jquery.js文件复制到目录下
在settings.py配置--引入静态文件路径,如下:
STATICFILES_DIRS = [
os.path.join(BASE_DIR,'statics')
]
2.html文件引入jquery.js
1.首先引入静态文件{% load static %} <!--引入静态文件-->
2.script引入jquery.js
<script src="{% static 'jquery.js' %}"></script>
3.修改响应状态码
def login(request):
if request.method == 'GET':
# return render(request,'login.html') #响应状态码是200
res = render(request,'login.html')
res.status_code = 202 # 修改响应状态码
return res
4.ajax简单使用
路由: urls.py
from app01 import views
urlpatterns = [
url(r'^admin/', admin.site.urls),
url(r'^login/', views.login),
url(r'^ajax_login/', views.ajax_login),
url(r'^home/', views.home),
]
视图: views.py
from django.shortcuts import render,redirect,HttpResponse
def ajax_login(request):
if request.method == 'GET':
return render(request,'login.html')
else:
print(request.POST)
username = request.POST.get('username')
password = request.POST.get('password')
if username == 'jia' and password == '123':
return HttpResponse('okk') #ajax一般不回复页面,会页面变成字符串,没用
# HttpResponse默认状态码为200
else:
# return HttpResponse('not okk') #返回200状态码,
ret = HttpResponse('not okk')
ret.status_code = 400 #更改状态码
return ret # 返回错误状态码,ajax执行error匿名函数
def login(request):
if request.method == 'GET':
# return render(request,'login.html')
ret = render(request,'login.html')
ret.status_code = 202 # 修改响应状态码
return ret
else:
print(request.POST)
username = request.POST.get('username')
password = request.POST.get('password')
if username == 'jia' and password == '123':
return render(request,'home.html')
return redirect('/login/') # redirect默认使用状态码302
def home(request):
return render(request,'home.html')
templates目录下html文件
login.html -- 写ajax代码
{% load static %} <!--引入静态文件-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.error{
color: red;
font-size: 12px;
}
</style>
</head>
<body>
<form action="" method="post">
用户名:<input type="text" name="username">
密码:<input type="password" name="password">
<input type="submit">
</form>
<hr>
用户名:<input type="text" id="username">
密码:<input type="password" id="pwd">
<span class="error"></span> <!--如果密码不对,用来存放错误信息-->
<button id="btn">ajax提交数据</button>
</body>
<script src="{% static 'jquery.js' %}"></script>
<script>
//ajax发送请求提交数据
$('#btn').click(function (){ //触发点击事件
var user = $('#username').val() //通过id获取标签中数据
var pwd = $('#pwd').val()
$.ajax({
url:'/ajax_login/',//发送请求路径,往本网站发可以用相对路径
// url:'http://127.0.0.1:8000/ajax_login/',//往其他网站发只能用绝对路径
type:'post', //请求方法,post或get小写
data:{username:user,password:pwd}, //向后台提交的数据
// 接收请求成功之后的响应结果
// 1.ajax会判断响应状态码，当状态码为2xx,3xx等时，那么表示请求和响应是正常的，那么ajax会将响应数据进行加工，并传递给success对应的匿名函数作为他的参数，也就是我们下面定义的res形参,
{#success:function(res){ //后台return回来的数据#}
{# console.log('success>>>',res);// success>>> not ok#}
{##}
{# if (res === 'okk'){#}
{# alert('登陆成功!!')#}
{# }else {#}
{# $('.error').text('用户名或密码有误!'); //向span标签添加错误信息#}
{# }#}
{#},#}
// 2.当状态码为4xx(请求错误),5xx(服务端错误)等时，那么ajax会加工响应数据并传递给error对应的函数
success:function (res){
alert('登陆成功!!')
location.href = '/home/' //网页跳转到home路径,使用的浏览器的机制
},
error:function (error){ //后台返回更改4xx的状态码时,执行该语句
console.log('error>>>',error);
if (error.status === 400){
$('.error').text('用户名或密码有误!'); //向span标签添加错误信息
alert('用户名或密码有误')
}
},
})
})
</script>
</html>
home.html -- 通过 location.href = '路径' 跳转的页面
<body>
<h1>欢迎来到首页</h1>
</body>
