day55 Django JsonResponse json 弹框
ajax上传文件
ajax主要是 js 代码，对 HTML 的改变不大，只是实当增加一些 id 属性，以便更容易找到目标标签：
{% csrf_token %}
用户名:<input type="text" name="username">
头像: <input type="file" name="file_obj">
<input type="submit" id="btn">
使用 ajax 上传文件时，需要修改一些 js 配置。首先，文件数据不能以普通的自定义对象保存，而是需要使用 new FormData 语句创建一个 form data 对象。使用 append 命令将一个个键值对插入到对象中。此外，还需要将 processData 和 contentType 的值设为 false，这时使用 ajax 上传文件的固定搭配，提示 ajax 不要对数据进行加工操作：
$('#btn').click(function () {
var formdata = new FormData();
var uname = $('[name="username"]').val();
// var file_obj = $('[name="file_obj"]').val(); //"C:fakepath .jpg" 拿到的文件的本地路径
var f_obj = $('[name="file_obj"]')[0].files[0] ; // 这是文件对象，注意是files而不是file
formdata.append('username',uname); // 将数据添加到formdata对象中
formdata.append('file_obj',f_obj);
formdata.append('csrfmiddlewaretoken',$('[name="csrfmiddlewaretoken"]').val());
$.ajax({
url:'/upload/',
type:'post',
// 上传文件时的固定搭配 formdata
processData:false,
contentType:false,
data:formdata,
// data:{uname:uname,file_obj:f_obj,'csrfmiddlewaretoken':$('[name="csrfmiddlewaretoken"]').val()},
success:function (res) {
console.log(res)
}
})
})
至于视图函数，如果参数没有变化，可以完全不需要修改。
JsonResponse
json
json，JavaScript Object Notation，JS对象标记，是一种通用性极强的轻量级数据交互格式。其基础数据格式与 Python 中的基本数据格式比较如下：
在 JSON 中，并不能表示所有的 Python 数据类型，比如，datetime 类型的数据就无法表示。我们可以通过重写 JSON 编码的方式，实现对时间的序列化：
import json
from datetime import datetime
from datetime import date
#对含有日期格式数据的json数据进行转换
class JsonCustomEncoder(json.JSONEncoder):
def default(self, field):
if isinstance(field,datetime):
return field.strftime('%Y-%m-%d %H:%M:%S')
elif isinstance(field,date):
return field.strftime('%Y-%m-%d')
else:
return json.JSONEncoder.default(self,field)
d1 = datetime.now()
dd = json.dumps(d1,cls=JsonCustomEncoder)
print(dd)
在JS中，同样可以使用 json。JS 与 Python 间使用 json 进行数据交互的方式为：
JsonResponse
Django 封装了 JsonResoponse 类，将其配合 ajax 使用，可以实现传输诸如字典之类的数据：
from django.http import JsonResponse
def data(request):
if request.method == 'GET':
d1 = {'name':'chao','age':18}
# d1_str = json.dumps(d1)
# return HttpResponse(d1_str,content_type='application/json')
return JsonResponse(d1)
# 干了上面两步,序列化以及加content_type响应头
# 这样,ajax在处理数据时会自动将json数据反序列化,那么
return JsonResponse(d1,safe=False)
需要注意的是，如果jsonresponse的数据不是字典，需要加上safe参数。
我们在js中可以直接接收并使用传递过来的数据，这个res就是反序列化之后的数据了，直接可以使用：
success:function(res){
console.log(res)
}
SweetAlert
可以在https://github.com/t4t5/sweetalert下载道SweetAlert。
sweetalert 是一个弹窗框架，其核心部件存放在 dist 文件夹中。导入方式与 bootstrap 类似。
$(".delete_btn").on("click", function () {
// console.log($(this).attr('xxoo'));
var ths = $(this);
swal({
title: "are you sure?",
text: "滚!",
type: "warning",
showCancelButton: true,
confirmButtonClass: "btn-danger",
confirmButtonText: "再见",
cancelButtonText: "容我三思",
closeOnConfirm: false,
},
function () {
// console.log($(this));
var deleteId = ths.attr('xxoo'); // 要删除的记录的id
console.log('>>>>>',deleteId);
$.ajax({
url: "/book/swal_delete/",
type: "post",
data: {"id": deleteId},
success: function (data) {
// data -- a = {'status':1,} a.status a['status']
if (data.status === 1) {
swal("删除成功!", "你可以准备跑路了！", "success");
// location.reload(); // 刷新页面
ths.parent().parent().remove();
var tr_first_td = $('tr .first_child');
for (var i=0;i<tr_first_td.length;i++){
// i = i+1;
var a = i+1;
$('tr .first_child').eq(i).text(a);
}
} else {
swal("删除失败", "你可以再尝试一下！", "error");
}
}
})
}
);
})
注意：this指代的是调用函数的对象。
在https://www.jq22.com/网站中，可以找到很多很好的js组件，可以直接使用。