【Django】AJAX

时间：2018-12-25 21:09:53 阅读：232 评论：0 收藏：0 [点我收藏+]

JSON
AJAX简介
- AJAX常见应用场景
jQuery实现AJAX
JS实现AJAX
AJAX请求设置csrf_token
AJAX其它实例
- 上传文件实例
- 判断用户名是否已被注册

@
*
补充Django内置的两个装饰器方法：**

from django.views.decorators.csrf import csrf_exempt, csrf_protect
# csrf_exempt:给指定视图排除csrf校验    csrf_exempt:指定某个视图必须csrf校验

使用ensure_csrf_cookie()装饰器可以强制设置csrf到Cookie：

django.views.decorators.csrf import ensure_csrf_cookie

@ensure_csrf_cookie
def login(request):
    pass

DJango内置的序列化方法：

from django.core import serializers

def user_list(request):
    user_list = models.Userinfo.objects.all()
    ret = serializers.serialize(‘json‘, user_list)
    return HttpResponse(ret)

JSON

什么是JSON？

JSON指的是JavaScript对象表示法（JavaScript Object Notation）
JSON是轻量级的文本数据交换格式
JSON独立于语言
JSON具有自我描述性，更易理解

==JSON使用JavaScript语法来描述数据对象，但是JSON仍然独立于语言和平台==。JSON解释器和JSON库支持许多不同的编程语言.
技术分享图片
合格的json对象：

[‘one‘, ‘two‘, ‘three‘]
{‘one‘: 1, ‘two‘: 2, ‘three‘: 3}
{‘users‘: [‘zyk01‘, ‘zyk02‘]}
[{‘user‘: ‘zyk‘}, {‘sex‘: ‘boy‘}]

不合格的json对象：

"""属性名必须使用引号(反序列化后是双引号)"""
{name: ‘zyk‘, ‘sex‘: ‘oby‘}  

"""不能使用十六进制值"""
[16, 32, 64, 128, 0xFFF]

"""不能使用undefined"""
{‘name‘: ‘zyk‘, ‘age‘: undefined}

"""不能使用日期对象"""
{‘name‘: ‘zyk‘, ‘birthday‘: new Date(‘Fri, 26 Aug 2011 07:13:10 GMT‘

"""不能使用函数"""
{‘getName‘: function() {return this.name;}, ‘sex‘: ‘boy‘}

序列化 stringify

JavaScript中使用JSON的stringily方法进行序列化
技术分享图片
***

反序列化 parse

JavaScript中使用JSON的parse方法进行反序列化
技术分享图片
***

JSON与XML对比

JSON格式于2001年由Douglas Crockford提出，目的就是取代繁琐笨重的XML格式。

JSON格式有两个显著的优点：==书写简单、一目了然==；符合JavaScript原生语法，可以由解释引擎直接处理，不用另外添加解析代码。

因此，JSON迅速被接受，已经成为各大网络交换数据的标准格式，并被写入ECMAScript 5，成为标准的一部分。

对比：
用XML表示中国部分省市数据如下：

<?xml version="1.0" encoding="utf-8"?>
<country>
    <name>中国</name>
    <province>
        <name>黑龙江</name>
        <cities>
            <city>哈尔滨</city>
            <city>大庆</city>
        </cities>
    </province>
    <province>
        <name>广东</name>
        <cities>
            <city>广州</city>
            <city>深圳</city>
            <city>珠海</city>
        </cities>
    </province>
    <province>
        <name>台湾</name>
        <cities>
            <city>台北</city>
            <city>高雄</city>
        </cities>
    </province>
    <province>
        <name>新疆</name>
        <cities>
            <city>乌鲁木齐</city>
        </cities>
    </province>
</country>

用JSON表示如下：

{
    "name": "中国",
    "province": [{
        "name": "黑龙江",
        "cities": {
            "city": ["哈尔滨", "大庆"]
        }
    }, {
        "name": "广东",
        "cities": {
            "city": ["广州", "深圳", "珠海"]
        }
    }, {
        "name": "台湾",
        "cities": {
            "city": ["台北", "高雄"]
        }
    }, {
        "name": "新疆",
        "cities": {
            "city": ["乌鲁木齐"]
        }
    }]
}

由上面的两端代码可以看出，JSON简单的语法格式和清晰的层次结构明显要比XML容易阅读，并且在数据交换方面，由于JSON所使用的字符要比XML少得多，可以大大得节约传输数据所占用得带宽。

AJAX简介

AJAX（Asynchronous Javascript And XML）翻译成中文就是"==异步的Javascript和XML=="。即使用JavaScript语言与服务器进行交互，传输的数据为XML（当然，传输的数据不只是XML）。

AJAX不是新的编程语言，而是一种使用现有标准的新方法.

==AJAX最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容.==
这一个特点给用户的感觉是在不知不觉中完成请求和响应过程。

AJAX不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。

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

一个简单的示例

页面输入两个整数，通过AJAX传输到后端计算出结果并返回.

HTML页面代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="/static/jquery-3.3.1.js"></script>
    <title>AJAX局部刷新实例</title>
</head>
<body>
<input type="text" id="sign01"> +
<input type="text" id="sign02"> =
<input type="text" id="sign03">
<input type="button" value="计算" id="tag">
<script>
    $(‘#tag‘).click(function () {  {# ‘click‘是鼠标点击事件 #}
        $.ajax({
            url: ‘/ajax_add/‘, {# 请求的url地址 #}
            type: ‘GET‘,  {# 请求方式 #}
            ‘data‘: {
                sign01: $(‘#sign01‘).val(),
                ‘sign02‘: $(‘#sign02‘).val()
            },  {# 发送的数据 #}
            success: function (res) {
                $(‘#sign03‘).val(res);
            },  {# 回调函数(执行成功时被调用)  res:返回的数据 #}
        });
    });
    {# 里面所有的key都可以写成字符串 #}
</script>
</body>
</html>

视图页面代码：

from django.shortcuts import render
from django.http import JsonResponse


def ajax_demol(request):
    return render(request, ‘ajax_demol.html‘)


# 计算功能
def ajax_add(request):
    sign01 = request.GET.get(‘sign01‘)
    sign02 = request.GET.get(‘sign02‘)
    sign03 = int(sign01) + int(sign02)
    return JsonResponse(sign03, safe=False)  
    # JsonResponse方法默认只允许序列化dict类型的数据.
    # safe=False:将安全参数设置为False后，才可允许序列化非dict类型的数据.

urls页面配置：

from century01 import views

urlpatterns = [
    url(r‘^ajax_demol/$‘, views.ajax_demol),
    url(r‘^ajax_add/$‘, views.ajax_add),
]

AJAX常见应用场景

搜索引擎根据用户输入的关键字，自动提示检索关键字。

还有一个很重要的应用场景就是注册时用户名的查看。

其实这里就使用了AJAX技术，当文件框发生输入变化时，使用AJAX技术向服务器发送一个请求，然后服务器会把查询到的结果响应给浏览器，最后再把后端返回的结果展示出来。

整个过程中页面没有刷新，只是刷新页面中的局部位置而已.
当请求发出后，浏览器还可以进行其它操作，无需等待服务器的响应.

技术分享图片
当输入用户名后，把光标移动到其他表单项上时，浏览器会使用AJAX技术向服务器发出请求，服务器会查询名为lemontree7777777的用户是否存在，最终服务器返回true表示名为lemontree7777777的用户已经存在了，浏览器在得到结果后显示“用户名已被注册！”。

整个过程中页面没有刷新，只是局部刷新了.
在请求发出后，浏览器不用等待服务器响应结果就可以进行其它操作.
***

AJAX的优点

AJAX使用JavaScript技术向服务器发送异步请求；
AJAX请求无需刷新整个页面；
因为服务器响应内容不再是整个页面，而是页面中的部分内容，所以AJAX性能高；
***

$.ajax的参数

<script>
    $(‘#sign‘).on(‘click‘, function () {  {# ‘click‘是鼠标点击事件 #}
        $.ajax({
            
        {# 请求的URL地址 #}
            url: ‘/ajax_test/‘, 
            
        {# 请求的类型 #} 
            type: ‘POST‘, 
            
        {# 要发送的数据 #}
            data: {
                ‘name‘: ‘zyk‘,
                {# 如果不是字符串则需要序列化 #}
                ‘hobby‘: JSON.stringify([‘AJAX‘, ‘Django‘, ‘Python‘]),
            }, 
        {# 回调函数(成功时执行)  data:服务器返回的数据 #}
            success: function (data) {
                $(‘#sign00‘).val(data);
            },
            
        {# 回调函数(出错时执行)  data:服务器返回的数据 #}
            error: function (data) {
                alert(‘error‘);
            },
        });
    });
</script>

jQuery实现AJAX

最基本的jQuery发送AJAX请求示例：

HTML文件代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="/static/jquery-3.3.1.js"></script>
    <title>AJAX 测试</title>
</head>
<body>
<button id="ajaxTest">AjAX 测试</button>
<script>
    $(‘#ajaxTest‘).click(function () {   {# ‘click‘是鼠标点击事件 #}
        $.ajax({
            url: ‘/ajax_test/‘,  {# 请求的url地址 #}
            type: ‘POST‘,  {# 请求的方式 #}
            data: {
                user: ‘zyk‘,
                pwd: ‘user@zyk‘,
            },  {# 发送的数据 #}
            success: function (data) {
                {# 弹出警告框 #}
                alert(data)
            },  {# 回调函数(执行成功时被调用)  data:返回的数据 #}
        });
    });
</script>
</body>
</html>

视图文件代码：

from django.shortcuts import render, HttpResponse
from century01 import models


def ajax_test(request):
    if request.method == ‘POST‘:
        user = request.POST.get(‘user‘)
        pwd = request.POST.get(‘pwd‘)
        ret = ‘is ok‘ if models.Userinfo.objects.filter(name=user, pwd=pwd) else ‘is no‘
        return HttpResponse(ret)
    return render(request, ‘ajax_test.html‘)

JS实现AJAX

<script>
    var b2 = document.getElementById("b2");
    b2.onclick = function () {
        // 原生JS
        var xmlHttp = new XMLHttpRequest();
        xmlHttp.open("POST", "/ajax_test/", true);
        xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        xmlHttp.send("username=q1mi&password=123456");
        xmlHttp.onreadystatechange = function () {
            if (xmlHttp.readyState === 4 && xmlHttp.status === 200) {
                alert(xmlHttp.responseText);
            }
        };
    };
</script>

AJAX请求设置csrf_token

视图文件代码如下：

from django.shortcuts import render, HttpResponse
from century01 import models

def ajax_test(request):
    if request.method == ‘POST‘:
        user = request.POST.get(‘user‘)
        pwd = request.POST.get(‘pwd‘)
        ret = ‘is ok‘ if models.Userinfo.objects.filter(name=user, pwd=pwd) else ‘is no‘
        return HttpResponse(ret)
    return render(request, ‘ajax_test.html‘)

方法一

通过获取隐藏的input标签中的csrfmiddlewaretoken的值，==放到data中发送==.
技术分享图片

<body>
{% csrf_token %}
<button id="ajaxTest">AjAX 测试</button>
<script>
    $(‘#ajaxTest‘).click(function () {
        $.ajax({
            url: ‘/ajax_test/‘,  {# 请求的url地址 #}
            type: ‘POST‘,  {# 请求的方式 #}
            data: {
                user: ‘zyk‘,
                pwd: ‘user@zyk‘,
                // 获取隐藏的input标签中的csrfmiddlewaretoken的值
                csrfmiddlewaretoken: $("[name = ‘csrfmiddlewaretoken‘]").val()
            },  {# 发送的数据 #}
            success: function (data) {
                {# 弹出警告框 #}
                alert(data);
            },  {# 回调函数(执行成功时被调用)  data:返回的数据 #}
        });
    });
</script>
</body>

方法二

通过获取隐藏的input标签中的csrfmiddlewaretoken的值，==放置在请求头中发送==.

<body>
{% csrf_token %}
<button id="ajaxTest">AjAX 测试</button>
<script>
    $(‘#ajaxTest‘).click(function () {
        $.ajax({
            url: ‘/ajax_test/‘,
            type: ‘POST‘,
            // 获取隐藏的input标签中的csrfmiddlewaretoken的值
            headers: {‘X-CSRFToken‘: $(‘[name="csrfmiddlewaretoken"]‘).val(),},
            data: {
                user: ‘zyk‘,
                pwd: ‘user@zyk‘},
            success: function (data) {
                alert(data);
            },
        });
    });
</script>
</body>

方法三

或者自己写一个getCookie方法的js文件（直接复制）：

function getCookie(name) {
    var cookieValue = null;
    if (document.cookie && document.cookie !== ‘‘) {
        var cookies = document.cookie.split(‘;‘);
        for (var i = 0; i < cookies.length; i++) {
            var cookie = jQuery.trim(cookies[i]);
            // Does this cookie string begin with the name we want?
            if (cookie.substring(0, name.length + 1) === (name + ‘=‘)) {
                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                break;
            }
        }
    }
    return cookieValue;
}
var csrftoken = getCookie(‘csrftoken‘);

function csrfSafeMethod(method) {
  // these HTTP methods do not require CSRF protection
  return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
}

$.ajaxSetup({
  beforeSend: function (xhr, settings) {
    if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
      xhr.setRequestHeader("X-CSRFToken", csrftoken);
    }
  }
});

然后在网页文件中直接导入上面的js文件即可：

<body>
{% csrf_token %}
<button id="ajaxTest">AjAX 测试</button>
// 导入上面的文件：
<script src="/static/ajax_setup.js"></script>
<script>
    $(‘#ajaxTest‘).click(function () {
        $.ajax({
            url: ‘/ajax_test/‘,
            type: ‘POST‘,
            data: {
                user: ‘zyk‘,
                pwd: ‘user@zyk‘},
            success: function (data) {
                alert(data);
            },
        });
    });
</script>
</body>

注意：
如果使用从cookie中取csrftoken的方式（本文中未使用），需要确保cookie存在csrftoken值。

如果你的视图渲染的HTML文件中没有包含 {% csrf_token %}，Django可能不会设置CSRFtoken的cookie。

这个时候需要使用ensure_csrf_cookie()装饰器强制设置csrf到Cookie：

django.views.decorators.csrf import ensure_csrf_cookie

@ensure_csrf_cookie
def login(request):
    pass

更多细节详见：Django官方文档中关于CSRF的内容

AJAX其它实例

上传文件实例

视图函数：

from django.views.decorators.csrf import ensure_csrf_cookie

@ensure_csrf_cookie  # 强制设置csrf到Cookie
def upload(request):
    # 判断是否为ajax请求
    if request.is_ajax():
        print(123)
        file = request.FILES.get(‘file‘)
        with open(file.name, ‘wb‘) as f:
            [f.write(i) for i in file.chunks()]
        return HttpResponse(‘is ok‘)
    return render(request, ‘upload.html‘)

body标签：

<body>
<input type="file" id="my_file">
<button id="tag">上传</button>
<script src="/static/jquery-3.3.1.js"></script>
<script src="/static/ajax_setup.js"></script>
// 导入自己写的getCookie方法的js文件
<script>
    $(‘#tag‘).click(function () {
        var form_obj = new FormData;
        form_obj.append(‘file‘, $(‘#my_file‘)[0].files[0]);
        $.ajax({
            url: ‘/upload/‘,
            type: ‘post‘,
            processData: false,  //
            contentType: false,  //
            data: form_obj,
            success: function (res) {
                alert(res);
            },
        });
    });
</script>
</body>

判断用户名是否已被注册

网页文件如下：

<body>
{% csrf_token %}
<p>
    名称
    <input id="sign01" type="text">
    <span id="sign03"></span>
</p>
<p>密码<input id="sign02" type="text"></p>
<p><button>注册</button></p>
<script src="/static/jquery-3.3.1.js"></script>
<script>
    var $user = $(‘#sign01‘);
    var $pwd = $(‘#sign02‘);
    var $csrfmiddlewaretoken = $("[name=‘csrfmiddlewaretoken‘]");
    var $span = $(‘#sign03‘);

    $user.on(‘blur‘, function () {
        $.ajax({
            usl: ‘/login01/‘,
            type: ‘POST‘,
            data: {
                name: $user.val(),
                pwd: $pwd.val(),
                csrfmiddlewaretoken: $csrfmiddlewaretoken.val(),
            },
            success: function (data) {
                if (data === ‘0‘) {
                    $span.text("名称已被注册！");
                    $span.css({‘color‘: ‘red‘});
                } else {
                    $span.text("通过！");
                    $span.css({‘color‘: ‘green‘});
                }
            },
        });
    });
</script>
</body>

视图文件代码：

from django.shortcuts import render, HttpResponse

def reg(request):
    if request.method == ‘POST‘:
        user = request.POST.get(‘name‘)
        # 名称存在返回0
        ret = 0 if models.Userinfo.objects.filter(name=user) else None
        return HttpResponse(ret)
    return render(request, ‘login01.html‘)

【Django】AJAX

标签：ota djang 点击注意 cpp ref info rtc 搜索引擎

原文地址：https://www.cnblogs.com/zyk01/p/10176328.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行

【Django】AJAX

JSON

序列化 stringify

反序列化 parse

JSON与XML对比

AJAX简介

一个简单的示例

AJAX常见应用场景

AJAX的优点

$.ajax的参数

jQuery实现AJAX

JS实现AJAX

AJAX请求设置csrf_token

方法一

方法二

方法三

AJAX其它实例

上传文件实例

判断用户名是否已被注册