django AJAX

目录：

1. 回顾JSON
2. AJAX异步的Javascript和XML
3. 基于jquery的AJAX
4. AJAX发送json格式数据
5. AJAX发送文件

回顾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;}  // 不能使用函数和日期对象
}

stringify与parse方法

# JSON.parse(): 用于将一个 JSON 字符串转换为 JavaScript 对象(json只认双引的字符串格式)

JSON.parse('{"name":"Howker"}');
JSON.parse('{name:"Stack"}') ;   // 错误
JSON.parse('[18,undefined]') ;   // 错误

# JSON.stringify(): 用于将 JavaScript 值转换为 JSON 字符串。

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

回到目录

AJAX异步的Javascript和XML

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

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

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

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

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

AJAX常见应用场景
很重要的应用场景就是注册时候的用户名的查重。

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

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

AJAX特点

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

回到目录

基于jquery的AJAX

基本格式

$("#b1").on("click", function () {
    $.ajax({
      url:"/ajax_add/",
      type:"GET",
      data:{"i1":$("#i1").val(),"i2":$("#i2").val(),"hehe": JSON.stringify([1, 2, 3])},
      success:function (data) {
        $("#i3").val(data);
      }
    })
  })

AJAX请求如何设置csrf_token

不论是ajax还是谁，只要是向我Django提交post请求的数据，都必须校验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

$('#b1').click(function () {
    $.ajax({
       url:'',
       type:'post',
       {#data:{'name':'jason','csrfmiddlewaretoken':$('input[name="csrfmiddlewaretoken"]').val()},#}
       data:{'name':'jason','csrfmiddlewaretoken':'{{ csrf_token }}'},
        success:function (data) {
            alert(data)
        }
    })
})

2.发送json格式数据
前端代码：

{#ajax发送json格式数据#}
$('#b1').click(function () {
    $.ajax({
        url: '/json/',
        type: 'post',
        data: JSON.stringify({'name': 'jason', 'password': '123'}),  // 前端转json格式
        contentType: 'application/json',
        success: function (data) {
            alert(data)
        }
    })
})

后端代码：

def json(request):
    if request.method == 'POST':
        print(request.POST)  # 针对json格式不做任何处理 不会放到request.POST中
        print(request.body)  # 原始数据
        import json
        res = json.loads(request.body.decode('utf-8'))
        print(res,type(res))
    return HttpResponse('OK')

3.ajax发送文件
需要借助于内置对象FormData

前端代码：

// ajax发送文件
$('#b1').click(function () {
    // 先生成一个内置对象
    var formData = new FormData();
    // 以添加键值对的方式 放formdata中添加数据
    // 获取文件input框中对应为文件对象 固定语法  $('#myfile')[0].files[0]
    // 注意 formdata不单单可以传文件 也可以传普通的键值对符合urlencoded编码格式的数据
    formData.append('myfile', $('#myfile')[0].files[0]);
    formData.append('username', 'jason');
    $.ajax({
        url: '/json/',
        type: 'post',
        data: formData,
        // ajax发送文件需要记住的参数
        processData: false,  // 不要处理formdata格式数据
        contentType: false,  // 不需要指定任何编码  因为formdata自带编码
        success: function (data) {
            alert(data)
        }
    })
})

后端代码：

def json(request):
    if request.method == 'POST':
        print(request.FILES)  # 获取前端传输的文件

        # 获取文件对象  你可以直接把它当成 文件句柄   with open(...) as f的那个f
        file_obj = request.FILES.get('myfile')
        print(file_obj.name)  # 查看文件名
        with open(file_obj.name,'wb') as f:
            for line in file_obj:
                f.write(line)
    return HttpResponse('OK')

回到目录