ajax详解
- ajax
往后台提交数据，form表单标签
js语言中封装的一个发送http请求的模块，xmlhttprequest对象，经过jquery的封装起名为ajax
AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。
a.同步交互：客户端发出一个请求后，需要等待服务器响应结束后，才能发出第二个请求；
b.异步交互：客户端发出一个请求后，无需等待服务器响应结束，就可以发出第二个请求。
AJAX除了异步的特点外，还有一个就是：浏览器页面局部刷新
同步提交: 当点击提交后必须等待响应完成后才能继续操作网页
异步提交: 当点击提交后还可以继续操作网页中的其他内容,不用等待响应数据
def login(request): if request.method == 'GET': # return render(request, 'login.html') ret = render(request, 'login.html') # 修改响应状态码 ret.status_code = 202 # return ret
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="uname">
密码： <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 uname = $('#uname').val();
var pwd = $('#pwd').val();
$.ajax({
{#url:'http://127.0.0.1:8001/ajax_login/', // 请求路径 绝对路径 #}
url:'/ajax_login/', // 请求路径 相对路径
type:'post', // 请求方法，小写
{#data:{a:1,b:2}, // 请求携带数据#}
data:{username:uname, password:pwd},
// 接受请求成功之后的响应数据的，res接受到的就是响应数据，
// ajax会判断响应状态码，当状态码为2xx,3xx等时，那么表示请求和响应是正常的，那么ajax会将响应数据进行加工，并传递给success对应的匿名函数作为他的参数，也就是我们下面定义的res形参
success:function (res) {
console.log('success>>>>',res);
{#alert('登录成功！！！！恭喜恭喜！！！');#}
location.href = '/home/' //访问home路径，使用的浏览器的机制
//if (res === 'okk'){
// alert('登录成功！！！！恭喜恭喜！！！');
//}else {
// $('.error').text('用户名或者密码有误！！！');
//}
},
// 当状态码为4xx(请求错误),5xx(服务端错误)等时，那么ajax会加工响应数据并传递给error对应的函数
error:function (error) {
console.log('error>>>>',error);
if (error.status === 400){
alert('用户名或者密码有误！！');
{#$('.error').text('用户名或者密码有误！！！');#}
}
}
});
})
</script>
</html>
视图代码
from django.shortcuts import render, redirect, HttpResponse # Create your views here. 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 == 'root' and password == '123': return render(request, 'home.html') return redirect('/login/') # 默认使用的状态码就是302 def ajax_login(request): if request.method == 'GET': return render(request, 'login.html') else: print('ajax>>>>>', request.POST) # ajax>>>>> <QueryDict: {'username': ['xxx'], 'password': ['ooo']}> username = request.POST.get('username') password = request.POST.get('password') if username == 'root' and password == '123': # HttpResponse默认状态码为200 return HttpResponse('okk') # return render(request, 'home.html') # return redirect('/login/') else: ret = HttpResponse('not ok') ret.status_code = 400 return ret def home(request): return render(request, 'home.html')
urls.py
from django.conf.urls import url from django.contrib import admin 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), ]
