博客核心内容:Ajax
1、Cookie是什么
2、Session是什么
3、Ajax是什么
1、Cookie:在浏览器上面保存的键值对. 应用:用户登录 、投票
代码:
from django.shortcuts import render,redirect,HttpResponse
from app import models
# Create your views here.
def ck(request):
print('发送过来的cookie')
print(request.COOKIES)
"""
发送过来的cookie:就是浏览器上面的一个键值对,相当于一个凭证
{'nnn': '123123'}
"""
obj = render(request,'ck.html')
"""
效果:返回页面的同时,同时在浏览器悄悄的写了个nnn:123123
"""
obj.set_cookie('nnn','123123')
print('-------')
print(obj)
print(type(obj))
"""
<HttpResponse status_code=200, "text/html; charset=utf-8">
<class 'django.http.response.HttpResponse'>
"""
return obj
def login(request):
if request.method == 'GET':
return render(request,'login.html',{'msg':""})
else:
u = request.POST.get('user')
p = request.POST.get('pwd')
ct = models.UserInfo.objects.filter(username=u,password=p).count()
if ct:
obj = redirect('/home/')
# 谁登陆的话,就将用户名回写在本地了
# 在跳转的同时在浏览器留下点cookie,并设置cookie的停留时间
obj.set_cookie('uuuuuuuu',u,max_age=10)
return obj
else:
return render(request,'login.html',{'msg':'用户名或者密码错误'})
def home(request):
v = request.COOKIES.get('uuuuuuuu')
if v:
return HttpResponse('欢迎登陆')
else:
# 否则重新放回登陆页面
return redirect('/login/')
前端页面:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="/login/" method="POST">
<input type="text" name="user">
<input type="text" name="pwd">
<input type="submit" value="提交">{{ msg }}
</form>
</body>
</html>
部分截图:
2、Session是什么
牛逼博客:http://www.cnblogs.com/shiyangxt/archive/2008/10/07/1305506.html
Cookie的定义:http://jingyan.baidu.com/article/a3aad71a86efdab1fb00969d.html
Cookie:在浏览器上面保存的键值对.
应用:用户登录
投票
Session的定义:https://zhidao.baidu.com/question/296950174.html
Session:以前服务端在浏览器这边留的是明文,引入session之后留下的是
暗文。
服务器端保存的键值对
{
asfdsfldsfd:{‘user’:’asdf’,’pws’:’asdf’}
}
Session的组件,Django是包含的.
图片对比:
代码参考:
后台:
from django.shortcuts import render,HttpResponse,redirect
from app import models
#Create your views here.
def test(request):
# models.UserInfo.objects.create(username='lidong',password='123789')
return HttpResponse('OK')
def login(request):
return render(request,'login.html')
def index(request):
if request.method == "GET":
return redirect('/login/')
else:
user = request.POST.get('uuu')
pwd = request.POST.get('ppp')
cnt = models.UserInfo.objects.filter(username=user,password=pwd).count()
import json
if cnt:
obj = HttpResponse(json.dumps('ok'))
# 服务器在这里留下一个cookie
request.session['username'] = user
request.session['password'] = pwd
return obj
else:
return HttpResponse(json.dumps('no'))
def soxfree(request):
#在登陆另外一个页面之前,先检查一下相应的cookie
cnt = request.session.get('username')
if cnt:
return render(request,'sox.html')
else:
return redirect('/login/')
前台:
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="{% static "js/bootstrap/css/bootstrap.css" %}">
<script src="{% static "js/jquery-3.2.1.min.js" %}"></script>
<script src="{% static "js/bootstrap/js/bootstrap.min.js" %}"></script>
</head>
<body>
<input type="text" name="username"><br>
<input type="password" name="password"><br>
<input type="button" name="提交">
</body>
<script>
$("input[type=button]").on('click',function(){
var username = $('input[name=username]').val()
var password = $('input[name=password]').val()
$.ajax({
url:'/index/',
type:'POST',
data:{'uuu':username,'ppp':password},
success:function(data){
data = JSON.parse(data)
if (data == 'ok'){
window.open('/soxfree/','_self')
}else
{
alert('用户名或者密码错误')
}
}
})
})
</script>
</html>
看来session就是一系列cookie的集合,并通过sessionID返回给客户端。
3、Ajax的方式
Ajax操作:
只要form表单提交,一定会刷新页面.
基于Ajax操作,要想成功之后跳转,只能是:js收到消息之后,在Js里面写段代码实现跳转,
而不能是redirect.
代码1:成功跳转百度,失败则进行提示
前端页面:
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="{% static "js/bootstrap/css/bootstrap.css" %}">
<script src="{% static "js/jquery-3.2.1.min.js" %}"></script>
<script src="{% static "js/bootstrap/js/bootstrap.min.js" %}"></script>
</head>
<body>
<h1>Ajax操作</h1>
<div>
<input type="text" name="user" id="user">
<input type="text" name="pwd" id="pwd">
{# 点击之后,如果还想发送,那我们就要依赖Ajax #}
{#给提交按钮增加事件:只要点提交,就偷偷的发送数值#}
<input id="btn" type="button" value="提交">
</div>
<script>
{#页面事件执行完之后将这行这个函数#}
$(function () {
bindBtn();
})
function bindBtn() {
$('#btn').click(function(){
var u = $('#user').val();
var p = $('#pwd').val();
{#获得完用户名和密码之后,我们要向后台发送数据,调用jquery的ajax方法去执行#}
$.ajax(
{
{# url貌似就是当前页面#}
url:'/aj/',
type:'POST',
{# 后台数据库如何拿到这个数值并进行匹配的呢?#}
data:{uuu:u,ppp:p},
{# 后台返回数据之后,我们的浏览器会自动执行某个函数,下面的data是服务端返回的数据#}
success:function(data){
if (data == "Error"){
alert("用户名或者密码错误!")
}else if(data == "OK")
{
location.href = "http://www.baidu.com"
}
}
}
)
})
}
</script>
</body>
</html>
后台页面:
def aj(request):
if request.method == "GET":
return render(request,'aj.html')
elif request.method == "POST":
"""
后台接收数据的方式和我们提交form表单的时候是一模一样的
"""
user = request.POST.get('uuu')
pwd = request.POST.get('ppp')
obj = models.UserInfo.objects.filter(username=user, password=pwd).first()
if obj:
# 登陆成功,跳转到后台管理,对于ajax提交,不能redirect,呵呵,meiyong
return HttpResponse("OK")
else:
#登陆失败,页面显示错误信息
return HttpResponse("Error")
改进后的代码:改进1
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="{% static "js/bootstrap/css/bootstrap.css" %}">
<script src="{% static "js/jquery-3.2.1.min.js" %}"></script>
<script src="{% static "js/bootstrap/js/bootstrap.min.js" %}"></script>
</head>
<body>
<h1>Ajax操作</h1>
<div>
<input type="text" name="user" id="user">
<input type="text" name="pwd" id="pwd">
{# 点击之后,如果还想发送,那我们就要依赖Ajax #}
{#给提交按钮增加事件:只要点提交,就偷偷的发送数值#}
<input id="btn" type="button" value="提交">
</div>
<script>
{#页面事件执行完之后将这行这个函数#}
$(function () {
bindBtn();
})
function bindBtn() {
$('#btn').click(function(){
var u = $('#user').val();
var p = $('#pwd').val();
{#获得完用户名和密码之后,我们要向后台发送数据,调用jquery的ajax方法去执行#}
$.ajax(
{
{# url貌似就是当前页面#}
url:'/aj/',
type:'POST',
{# 后台数据库如何拿到这个数值并进行匹配的呢?#}
data:{uuu:u,ppp:p},
{# 后台返回数据之后,我们的浏览器会自动执行某个函数,下面的data是服务端返回的数据#}
success:function(data){
{#将字符串反序列化成字典#}
var data_dict = JSON.parse(data)
if (data_dict.status){
location.href = "http://www.baidu.com";
}else{
alert(data_dict.error);
}
}
}
)
})
}
</script>
</body>
</html>
后台代码:
def aj(request):
if request.method == "GET":
return render(request,'aj.html')
elif request.method == "POST":
"""
后台接收数据的方式和我们提交form表单的时候是一模一样的
"""
user = request.POST.get('uuu')
pwd = request.POST.get('ppp')
obj = models.UserInfo.objects.filter(username=user, password=pwd).first()
ret = {'status':True,'error':None}
import json
if obj:
# 将字段序列化
return HttpResponse(json.dumps(ret))
else:
ret['status'] = False
ret['error'] = "用户名或者密码错误"
return HttpResponse(json.dumps(ret))
运行效果是一样的。
改进2:如何跳转到其他页面
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="{% static "js/bootstrap/css/bootstrap.css" %}">
<script src="{% static "js/jquery-3.2.1.min.js" %}"></script>
<script src="{% static "js/bootstrap/js/bootstrap.min.js" %}"></script>
</head>
<body>
<h1>Ajax操作</h1>
<div>
<input type="text" name="user" id="user">
<input type="text" name="pwd" id="pwd">
{# 点击之后,如果还想发送,那我们就要依赖Ajax #}
{#给提交按钮增加事件:只要点提交,就偷偷的发送数值#}
<input id="btn" type="button" value="提交">
</div>
<script>
{#页面事件执行完之后将这行这个函数#}
$(function () {
bindBtn();
})
function bindBtn() {
$('#btn').click(function(){
var u = $('#user').val();
var p = $('#pwd').val();
{#获得完用户名和密码之后,我们要向后台发送数据,调用jquery的ajax方法去执行#}
$.ajax(
{
{# url貌似就是当前页面#}
url:'/aj/',
type:'POST',
{# 后台数据库如何拿到这个数值并进行匹配的呢?#}
data:{uuu:u,ppp:p},
{# 后台返回数据之后,我们的浏览器会自动执行某个函数,下面的data是服务端返回的数据#}
success:function(data){
{#将字符串反序列化成字典#}
var data_dict = JSON.parse(data)
if (data_dict.status){
{# 这个时候能够跳转,但是没有登陆 #}
location.href = "/home/";
}else{
alert(data_dict.error);
}
}
}
)
})
}
</script>
</body>
</html>
后台部分代码:
def logout(request):
# 将当前用户的登录信息清空
request.session.clear()
return redirect('/login/')
def aj(request):
if request.method == "GET":
return render(request,'aj.html')
elif request.method == "POST":
"""
后台接收数据的方式和我们提交form表单的时候是一模一样的
"""
user = request.POST.get('uuu')
pwd = request.POST.get('ppp')
obj = models.UserInfo.objects.filter(username=user, password=pwd).first()
ret = {'status':True,'error':None}
import json
if obj:
# 将字段序列化
request.session['user'] = user
request.session['pwd'] = pwd
return HttpResponse(json.dumps(ret))
else:
ret['status'] = False
ret['error'] = "用户名或者密码错误"
return HttpResponse(json.dumps(ret))