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 url
from django.contrib import admin
from app01 import views
urlpatterns = [
    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 url
from django.contrib import admin
from app01 import views
urlpatterns = [
    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 url
from django.contrib import admin
from app01 import views
urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'^index/$',views.index),
    url(r'^login/$',views.login

views.py

from django.shortcuts import render,HttpResponse,redirect
from app01 import models
from 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)

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

  1. python 全栈开发，Day87(ajax登录示例,CSRF跨站请求伪造,Django的中间件,自定义分页)

    一.ajax登录示例 新建项目login_ajax 修改urls.py,增加路径 from app01 import views urlpatterns = [ path('admin/', admi ...

  2. 跨站请求伪造 | ajax

    一.简介 django为用户实现防止跨站请求伪造的功能,通过中间件 django.middleware.csrf.CsrfViewMiddleware 来完成.而对于django中设置防跨站请求伪造功 ...

  3. ajax向Django前后端提交请求和CSRF跨站请求伪造

    1.ajax登录示例 urls.py from django.conf.urls import url from django.contrib import admin from app01 impo ...

  4. Django框架 之 基于Ajax中csrf跨站请求伪造

    Django框架 之 基于Ajax中csrf跨站请求伪造 ajax中csrf跨站请求伪造 方式一 1 2 3 $.ajaxSetup({     data: {csrfmiddlewaretoken: ...

  5. csrf跨站请求伪造、csrf相关装饰器、auth认证模块、基于django中间件设计项目功能

    目录 csrf跨站请求网站 什么是csrf跨站请求网站 经典例子-钓鱼网站 模拟 如何避免这种现象(预防) 如何在django中解决这个问题 form表单 ajax csrf相关装饰器 FBV CBV ...

  6. ajax跨站请求伪造

    用ajax提交数据到后台: {#<!DOCTYPE html>#} <html lang="en"> <head> <meta chars ...

  7. Ajax csrf跨站请求伪造

    方式一: ///仅限js代码在HTML内//// $.ajaxSetup({ data: {csrfmiddlewaretoken: '{{ csrf_token }}' }, }); 方式二: // ...

  8. Django Ajax学习二之csrf跨站请求伪造

    方式1 $.ajaxSetup({ data: {csrfmiddlewaretoken: '{{ csrf_token }}' }, }); 方式2 # html文件from表单中<form& ...

  9. Spring-Security+Freemarker 开启跨域请求伪造防护功能

         CSRF简介--摘抄自<Spring实战(第4版)> 我们可以回忆一下,当一个POST请求提交到"/spittles"上时,SpittleController ...

随机推荐

  1. Regex Password Validation

    You need to write regex that will validate a password to make sure it meets the follwing criteria: A ...

  2. Win10系列：VC++媒体播放控制1

    在MediaElement控件中定义了用于控制视频播放的函数,如Play.Pause和Stop等函数.本小节将在20.6.1小节所新建的项目基础上继续来介绍如何为视频添加播放控制,并在最后一部分给出项 ...

  3. python-列表，元组，range

    # 列表# lst = ["光头强", 1, True, {}, (1, ), {123}, ["周杰伦",[], "周杰", " ...

  4. 【转】Java中static关键字用法总结

    1.     静态方法 通常,在一个类中定义一个方法为static,那就是说,无需本类的对象即可调用此方法 声明为static的方法有以下几条限制: · 它们仅能调用其他的static 方法. · 它 ...

  5. SpringWeb项目常用注解简单介绍

    注解分为两类: 一类是使用Bean,即是把已经在xml文件中配置好的Bean拿来用,完成属性.方法的组装:比如@Autowired , @Resource,可以通过byTYPE(@Autowired) ...

  6. S2 深入.NET和C#编程 笔试测试错题积累

    ---恢复内容开始--- <深入.NET平台和C#编程>内部测试题-笔试试卷错题积累 1: 1) 以下关于序列化和反序列化的描述错误的是( C). a) 序列化是将对象的状态存储到特定存储 ...

  7. [Linux]Linux下修改snmp协议的默认161端口

    一.Linux SNMP的配置 SNMP的简介和Linux下IPV4,IPV6地址的snmp协议开启可以参考上一个随笔:[Linux]CentOS6.9开启snmp支持IPV4和IPV6 二.修改默认 ...

  8. php随手记

    引用(&)是变量的别名,而不是指针,可用unset(变量名)把此变量的别名注销掉,等于没有声明此变量. @为错误抑制符,可以用在任何表达式前面. ``为命令操作符,可以执行系统命令. inst ...

  9. 开发框架DevExtreme全新发布v18.2.6|附下载

    DevExtreme Complete Subscription是性能最优的 HTML5,CSS 和 JavaScript 移动.Web开发框架,可以直接在Visual Studio集成开发环境,构建 ...

  10. C# 连接EXCEL 和 ACCESS

    97-2003版本 EXCEL Provider=Microsoft.Jet.OLEDB.4.0;Data Source=文件位置;Extended Properties=Excel 8.0;HDR= ...