django 使用Ajax方式POST JSON数据包

 

 示例1：

js:

function SaveAction(){
    //点击 保存按键
    var senddata = {"type":"A", "host":"www", "resolution_line":"0", "data":"172.16.2.3", "mx":"5", "ttl":"600"}
    $.ajax({
        url: "/dns/add.html",
        type: "POST",        //请求类型
        data: {"data":senddata},
        dataType: "json",   // 这里指定了 dateType 为json后，服务端响应的内容为json.dumps(date)，下面 success 的callback 数据无需进行JSON.parse(callback)，已经是一个对象了，如果没有指定dateType则需要执行 JSON.parse(callback)
        success: function (callback) {
            //当请求执行完成后，自动调用
            //callback, 服务器返回的数据
            console.log(callback);
        },
        error: function () {
            //当请求错误之后，自动调用
        }
    });
}

 

 

 

django 后台 view:

 

def record_add(req):
    """
    添加解析记录
    :param req:
    :return:
    """
    if req.method == 'POST':
        type = req.POST.get('data[type]')
        host = req.POST.get('data[host]')
        resolution_line = req.POST.get('data[resolution_line]')
        data = req.POST.get('data[data]')
        mx = req.POST.get('data[mx]')
        ttl = req.POST.get('data[ttl]')
        print(type, host, resolution_line, data, mx, ttl)
        return HttpResponse('hehe')
    else:
        return HttpResponse('use POST request method please.')

 

 

示例2：

JS

 

function SaveAction(){
    //点击 保存按键
    var _type = $(".modal-body select[name=type]").val();
    var _host = $(".modal-body input[name=host]").val();
    var _resolution_line = $(".modal-body select[name=resolution_line]").val();
    var _data = $(".modal-body input[name=data]").val();
    var _mx = $(".modal-body input[name=mx]").val();
    var _ttl = $(".modal-body select[name=ttl]").val();
    var senddata = {"type":_type, "host":_host, "resolution_line":_resolution_line, "data":_data, "mx":_mx, "ttl":_ttl }
    $.ajax({
        url: "/dns/add.html",
        type: "POST",        //请求类型
        //contentType: "application/json; charset=utf-8",
        data: senddata,
        dataType: "json",
        success: function (callback) {
            //当请求执行完成后，自动调用
            //arg, 服务器返回的数据
            console.log(callback);
        },
        error: function () {
            //当请求错误之后，自动调用
        }
    });
}

 

 

 

 

 

django view

def record_add(req):
    """
    添加解析记录
    :param req:
    :return:
    """
    if req.method == 'POST':
        type = req.POST.get('type')
        host = req.POST.get('host')
        resolution_line = req.POST.get('resolution_line')
        data = req.POST.get('data')
        mx = req.POST.get('mx')
        ttl = req.POST.get('ttl')
        print(type, host, resolution_line, data, mx, ttl)
        return HttpResponse('hehe')
    else:
        return HttpResponse('use POST request method please.')

 

 

 

示例3： 

js

function SaveAction(){
    //点击 保存按键
    var _type = $(".modal-body select[name=type]").val();
    var _host = $(".modal-body input[name=host]").val();
    var _resolution_line = $(".modal-body select[name=resolution_line]").val();
    var _data = $(".modal-body input[name=data]").val();
    var _mx = $(".modal-body input[name=mx]").val();
    var _ttl = $(".modal-body select[name=ttl]").val();
    var senddata = {"type":_type, "host":_host, "resolution_line":_resolution_line, "data":_data, "mx":_mx, "ttl":_ttl }


    $.post("/dns/add.html", {'data':JSON.stringify(senddata)},function(callback){
        JSON.parse(callback);
    });
}

 

$.post 源码：

jQuery.each( [ "get", "post" ], function( i, method ) {
    jQuery[ method ] = function( url, data, callback, type ) {
        // shift arguments if data argument was omitted
        if ( jQuery.isFunction( data ) ) {
            type = type || callback;
            callback = data;
            data = undefined;
        }

        return jQuery.ajax({
            url: url,
            type: method,
            dataType: type,
            data: data,
            success: callback
        });
    };
});

 

 

 

 

 

 

django view

def record_add(req):
    """
    添加解析记录
    :param req:
    :return:
    """
    if req.method == 'POST':
        data = req.POST.get('data')     # str: {"type":"A","host":"www","resolution_line":"0","data":"172.16.2.3","mx":"5","ttl":"600"}
        data = json.loads(data)  # 字典：{'resolution_line': '0', 'data': '172.16.2.3', 'host': 'www', 'mx': '5', 'ttl': '600', 'type': 'A'}return HttpResponse('hehe')
    else:
        return HttpResponse('use POST request method please.')

 

 

示例4

js $.ajax post提交 json数据

function SaveAction(){
    //点击 保存按键
    var _type = $(".modal-body select[name=type]").val();
    var _host = $(".modal-body input[name=host]").val();
    var _resolution_line = $(".modal-body select[name=resolution_line]").val();
    var _data = $(".modal-body input[name=data]").val();
    var _mx = $(".modal-body input[name=mx]").val();
    var _ttl = $(".modal-body select[name=ttl]").val();
    var senddata = {"type":_type, "host":_host, "resolution_line":_resolution_line, "data":_data, "mx":_mx, "ttl":_ttl }
    $.ajax({
        url: "/dns/add.html",
        type: "POST",        //请求类型
        contentType: "application/json; charset=utf-8",
        data: JSON.stringify(senddata),
        dataType: "json",
        success: function (callback) {
            //当请求执行完成后，自动调用
            //arg, 服务器返回的数据
            console.log(callback);
        },
        error: function () {
            //当请求错误之后，自动调用
        }
    });
}

 

 

 

 

 

django view

import json

def record_add(req):
    """
    添加解析记录
    :param req:
    :return:
    """
    if req.method == 'POST':
        body_data = req.body    # 获取http请求体数据
        print(body_data)        # b'{"type":"A","host":"www","resolution_line":"0","data":"172.16.2.3","mx":"5","ttl":"600"}'
        print(type(body_data))    # <class 'bytes'>
        body_data_str = str(body_data, encoding="utf8")     # bytes 转 str
        data = json.loads(body_data_str)
        print(data['type'])
        return HttpResponse('hehe')
    else:
        return HttpResponse('use POST request method please.')

 

示例5：

建议使用这种方式

js

function SaveAction(){
    //点击 保存按键
    var _type = $(".modal-body select[name=type]").val();
    var _host = $(".modal-body input[name=host]").val();
    var _resolution_line = $(".modal-body select[name=resolution_line]").val();
    var _data = $(".modal-body input[name=data]").val();
    var _mx = $(".modal-body input[name=mx]").val();
    var _ttl = $(".modal-body select[name=ttl]").val();
    var senddata = {"type":_type, "host":_host, "resolution_line":_resolution_line, "data":_data, "mx":_mx, "ttl":_ttl }
    $.ajax({
        url: "/dns/add.html",
        type: "POST",        //请求类型
        data: {'data': JSON.stringify(senddata)},
        dataType: "json",
        success: function (callback) {
            //当请求执行完成后，自动调用
            //arg, 服务器返回的数据
            console.log(callback);
        },
        error: function () {
            //当请求错误之后，自动调用
        }
    });

}

 

 

 js post提交源数据：

 

 

 django view

def record_add(req):
    """
    添加解析记录
    :param req:
    :return:
    """
    if req.method == 'POST':
        data = req.POST.get('data')
        print(type(data))       # <class 'str'>
        data = json.loads(data)    # str json序列化

        return HttpResponse('hehe')
    else:
        return HttpResponse('use POST request method please.')