Django框架——进阶之AJAX

<script>
$("#b1").on("click", function () {
  // 点击 id是b1的按钮要做的事儿
    var i1 = $("#i1").val();
    var i2 = $("#i2").val();
    // 往后端发数据
    $.ajax({
        url: "/ajax_add/",
        type: "get",
        data: {"i1": i1, "i2": i2},
        success: function (arg) {
            {#alert(arg);#}　　　　//arg 是后端经过各种业务逻辑计算之后返回的数据
            // 把返回的结果填充到 id是i3的input框中
            $("#i3").val(arg);
        }
    })
});

</script>

<td>{{ p.birthday|date:'Y-m-d' }}</td>  //使用date:'Y-m-d' 可以格式化时间格式
结果如下:

Django框架——进阶之AJAX

如果不加的话显示如下：

Django框架——进阶之AJAX

ajax使用在前后端交互的时候要注意的转换事项：

例如：一个html里面的jQuery的ajax如下（看看错误在哪里）：

$.ajax({
url: "/test/",
type: "post",
data: {"name": "小黑", "sb":[1,2,3]},　　　　//错误：可以看到此时的data 的sb的value 是一个列表，在这里从前端的jQuery的ajax是转不了这个value到后端的，因为相对于data来说，

　　　　　　　　　　　　　　　　　　　//已经是一个多层的数据类型了，这是不行的，所以这里需要通过jQuery的JSON将sb的value转换成为字符串才行！！修改如下：

　　　　　　　　　　　　　　　　　　　　//方法一：data: {"name": "小黑", "sb":JSON.stringify([1,2,3])},　　　　只要value不是字符串和数字的，都需要用JSON.stringify()进行序列化转为JSON

　　　　　　　　　　　　　　　　　　　　　　　//方法二：在data之前添加 traditional: true,的属性也可以实现sb自动JSON化　。但是如果，sb的value是[[1,2,3] , [4,5,6]]双层或多层的话，ajax返回到

　　　　　　　　　　　　　　　　　　　　　　//python后端的值还是有问题，应该给是["1,2,3", "4,5,6"]　

success: function (data) {
alert(data);
}
})

后端的view.py文件写如下（找出错误在哪里）：

def test(request):
    if request.method == "POST":
        name = request.POST.get("name")
        sb = request.POST.getlist("sb")
        print(name)
        print(sb, type(sb))

        ret = {　　　　　　　　　　　　　　　　　　　　　　//错误：可以看到这里的返回值是ret，而ret的多层格式的一个字典类型，如果经过下面的HttpResponse返回不了这个数据段到前端的ajax的，因为，在网络传输中是不能这样传输的，
            "status": 0,　　　　　　　　　　　　　　　　//所以需要，在这里进行JSON格式的转换，如下：
            "data": [
                {"name": "张三", "age": 18},
                {"name": "李四", "age": 28},
            ]
        }
        return HttpResponse(ret)

    return render(request, "test.html")

-----------------------------------------------------------------------------------------------------------------------

　　　　ret = {　　　　　　　　　　　　　　　　　　　　　　
            "status": 0,　　　　　　　　　　　　　　　　
            "data": [
                {"name": "张三", "age": 18},
                {"name": "李四", "age": 28},
            ]
        }

　　　　ret_str = json.dumps(ret)　　　　　　//在python后端，将多层的数据类型序列化为JSON格式，之后再进行传输，这还没有完，因为，在前端还需要对从这里转出去JSON进行反序列化，如下：
　　　　return HttpResponse(ret_str)

-----------------------------------------------------------------------------------------------------------------

看看：在前端中，就需要添加dataType:"json"类型或者使用JSON.parse()反序列化
$("#b1").on("click", function () {
    $.ajax({
        url: "/test/",
        type: "post",
        dataType: "json",　　　　　　　　　　　　　　//方法一：这个表示将从后端传来的JSON数据默认反序列化解析
        traditional: true,　　
        data: {"name": "小黑", "sb":[1,2,3,4]},
        success: function (data) {
            // 把后端返回的数据反序列化成JS中的对象
            // var data = JSON.parse(data);　　　　//方法二：这个表示直接将后端返回的数据直接解析
            if (data.status === 0){
                // 这次请求成功
                alert(data.data);
            }else {
                // 请求出错
                alert(data.error);
            }
        }
    })
});

Django框架——进阶之AJAX

相关推荐