<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' 可以格式化时间格式
结果如下:
如果不加的话显示如下:
ajax使用在前后端交互的时候要注意的转换事项:
1.
例如:一个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);
}
})
2.
后端的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);
}
}
})
});