2019.03.24 Ajax
也还是会用到jquery中的Ajax请i求
所以第一还是引入jQuery包 可以去网上搜腾讯网静态资源库
然后引入包 Ajax还是异步处理 处理堵塞问题 import time 就可以了
一共有三种吧，然后就是post要注意csrf这个 要打开F12去看到隐藏的值，然后导入
看到的值是健
Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。
局部刷新技术。
应用场景： 在页面比较复杂情况下，只需要更新局部内容。
语法
-
GET请求
var data = {'uname':'zhangsan'}
//发送ajax请求
$.get('/student/getinfo/',data,function(result){
alert(result.hello)
})
-
POST请求
var csrf = $('input[name="csrfmiddlewaretoken"]').val();
var data = {'uname':'zhangsan','csrfmiddlewaretoken':csrf}
$.post('/student/getinfo/',data,function(result){
alert(result.hello)
})
-
自定义AJAX请求
-
$.ajax({
url:'/student/getinfo/',
type:'get',
data:'uname=lisi&pwd=123',
async:true,
success:function (result) {
var test = result.hello$('#hid').html(test)
}})
-
#访问路径：
http://127.0.0.1:8000/student/only/
配置URL
# 项目包/urls.py
from django.conf.urls import url, include
from django.contrib import admin
urlpatterns = [
url(r'^admin/', admin.site.urls),
url(r'^student/', include('stu.urls')),
]
# 应用包/urls.py
#coding=utf-8
from django.conf.urls import url
import views
urlpatterns=[
url(r'^only/$',views.onlyView),
url(r'^isExist/$',views.existView),
]
创建视图
def onlyView(request):
return render(request,'only.html')
def existView(request):
#接收请求参数
uname = request.GET.get('uname','')
#判断数据库中是否存在
stuList = Student.objects.filter(sname=uname)
if stuList:
return JsonResponse({'flag':True})
return JsonResponse({'flag':False})
创建模板页面（only.html）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.9.0/jquery.min.js"></script>
<script>
//onblur:失去焦点
//onfocus:获得焦点
function checkUname(){
//1.获取文本框内容
var uname = $('#uname').val();
//2.非空校验
if(uname.length==0){
$('#unameSpan').html('*');
$('#unameSpan').css('color','red');
}else{
//3.判断唯一性
$.get('/student/isExist/',{'uname':uname},function(result){
//alert(typeof result.flag)
r = result.flag;
//4.根据服务器端的响应信息进行页面更新
if(r){
$('#unameSpan').html('此用户名太受欢迎了，请换一个吧~');
$('#unameSpan').css('color','red');
}else{
$('#unameSpan').html('√');
$('#unameSpan').css('color','green');
}
})
}
}
</script>
</head>
<body>
用户名：<input type="text" name="uname" id="uname" onblur="checkUname()"/><span id="unameSpan"></span>
</body>
</html>
-
