（22）Ajax的基本使用(实现登录功能和局部刷新以及防止跨站请求伪造攻击)

Ajax的作用

前后端分离的项目，需要交互，就要通过Ajax来完成交互

AJAX（Asynchronous Javascript And XML）翻译成中文就是“异步Javascript和XML”。即使用Javascript语言与服务器进行异步交互，传输的数据为XML（当然，传输的数据不只是XML,现在更多使用json数据）

Ajax的特性

1、同步交互：客户端发出一个请求后，需要等待服务器响应结束后，才能发出第二个请求

2、异步交互：客户端发出一个请求后，无需等待服务器响应结束，就可以发出第二个请求

3、局部刷新

AJAX除了异步的特点外，还有一个就是：浏览器页面局部刷新；（这一特点给用户的感受是在不知不觉中完成请求和响应过程）

PS：Ajax是一门前端的语言，和任何语言都可以做前后端交互

Ajax 的简单使用，发送get请求

urls

from django.conf.urls import urlfrom django.contrib import adminfrom app01 import viewsurlpatterns = [    url(r'^admin/', admin.site.urls),    url(r'^index/$',views.index),    url(r'^ajax/$',views.ajax_test)]

views.py

from django.shortcuts import render,HttpResponse,redirect

# Create your views here.

def index(request):    return render(request,'index.html')

def ajax_test(request):    return HttpResponse('ok')

index.py

<!DOCTYPE html><html><head>    <meta charset="UTF-8">{#导入css用link#}    <link rel="stylesheet" href="/static/bootstrap-3.3.7-dist/bootstrap-3.3.7-dist/css/bootstrap.css">{#导入js用script#}    <script src="/static/jquery-3.3.1.js"></script>    <title>我是index页面</title></head><body>    <h1>我的index页面</h1>    <p><button id="btn">点我看美女</button></p></body>

<script>

 //jquery封装了一个方法，直接使用ajax方法，参数是一个字典形式

    $('#btn').click(function () {//点击按钮后往后台发ajax请求获取数据        $.ajax({            url:'/ajax/',   //向一个地址发送请求            type:'get',  //这个就是向上面地址发送的请求类型            success:function (data) {  //当请求成功获取数据后相应这个函数,匿名函数里一定要有一个参数data,服务器返回的数据都放在data里                alert(data),                console.log(data)  //这里是向终端返回数据            }        }) 

    })</script></html>

Ajax 简单使用，发送post请求

urls

from django.conf.urls import urlfrom django.contrib import adminfrom app01 import viewsurlpatterns = [    url(r'^admin/', admin.site.urls),    url(r'^index/$',views.index),    url(r'^ajax/$',views.ajax_test)]

views

from django.shortcuts import render,HttpResponse,redirect

# Create your views here.

def index(request):    return render(request,'index.html')

def ajax_test(request):    if request.method == 'GET':        return HttpResponse('GET----------OK')    elif request.method == 'POST':        name = request.POST.get('name')        age = request.POST.get('age')        return HttpResponse(name + age)

index

<!DOCTYPE html><html><head>    <meta charset="UTF-8">    <link rel="stylesheet" href="/static/bootstrap-3.3.7-dist/bootstrap-3.3.7-dist/css/bootstrap.css">    <script src="/static/jquery-3.3.1.js"></script>    <title>我是index页面</title></head><body>    <h1>我的index页面</h1>    <p><button id="btn">点我看美女</button></p></body>

<script>    $('#btn').click(function () {//点击按钮后往后台发ajax请求获取数据        $.ajax({            url:'/ajax/',               type:'post',             data:{'name':'lqz','age':18},  //post请求需要携带数据，数据就放在变量data里            success:function (data) {                alert(data),                console.log(data)              }        }) 

    })</script></html>

ajax 实现登录功能，前后端数据库数据获取以及局部刷新

urls.py

from django.conf.urls import urlfrom django.contrib import adminfrom app01 import viewsurlpatterns = [    url(r'^admin/', admin.site.urls),    url(r'^index/$',views.index),    url(r'^login/$',views.login

views.py

from django.shortcuts import render,HttpResponse,redirectfrom app01 import modelsfrom django.http import JsonResponse  #这个模块就是向前端返回json格式数据# Create your views here.

def index(request):    return render(request,'index.html')

def login(request):'''从数据库获取数据'''    dic = {'status': 100,'msg':None}  #这个就是自定的状态码成功默认100，登录成功或失败都会放入这个字典返回给前端    if request.method == 'POST':print(request.POST)  #这个在做防止跨站请求伪造的时候要写，然后把后面的都注释掉　　　　 name = request.POST.get('name')        pwd = request.POST.get('pwd')        print(name,pwd)# 从数据库获取数据        user = models.User.objects.filter(name=name,pwd=pwd).first()# 这里逻辑就是成功和失败都会修改将字典中增加值，然后用json格式返回        if user:            dic['status'] = 100            dic['msg'] = '登录成功'        else:            dic['status'] = 101            dic['msg'] = '用户名或密码错误'        return JsonResponse(dic)

index.py

<!DOCTYPE html><html><head>    <meta charset="UTF-8">    <link rel="stylesheet" href="/static/bootstrap-3.3.7-dist/bootstrap-3.3.7-dist/css/bootstrap.css">    <script src="/static/jquery-3.3.1.js"></script>    <title>我是index页面</title>    <style>        #errors {            color: red;            margin: 0 0 0 10px;        }    </style></head><body>    <h1>使用ajax实现登录功能</h1>{#input里面为了让ajax获取到输入框输入的内容，需要设定id名 #}　　 {% csrf_token %}  #这个就是通过中间件防止跨站请求伪造攻击的，在页面的请求中加入一个随机的字符串    <p>用户名：<input type="text" name="'name" id="name"></p>    <p>密码：<input type="password" name="pwd" id="pwd"></p>    <button id="btn">点击登录</button><span id="errors"></span></body>

<script>//获取按钮，id就是#，如果是class就是.    $('#btn').click(function () {        $.ajax({            url:'/login/',            type:'post',//取出输入框内中 写入的内容$('#name').val(),id就是#，class就是.            data:{'name':$('#name').val(),'pwd':$('#pwd').val()，'csrfmidlewaretoken':{{ csrf_token}}},  #上面登录框加了scrf，这里的括号里要携带csrf的随机码到后台            success:function (data) {                console.log(data)//这里用if通过登陆吗判断登录成功与否                if (data.status==100){//登录成功，则跳转至指定网页                    //用前端的js代码跳转至指定的网页,location.href指定一个地址，则会跳转至指定的地址                    location.href = 'http://www.baidu.com'                }else{//朝id为errors的标签中写入数 据,这个就是局部刷新                    $('#errors').text(data.msg)                }            }        }) 

    })</script></html>

models.py

from django.db import models

# Create your models here.

class User(models.Model):    '''建立一张表'''    name = models.CharField(max_length=32)    pwd = models.CharField(max_length=32)

转载于:https://www.cnblogs.com/shizhengquan/p/10546633.html

（22）Ajax的基本使用(实现登录功能和局部刷新以及防止跨站请求伪造攻击)相关推荐

python 全栈开发，Day87(ajax登录示例,CSRF跨站请求伪造,Django的中间件,自定义分页)...
python 全栈开发,Day87(ajax登录示例,CSRF跨站请求伪造,Django的中间件,自定义分页) 一.ajax登录示例新建项目login_ajax 修改urls.py,增加路径 fro ...
csrf跨站请求伪造，CBV添加装饰器，auth认证模块，基于django中间件设计项目功能
文章目录 csrf跨站请求伪造 csrf的定义 csrf的分类 csrf的攻击过程 csrf的攻击条件举例说明 Django提供的解决策略 csrf相关装饰器 FBV CBV 方法一(直接在类中的某 ...
MVC安全：ajax表单提交切记加上AntiForgeryToken防止跨站请求伪造 (CSRF)攻击
因为项目使用的是mvc的框架,前端使用的是metronic bootstrap框架,所以在处理表单的提交时就用了ajax的方式进行提交,这样前端js也方便封装,实现代码复用. 先看看js端的相关代码 ...
小程序朋友圈，点赞 ,评论，发布动态，功能，局部刷新数据之 -----评论
小程序朋友圈功能之 ----->评论后台返回的数据 {code:0, data:{{"id": "174", // 动态的id"conten ...
第九章php与数据交互,利用ajax实现与php数据交互，并局部刷新页面
本文主要有以下几个要点: ajax的基本语法结构 jQuery基本语法 json数组基本结构 ajax回调函数中的json数组解析及局部刷新 php基本语法 ajax与php的对接 php中post数 ...
JQ加AJAX 加PHP实现网页登录功能
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 前端代码 <!DOCTYPE HTML> <html><head>< ...
网络安全-已解密的登录请求，会话标识未更新，跨站点请求伪造
这些没有那么麻烦,一天就搞定了.所以简单记录一下. 已解密的登陆请求是非常简单的,随便找个浏览器,火狐谷歌都行.打开F12找到网络就可以非常清楚的看到这里是明文密码.虽然这里是客户端,还没有到传输阶 ...
Django，Ajax，Vue实现文章评论功能
Django评论评论复杂的地方在于需要实现点击提交评论后评论内容需要立刻出现在下面,还要保持页面位置不变,所以提交后不能整体刷新页面,因为刷新以后页面肯定在最上面,而评论一般都在最下面,所以要用到A ...
项目整合微信扫码登录功能
项目整合微信登录功能一.准备工作 https://open.weixin.qq.com 1.注册 2.邮箱激活 3.完善开发者资料 4.开发者资质认证准备营业执照,1-2个工作日审批.300元 5 ...

（22）Ajax的基本使用(实现登录功能和局部刷新以及防止跨站请求伪造攻击)

（22）Ajax的基本使用(实现登录功能和局部刷新以及防止跨站请求伪造攻击)相关推荐

最新文章

热门文章