一、Ajax基本概念
- 异步JavaScript和XML,在不全部加载某一个页面的情况下,对页面进行局部刷新。注意:所有的Ajax请求都是在后台。
二、Ajax请求过程
- 发起ajax请求:jqeury发起
- 执行相应的视图函数,返回json数据
- 执行相应的回调函数,通过判断json内容进行相应处理
- 格式:
$.ajax({ 'url': '请求地址', 'type': '请求方式', dataType': 'json' }).success(function (data) { // 进行处理的部分 }
三、配置
- 通常建立一个static的文件夹,把图片,css文件,js文件放在同一个目录下
- setting配置:
四、代码
from django.shortcuts import render
from django.http import HttpResponse, JsonResponse
# Create your views here.
def index(request):
return HttpResponse('登录成功')
def login_ajax(request):
return render(request, 'mylogin/login_ajax.html')
def login_ajax_check(request):
# 1.获取用户名密码
username = request.POST.get('username')
password = request.POST.get('password')
# 2.校验并返回应答
if username == 'wen' and password == '123':
return JsonResponse({'res': 1})
else:
return JsonResponse({'res': 0})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ajax登录页面</title>
<script src="static/js/jquery-1.12.4.min.js"></script>
<script>
$(function () {
$('#btnAjax').click(function () {
// 1.获取用户名和密码 格式:$('#xxxx').val()
username = $('#username').val()
password = $('#password').val()
// 2.发起ajax请求
$.ajax({
'url': '/login_ajax_check',
'type': 'post',
'data': {'username' : username, 'password': password }, // ''下的username对应着视图函数中的username
'dataType': 'json'
}).success(function (data) {
// 进行处理
if (data.res==0){
$('#errmsg').show().html('用户名或密码错误')
}
else{
// 跳转到首页
location.href = '/index'
}
})
})
})
</script>
<style>
#errmsg{
display: none;
color:red;
}
</style>
</head>
<body>
<h1>Ajax登录例子</h1>
<div>
<p>
<label for="">用户名:</label>
<input type="text" id="username">
</p>
<p>
<label for="">密 码:</label>
<input type="password" id="password">
</p>
<p>
<input type="button" id="btnAjax" value="登录">
</p>
<div id="errmsg"></div>
</div>
</body>
</html>
五、遇到的问题
- 在编写JavaScript代码的时候,pycharm无法自动补全,弄了很久,最后才知道pycharm社区版不支持自动补全,需要专业版才可以。
- 发送Ajax请求时data和dataType顺序不能错。