AJAX

JSON

json 指的是JavaScript对象表示法(JavaScript object notation)

使用JavaScript语法来描述数据对象,又可以独立于语言和平台.

对应关系

JavaScript	Python
stringify	dumps
parse	loads

Ajax

特点:

异步提交,局部刷新

AJAX(asynchronous JavaScript and XML) 异步的JavaScript和xml

最大优点就是在不重新加载整个页面的情况下,可以于服务器交换数据并更新部分网页内容.

AJAX不需要任何浏览器插件,只需要用户允许JavaScript在浏览器上执行.

复习:

同步交互:客户端发出一个请求后,需要等待服务器响应后,才可以发出第二个请求.

异步交互:客户端发出一个请求后,无需等待服务器响应,就可以发出第二个请求.

xml

可扩展标记语言

基本语法

基于Jquery的ajax

<script>
    $.ajax({
        url:'',  // 数据提交的后端地址,不写就是往当前页面提交,也可以写后缀,也可以写全称,跟actions一样
        type:'post',  // 提交请求方式  默认是get请求
        data:{'i1':$('#d1').val(),'i2':$('#d2').val()},  // 提交的数据
        success:function (data) {  // 形参data就是异步提交之后后端返回结果
        $('#d3').val(data)  // 回调机制需要做的事情
        }
    })
</script>

一旦使用ajax,redirect,HttpResponse,rendent都不再作用于页面,而是与ajax中的function(data)异步回调函数交互.

form表达发送数据的编码方式

1.form表单默认的编码方式是urlencoded
Content-Type: application/x-www-form-urlencoded
    urlencoded所对应的数据格式
        username=jason&password=123
        django后端针对urlencoded数据 会自动解析并且帮你封装到request.POST中

2.form表单发送文件 编码格式 multipart/form-data
Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryhjKCHQHDmcE62iMQ
针对formdata格式的数据 你在浏览器上是无法查看到

3.form表单无法发送json格式的数据  你要想法 你只能借助于ajax

注意

django后端只要你的数据满足urlencoded格式
username=jason&password=123
就会自动帮你解析到request.POST中
如果你是一个文件对象django后端也会自动识别帮你放到request.FILES中

ajax发送数据的编码方式

1.ajax默认的编码方式 urlencoded
Content-Type: application/x-www-form-urlencoded; charset=UTF-8
ajax默认的编码格式也是urlencoded 也就意味着后端django也是将数据解析到request.POST中
2.ajax发送文件
借助于内置对象  new
该对象即可以携带文件数据 同样也支持普通的键值对
$('#d1').click(function () {
    // 先生成一个内置对象
    var MyFormData = new FormData();
    // 1. 先添加普通的键值
    MyFormData.append('username','jason');  // 添加了一组普通的简直对
    MyFormData.append('password','123');
    // 2. 添加文件数据
    MyFormData.append('myfile',$('#d2')[0].files[0]);  // 如何获取input框中文件对象$('#d1')[0].files[0]
    $.ajax({
        url:'',
        type:'post',
        data:MyFormData,  #1

        // 发送文件必须要指定的两个参数
        contentType:false,  //不适用任何编码MyFormData对象内部自带编码 django后端能够识别  #2
        processData:false,  // 不要处理数据  #3

        success:function (data) {

        }

    })
})
3.ajax传输json格式数据
Content-Type: application/json
{"username":"jason","password":"123"}
django后端针对json格式的数据 不会做任何处理 数据怎么来的 只会原封不动的放到request.body中需要你自己手动处理
	$('#d1').click(function () {
	$.ajax({
		url:'',
		type:'post',
		contentType:'application/json',  # 1.注意点1
		data:JSON.stringify({'username':'jason','password':'123'}),  # 2.注意点2
		success:function (data) {
			alert(123)
		}
	})
})

注意:

发送数据的编码方式和后端接收的格式要一致!!!

总结

前后点数据传输编码格式

form表单和ajax默认的编码方式都是urlencoded

urlencoded

数据格式:username=agsol&password=123

django针对符合urlencoded编码格式的数据,会自动解析并放入request.POST中

formdata

form表单发送文件必须要指定的编码格式.

该编码格式既可以发送文件也可以发送普通的键值对.

django后端自动识别,将内部符合urlencoded编码格式的数据,自动解析并放入request.POST中

将文件类型的数据,自动解析并封装到request.FILES中

application/json

目前只有ajax可以发送json的数据,form表单不支持

序列化

目的:将数据整合成一个大号字典的形式,方便数据的交互.

drf django restframework

from app01 import models
from django.core import serializers
# 序列化目的  将数据整合成一个大字典形式 方便数据的交互
def zzz(request):
    user_queryset = models.User.objects.all()
    # [{username:...,password:...,hobby:...,},{},{},{}]
    # user_list = []
    # for data in user_queryset:
    #     user_list.append(
    #         {'username':data.username,
    #          'password':data.password,
    #          'gender':data.get_gender_display(),
    #
    #          }
    #     )
    res = serializers.serialize('json',user_queryset)//使用序列化模块完成上面功能
    return HttpResponse(res)
>>>
[{"model": "app01.user", "pk": 1, "fields": {"username": "jason", "password": 123, "gender": 1}}, {"model": "app01.user", "pk": 2, "fields": {"username": "egon", "password": 321, "gender": 2}}, {"model": "app01.user", "pk": 3, "fields": {"username": "tank", "password": 444, "gender": 3}}, {"model": "app01.user", "pk": 4, "fields": {"username": "oscar", "password": 666, "gender": 4}}]

格式化网站:bejson 格式化校验之后:

[{
	"model": "app01.user",
	"pk": 1,
	"fields": {
		"username": "jason",
		"password": 123,
		"gender": 1
	}
}, {
	"model": "app01.user",
	"pk": 2,
	"fields": {
		"username": "egon",
		"password": 321,
		"gender": 2
	}
}, {
	"model": "app01.user",
	"pk": 3,
	"fields": {
		"username": "tank",
		"password": 444,
		"gender": 3
	}
}, {
	"model": "app01.user",
	"pk": 4,
	"fields": {
		"username": "oscar",
		"password": 666,
		"gender": 4
	}
}]

AJAX与sweetalter

CDN:<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>

下载到本地:https://github.com/lipis/bootstrap-sweetalert

使用方法:用啥粘啥

基本语法

<script>
	$(.cancel).click(function(){
        swal("cnm",warning)
    })
</script>

注意:

ajax进行前后端交互,通常后端会返回给ajax一个字典.

在后端可以使用request.is_ajax来判断前端是否为ajax