码迷,mamicode.com
首页 > Web开发 > 详细

AJAX

时间:2019-11-30 00:21:57      阅读:237      评论:0      收藏:0      [点我收藏+]

标签:and   中文   click   加载   作用   键值   默认   text   data   

JSON

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

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

对应关系

JavaScript Python
stringify dumps
parse loads

Ajax

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

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

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

复习:

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

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

xml

可扩展标记语言

基本语法

<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中的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)
        }
    })
})

序列化

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

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

标签:and   中文   click   加载   作用   键值   默认   text   data   

原文地址:https://www.cnblogs.com/agsol/p/11960725.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!