侧边栏壁纸
博主头像
AI研究僧

hycj89@163.com

  • 累计撰写 1,899 篇文章
  • 累计创建 179 个标签
  • 累计收到 1 条评论
标签搜索

目 录CONTENT

文章目录

Django依据content-type处理ajax请求的不同方式

AI研究僧
2019-05-07 / 0 评论 / 1 点赞 / 575 阅读 / 2,028 字

说明:仅处理 post,put,delete请求,get请求不在本文描述

代码

前端发送js对象

// jquery默认的content-type是 application/x-www-form-urlencoded,按以下方式发送后端调用POST方法即可接收,如果有小程序调用后端接口,可能默认的content-type是 application/json,需要将其改成application/x-www-form-urlencoded后端才能使用POST接收处理
<input type="text" name="name" id="name">
$.ajax({
        type: 'post',
        url: '/withtag_ajax/',
        data: {name: $("#name").val()},  // data直接是js对象
        success: function (data) {
            $('#info').text(data.msg)
        }
    }
)

后端代码

def withtag_ajax(request):
    print(request.POST)  # 输出<QueryDict: {'name': ['django']}>
    return JsonResponse({'code': 1})

此种方式直接使用django的request.POST即可处理

前端发送json字符串

<input type="text" name="name" id="name">
$.ajax({
        type: 'post',
        url: '/withtag_ajax/',
        data: JSON.stringify({name: $("#name").val()}),  // 转换成json字符串
        contentType: "application/json",  // 指定发送到后端数据类型是json字符串
        success: function (data) {
            $('#info').text(data.msg)
        }
    }
)

后端代码

def withtag_ajax(request):
    # json.loads用途:将 包含JSON文档的`str`,`bytes`或`bytearray`实例 反序列化为Python对象。
    ret = json.loads(request.body)
    print(ret)  #  {'name': 'django'} 字典对象
    return JsonResponse({'code': 1, 'msg': 'success'})

如果前端指定发送json字符串,后端就这么接收即可。

注意:前端如果发送data是json字符串,而又未指定contentType为application/json,也就是使用其默认值application/x-www-form-urlencoded,那么后端是无法处理的,无论是request.body.decode('utf-8')还是 request.POST接收到的都是<QueryDict: {'{"name":"django"}': ['']}>;使用默认值,就直接发送js对象即可。

前端发送文件与form表单数据

<form id="myform">
    用户名:<input type="text" name="name" id="name">
    <input type="file" id="file">
    <a id="submit">提交</a>
</form>
// 为jquery添加序列化form表单的功能
$.prototype.serializeObject = function () {
    var obj = new Object();
    $.each(this.serializeArray(), function (index, param) {
        if (!(param.name in obj)) {
            obj[param.name] = param.value;
        }
    });
    return obj;
};

$("#submit").click(function () {
    var formdata = new FormData();
    formdata.append('aaa', $('#file')[0].files[0]);  // 文件数据
    formdata.append('data', JSON.stringify($("#myform").serializeObject()));  // form表单数据
    console.log(JSON.stringify($("#myform").serializeObject()))
    console.log($("#myform").serializeObject())
    $.ajax({
            type: 'post',
            url: '/withtag_ajax/',
            data: formdata,
            processData: false,  // tell jquery not to process the data,必须
            contentType: false, // tell jquery not to set contentType,必须
            success: function (data) {
                $('#info').text(data.msg)
            }
        }
    )
})

后端代码

def withtag_ajax(request):
    print(request.POST)  # <QueryDict: {'data': ['{"name":"django"}']}>
    data = request.POST.get('data')  # json字符串,需要使用json.loads()转换为字典对象
    print(request.FILES.get('aaa'))  # 文件对象,注意名称和前端保持一致
    return JsonResponse({'code': 1, 'msg': 'success'})

请求方式为put,delete时,传递json字符串

<input type="text" name="name" id="name">
$.ajax({
        type: 'put',
        url: '/withtag_ajax/',
        data: JSON.stringify({name: $("#name").val()}),  // 转换成json字符串
        contentType: "application/json",  // 指定发送到后端数据类型是json字符串
        success: function (data) {
            $('#info').text(data.msg)
        }
    }
)

后端代码

def withtag_ajax(request):
    print(request.body)  # b'{"name":"django"}'
    print(json.loads(request.body))  # {'name': 'django'}
    return JsonResponse({'code': 1, 'msg': 'success'})

请求方式为put,delete时,传递js对象

$.ajax({
        type: 'put',
        url: '/withtag_ajax/',
        data: $("#myform").serializeObject(),
        success: function (data) {
            $('#info').text(data.msg)
        }
    }
)

后端代码

def withtag_ajax(request):
    print(request.body)  # b'name=django'
    print(QueryDict(request.body.decode('utf-8')))  # <QueryDict: {'name': ['django']}>
    return JsonResponse({'code': 1, 'msg': 'success'})

综上所述,当为post请求时,可根据前端传递的是js对象还是json字符串,后端使用不同的方式接收;当为put请求时,前端传递json字符串时,处理方式和post雷同,传递js对象时,需要手动转换为QueryDict对象

以上几种情况后端代码分别通过request.bodyrequest.POST 取数据
可通过判断 request.META["CONTENT_TYPE"] 进行辨别,如果是 application/json 就按request.body,如果是 application/x-www-form-urlencoded,就按 request.POST,使得后端更健壮

ajax常用参数说明:

async

类型:Boolean

默认值: true。默认设置下,所有请求均为异步请求。如果需要发送同步请求,请将此选项设置为 false。

注意,同步请求将锁住浏览器,用户其它操作必须等待请求完成才可以执行。

beforeSend(XHR)

类型:Function

发送请求前可修改 XMLHttpRequest 对象的函数,如添加自定义 HTTP 头。

XMLHttpRequest 对象是唯一的参数。

这是一个 Ajax 事件。如果返回 false 可以取消本次 ajax 请求。

data

类型:String

发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。查看 processData 选项说明以禁止此自动转换。必须为 Key/Value 格式。如果为数组,jQuery 将自动为不同值对应同一个名称。如 {foo:[“bar1”, “bar2”]} 转换为 ‘&foo=bar1&foo=bar2’。

dataType

类型:String

预期服务器返回的数据类型。如果不指定,jQuery 将自动根据 HTTP 包 MIME 信息来智能判断,比如 XML MIME 类型就被识别为 XML。在 1.4 中,JSON 就会生成一个 JavaScript 对象,而 script 则会执行这个脚本。随后服务器端返回的数据会根据这个值解析后,传递给回调函数。可用值:

"xml": 返回 XML 文档,可用 jQuery 处理。
"html": 返回纯文本 HTML 信息;包含的 script 标签会在插入 dom 时执行。
"script": 返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了 "cache" 参数。注意:在远程请求时(不在同一个域下),所有 POST 请求都将转为 GET 请求。(因为将使用 DOM 的 script标签来加载)
"json": 返回 JSON 数据 。
"jsonp": JSONP 格式。使用 JSONP 形式调用函数时,如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名,以执行回调函数。
"text": 返回纯文本字符串

contentType

类型:String

默认值: “application/x-www-form-urlencoded”。发送信息至服务器时内容编码类型。

默认值适合大多数情况。如果你明确地传递了一个 content-type 给 $.ajax() 那么它必定会发送给服务器(即使没有数据要发送)。

success

类型:Function

请求成功后的回调函数。

参数:由服务器返回,并根据 dataType 参数进行处理后的数据;描述状态的字符串。

这是一个 Ajax 事件。

type

类型:String

默认值: “GET”)。请求方式 (“POST” 或 “GET”), 默认为 “GET”。注意:其它 HTTP 请求方法,如 PUT 和 DELETE 也可以使用,但仅部分浏览器支持。

url

类型:String

默认值: 当前页地址。发送请求的地址。

error

类型:Function

默认值: 自动判断 (xml 或 html)。请求失败时调用此函数。

有以下三个参数:XMLHttpRequest 对象、错误信息、(可选)捕获的异常对象。

如果发生了错误,错误信息(第二个参数)除了得到 null 之外,还可能是 “timeout”, “error”, “notmodified” 和 “parsererror”。

这是一个 Ajax 事件。

更多参数见:http://www.w3school.com.cn/jquery/ajax_ajax.asp

博主关闭了所有页面的评论