13. django高级之ajax

一、ajax知识储备

1、什么是json？

- json指的是JavaScript对象表示法（JavaScript Object Notation）
- json是轻量级的文本数据交换格式
- json独立于语言和平台，json解释器和json库支持多种不同的编程语言
- json具有自我描述性，更易理解

2、stringify与parse方法

# JavaScript中关于json对象和字符串转换的两个方法：
	- JSON.parse():用于将一个JSON字符串转换成JavaScript对象（json只能识别双引号的字符串格式）
   		JSON.parse('{"name":"jack"}');
        
	- JSON.stringify():用于将JavaScript值转换成JSON字符串
        JSON.stringify({"name":"jack"})

3、和XML的比较

json格式有显著的优点：
	- 书写简单，可读性强；
    - 符合JavaScript原生语法，可以由届时引擎直接处理，不用另外添加解析代码，解析简单，占的空间小

二、AJAX简介

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

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

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

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

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

除了异步之外，还有一个就是：浏览器页面局部刷新（js的DOM操作）

优点：

- AJAX使用JavaScript技术向服务器 发送异步请求
- AJAX无须刷新整个页面（局部更新）

三、ajax的简单使用

# 1、原生js写ajax请求（写起来很复杂，而且需要考虑浏览器版本）
# 2、jquery封装好了一个ajax，我们直接调用jquery的方法，就可以发送ajax的请求
# 3、后期，前后端分离了，还可以继续使用jquery的ajax，axios更主流一些

模板：

$.ajax({
    url:'/add/',
    method:'post',
    data:{'a':$("#first").val(), 'b':$("#second").val()},
    success:function (data){
    	//成功触发
	},
    error:function (error) {
        //失败，触发
    }
})
# 默认清空下ajax会把{'a':$("#first").val(), 'b':$("#second").val()} 数据转成预处理数据 a=20$b=30,放到body中，编码默认使用的是urlencoded

四、ajax上传文件

1、http请求，body体中放文件内容，ajax本质就是发送http请求，所以他可以上传文件
2、两种上传文件的方式，form表单，ajax
3、固定模板
	var formdata=new FormData()
    formdata.append('myfile', $("#id_file")[0].files[0])
    # 还可以带数据
    $.ajax({
        url:'/uploadfile/',
        method:'post',
        //上传文件必须写这两句话：
        processData:false,  # 预处理数据
        contentType:false,	# 不指定编码，如果不写contentType，默认使用urlencoded
        data:formdata,		# formdata内部指定了编码，并且自行处理数据
        success:function (data){
            console.log(data)
        }
    })

views.py 中uploadfile函数：

from django.shortcuts import HttpResponse
def uploadfile(request):
    file = request.FILES.get('myfile')
    name = request.POST.get('name')
    print(name)
    with open(file.name, 'wb') as f:
        for line in file:
            f.write(line)
    return HttpResponse('上传成功')

五、ajax提交json数据

$.ajax({
    url:'/uploadjson/',  # url地址得写全
    method:'post',
    contentType:'application/json',
    //data必须是json格式的字符串
    
    data:JSON.stringify({name:$("#id_name1").val(),password:$('#id_password1').val()}),
    success:function (data) {
        //返回字符串类型，需要转成js的对象，(字典)
        console.log(typeof data)
        // 1、如果django返回的是HttpResponse，data就是json格式的字符串，需要自行转成字典        
        //var res=JSON.parse(data)
        //console.log(typeof res)
        //console.log(res.status)
        //console.log(res.msg)
        
        // 2、如果django返回的是JsonResponse，data就是字典
        console.log(typeof data)
        console.log(data.status)
        console.log(data.msg)
    }
})

views.py中uploadjson函数：

from django.shortcuts import render, HttpResponse
from django.http import JsonResponse
def uploadjson(request):
    data = request.body
    print(data)
    dic = {'status':100, 'msg':'成功'}
    
    import json
    return HttpResponse(json.dump(dic))
	# return JsonResponse(dic)  # 内部设置了编码将字典序列化

六、django内置序列化器（了解）

1、把对象转成json格式，json.dumps实现不了
2、django内置了一个东西，可以把对象转成json格式

from django.core import serializers
book_list = Book.objects.all()
ret = serializers.serialize("json", boo_list)  # ret就是json格式字符串

ll = []
for book in book_list:
    ll.append({'name':book.name, 'price':book.price})
   
import json
ret = json.dumps(ll)

return HttpResponse(ret)

for book in book_list:
ll.append({‘name’:book.name, ‘price’:book.price})

import json
ret = json.dumps(ll)

return HttpResponse(ret)