Ajax 操作

内容概要

• json 格式数据
• Ajax 简介
• Ajax 基本语法
• 前后端传输的数据编码格式
• jQuery 实现 Ajax
• js 实现 ajax
• ajax 请求设置 csrf_token

内容详细

json 格式数据

• JSON 指的是 JavaScript 对象表示法（JavaScript Object Notation）

JSON 使用 JavaScript 语法来描述数据对象，但是 JSON 仍然独立于语言和平台。JSON 解析器和 JSON 库支持许多不同的编程语言

正确的 json 对象：（双引号）

["one", "two", "three"]
{ "one": 1, "two": 2, "three": 3 }
{"names": ["张三", "李四"] }
[ { "name": "张三"}, {"name": "李四"} ]　

错误的json对象：

{ name: "张三", 'age': 32 }  // 属性名必须使用双引号
[32, 64, 128, 0xFFF] // 不能使用十六进制值
{ "name": "张三", "age": undefined }  // 不能使用undefined
{ "name": "张三",
  "birthday": new Date('Fri, 26 Aug 2011 07:13:10 GMT'),
  "getName":  function() {return this.name;}  // 不能使用函数和日期对象
}

js 中的序列化：注意 json只认双引的字符串格式

JSON.stringify({"name":"Tonny"})

反序列化：

JSON.parse('{"name":"Howker"}')

Ajax 简介

特点： 异步提交、局部跟新

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

优点：

• AJAX使用JavaScript技术向服务器发送异步请求；
• AJAX请求无须刷新整个页面；
• 因为服务器响应内容不再是整个页面，而是页面中的部分内容，所以AJAX性能高；
• 两个关键点:1.局部刷新，2.异步请求

AJAX（Asynchronous Javascript And XML）翻译成中文就是“异步的Javascript和XML”。即使用Javascript语言与服务器进行异步交互

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

Ajax 基本语法（基本使用）

在前端创建三个input框，前两个接收用户输入的数字，然后按提交按钮，将两个数字以post请求方式发送给后端，后端将两数相加，把结果再返回给ajax的回调函数，在回调函数中把结果渲染到第三个input框中。

前端：

'''sum.html'''
'''html结构'''
<div class="container">
    <div class="row">
        <h1 class="text-center">Ajax</h1>
        <div class="col-md-6 col-lg-offset-3 ">
            <input type="text" id="d1" class="active form-control">
            <p class="text-center">+</p>
            <input type="text" id="d2" class="sucess form-control">
            <p class="text-center">=</p>
            <input type="text" id="d3" class="info form-control">
            <br>
            <button id='btn' class="btn btn-success btn-block">calculate</button>
        </div>
    </div>
</div>
'''js实现'''
<script>
    {#绑定点击事件#}
    $('#btn').click(function () {
        {#获取input元素内输入的值#}
        var num1 = $('#d1').val()
        var num2 = $('#d2').val()

        $.ajax({
            url: '',  //ajax请求的地址
            method: 'post', //请求方式
            data: {num1: num1, num2: num2}, //携带参数
            success: function (data) {  //服务端成功返回会回调，执行匿名函数
                console.log(data)
                $('#d3').val(data)
            }
        })
    })
</script>

后端：

# urls.py 文件
'''urls.py'''
path('', views.test_Ajax)

# views.py 文件
'''views.py'''
from django.shortcuts import render, HttpResponse

def test_Ajax(request):
    if request.method == 'POST':
        num1 = int(request.POST.get('num1')) # 获取前端提交的数据
        num2 = int(request.POST.get('num2'))
        print(num1, num2)
        return HttpResponse(num1 + num2) # 返回给前端
    return render(request, 'sum.html')

注意大坑：

• 如果要绑定事件使用 Ajax 来提交数据，不要给from 表单中 提交按钮和按钮绑定事件，否则会提交两次数据
• 一般是给 form 表单中 按钮来绑定事件提交 Ajax。
• 如果使用了ajax，后端一般把数据处理成字典的形式，再返回JsonResponse，前后端分离后，后端一般只需把数据以json格式返回给前端

前后端传输的数据编码格式

主要编码格式：

get 请求数据编码格式：

直接放在 url 的?号后面，urlencoded格式

http://www.baidu.com/book?username=elijah&password=123

post 请求数据编码格式：

• urlencoded 数据编码格式：username=elijah&password=123 这种普通键值对，django会把它解析到 request.POST中
• formdata 编码格式：普通键值对还是会解析到 request.POST中，而文件对象则解析到 request.FILES中
• Json 编码格式：会保存到 request.data 中，注意form表单无法提交json格式，需要使用ajax提交

jQuery 实现 Ajax

注意： 前后端数据交互的时候，一定要确保编码格式要与真正的数据格式是一样的，

发送普通的 urlencoded 编码格式：

例子入上文 Ajax 基本语法 所示，只需要在 Ajax 的 data 参数定义好要传输的数据键值对即可

{#绑定点击事件#}
$('#btn').click(function () {
    {#获取input元素内输入的值#}
    var num1 = $('#d1').val()
    var num2 = $('#d2').val()

    $.ajax({
        url: '',  //ajax请求的地址
        method: 'post', //请求方式
        data: {num1: num1, num2: num2}, //携带参数
        success: function (data) {  //服务端成功返回会回调，执行匿名函数
            console.log(data)
            $('#d3').val(data)
        }
    })
})

发送 formdata 编码格式：

一般以 formdata 的形式传输，数据中既包含普通键值对也包含文件对象的数据，此时需要借助 javascript 的内置模块 FormData 来先对数据进行处理。

并且传输数据时，需要告诉浏览器不要对数据类型进行定义（contentType:false）和处理（processData:false）

前端

<form action="" method="post" enctype="multipart/form-data">
    <label for="username">username:</label>
    <input type="text" class="form-control" id="username" name="username">
    <div class="form-group">
        <label for="f1">头像：
            <img src="" alt="">
        </label>
        <input type="file" name="file" id="f1">
    </div>
    <input type="button" id="ajax_btn">
    <input type="submit" class="btn btn-primary btn-lg pull-left">
</form>

js 部分：

<script>
    $('#ajax_btn').on('click', function () {
        // 实例化FormData对象
        let formDataObj = new FormData()
        // 添加普通数据
        formDataObj.append('username', 'elijah')
        // 添加文件数据
        formDataObj.append('file', $('#f1')[0].file[0])
        // ajax
        $.ajax({
            url:"",
            type: 'post',
            data: formDataObj,

            // 提示浏览器不要修改传输的数据,和不定义数据类型
            processData:false,
            contentType:false,

            success:function (arg){
                console.log(arg)
            }
        })
    })
</script>

后端

后端用 request.FILES 方法接收文件数据（是个字典），再用.get() 方法获取文件对象，并保存到目录中，文件路径保存在表的文件字段中。

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

def login(request):
    request.get_full_path_info()
    if request.method == "POST":
        args = {'code': 1000, 'msg': ''}
        files_obj = request.FILES.get('file')   # 获取的是文件对象
        print(files_obj.name)   # 获取文件名字
        with open(files_obj.name, 'wb') as f:
            for line in files_obj:      # 文件对象可以循环读取并写入
                f.write(line)
        args['msg'] = '保存成功'
        return JsonResponse(args)
    return render(request, 'login.html')

发送 Json 编码格式：

需要注意：

• contentType参数要指定成： application/json
• data 参数中的数据需要序列化成真正的 json 格式
• django 后端不会自动处理 json 格式数据，需要自行在 request.body 中获取 json数据并 json.loads()自动转为字符串并反序列化成普通字典。

前端

$('#ajax_btn').on('click', function () {
    // ajax
    $.ajax({
        url:"",
        type: 'post',
        data: JSON.stringify({'username': 'elijah', 'age': 18}),  // 序列化为真正的json格式数据
        contentType: 'application/json',  // 指定编码格式为 json
        success:function (arg){
            console.log(arg)
        }
    })
})

后端

import json

def try_ajax(request):
    if request.method == 'POST':
        json_bytes = request.body
        json_dict = json.loads(json_bytes)  # 自动将二进制自动编码并反序列化

AJAX请求设置csrf_token

在 Django 中，前端向后端发送请求数据需要通过 csrf 跨站请求伪造认证，ajax 发送请求时可以有以下三种设置 csrf_token 的方法

方式1

通过获取隐藏的input标签中的csrfmiddlewaretoken值，放置在data中发送。

$.ajax({
  url: "/cookie_ajax/",
  type: "POST",
  data: {
    "username": "Tonny",
    "password": 123456,
    "csrfmiddlewaretoken": $("[name = 'csrfmiddlewaretoken']").val()  // 使用JQuery取出csrfmiddlewaretoken的值，拼接到data中
  },
  success: function (data) {
    console.log(data);
  }
})

方式2

模板语法快速书写

$.ajax({
  url: "/cookie_ajax/",
  type: "POST",
  data: {
    "username": "Tonny",
    "password": 123456,
    "csrfmiddlewaretoken": '{{ csrf_token }}' // 模板语法快速获取csrf_token值，不过记得在外加上引号 '' 变成字符串传输
  },
  success: function (data) {
    console.log(data);
  }
})

方式3

在静态文件夹 static 中创建js文件 mysetup.js ，写入以下代码，每次ajax发送数据前导入该文件即可

自己写一个getCookie方法

// mysetup.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()方法为ajax请求统一设置
$.ajaxSetup({
  beforeSend: function (xhr, settings) {
    if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
      xhr.setRequestHeader("X-CSRFToken", csrftoken);
    }
  }
});

使用：

使用前导入 mysetup.js 文件 即可
<script src='/static/js/mysetup.js'></script>
<script>
    $('#ajax_btn').on('click', function () {
        $.ajax({
            url:"",
            type: 'post',
            data: {'username': 'elijah', 'age': 18},
            success:function (arg){
                console.log(arg)
            }
        })
    })
</script>

js 实现 ajax（了解）

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);
      }
    };
  };

Django内置的serializers

该模块中的功能是可以把 ORM 取出来的数据对象直接 序列化成json格式返送给前端

def ser(request):
    #拿到用户表里面的所有的用户对象
    user_list=models.User.objects.all()
    #导入内置序列化模块
    from django.core import serializers
    #调用该模块下的方法，第一个参数是你想以什么样的方式序列化你的数据
    ret=serializers.serialize('json',user_list)
    return HttpResponse(ret)

SweetAlert插件示例

点击下载Bootstrap-sweetalert项目。

 $("#b55").click(function () {
        swal({
                    title: "你确定要删除吗？",
                    text: "删除可就找不回来了哦！",
                    type: "warning",
                    showCancelButton: true,  // 是否显示取消按钮
                    confirmButtonClass: "btn-danger",  // 确认按钮的样式类
                    confirmButtonText: "删除",  // 确认按钮文本
                    cancelButtonText: "取消",  // 取消按钮文本
                    closeOnConfirm: false,  // 点击确认按钮不关闭弹框
                    showLoaderOnConfirm: true  // 显示正在删除的动画效果
                },
                function () {
                    var deleteId = 2;
                    $.ajax({
                        url: "/delete_book/",
                        type: "post",
                        data: {"id": deleteId},
                        success: function (data) {
                            if (data.code === 0) {
                                swal("删除成功!", "你可以准备跑路了！", "success");
                            } else {
                                swal("删除失败", "你可以再尝试一下！", "error")
                            }
                        }
                    })
                });
    })

上面这个二次确认的动态框样式，你也可以直接应用到你的项目中

提醒事项：

1.上述的样式类部分渲染的样式来自于bootstrap中，所有建议在使用上述样式时，将bootstrap的js和css也导入了，这样的情况下，页面效果就不会有任何问题

2.弹出的上述模态框中，可能字体会被图标掩盖一部分，可通过调整字体的上外边距来解决