深入解析Ajax
来源：互联网 发布：淘宝和农村淘宝的区别 编辑：程序博客网 时间：2024/06/16 15:55
博客核心内容：Ajax
1、Cookie是什么
2、Session是什么
3、Ajax是什么
1、Cookie:在浏览器上面保存的键值对. 应用：用户登录 、投票
代码：
from django.shortcuts import render,redirect,HttpResponsefrom 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 objdef 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,redirectfrom 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))
阅读全文
3 1
- 深入解析Ajax
- 深入解析Ajax——系列（一）
- AJAX 解析
- 深入解析Ajax（$.post和$.get的主要区别）——系列（二）
- 深入理解Ajax原理
- 深入理解Ajax原理
- 深入理解ajax
- 深入理解Ajax原理
- 深入理解Ajax原理
- Ajax深入学习笔记
- 深入理解Ajax原理
- 深入理解Ajax原理
- 深入理解Ajax
- Ajax之深入了解
- Ajax深入理解
- jquery ajax $.ajax()用法解析
- 深入解析 ATL
- js 函数深入解析
- mysql数据库外键约束无用
- 点滴学习Linux --- Vim 代码块缩进快捷键
- 畅通工程
- Spark程序模型
- Java判断字符串是否以数字开头
- 深入解析Ajax
- 类型com.itextpdf.text.List不带有参数类型
- Nginx
- 玩转卷积
- 安装配置 flannel
- j a v a 基 础 知 识：构 造 函 数
- 微信小程序之小程序上线
- 一个简单的案例带你入门Dubbo分布式框架
- java中获取时间的几种方法
