今日学习内容
补充：JSON知识点
-
JSON 是 JavaScript （JavaScript Object Notation）
-
是轻量级的文本数据交换的格式，JSON解析器和JSON支持许多不同的编程语言。
-
独立于其他语言和平台。
-
JSON只识别双引号的字符串格式 -
stringify与parse是JavaScript中关于JSON对象和字符串转换的两个方法。·
JSON 字符串转换为 JavaScript 对象
JSON.parse('{"name":"Howker"}');
JavaScript 对象的值转换为 JSON 字符串
JSON.stringify({"name":"Tonny"})
Ajax基本操作
特点：异步提交，局部刷新
AJAX（Asynchronous Javascript And XML）翻译成中文就是“异步的Javascript和XML。Javascript语言与服务器进行异步交互，传输的数据为XML和其他数据。
ajax自带js功能，是jQuery封装后的版本。
AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。
补充：
- 同步交互：客户端发出一个请求后，需要等待服务器响应结束后，才能发出第二个请求；
- 异步交互：客户端发出一个请求后，无需等待服务器响应结束，就可以发出第二个请求。
eg:未提交却可以与后端数据库交互去校验输入框内容。
- 整个过程中页面没有刷新，只是刷新页面中的局部位置。（局部）
- 当请求发出后，浏览器还可以进行其他操作，无需等待服务器的响应。（异步请求）
基础语法
$.ajax({
url:'', 控制数据的提交地址
type:'', 控制请求的方式
data:{}, 组织提交的数据
success:function(形参){
异步回调函数
})
实现Ajax小案例：计算机
有按钮方式：
<input type="text" id="d1">+<input type="text" id="d2">=<input type="text" id="d3">
<input type="button" value="计算" id="subBtn">
<script>
$('#subBtn').click(function () {
// 朝后端发送数据 使用ajax
$.ajax({
url:'', // 等价于form表单的action参数
type:'post', // 等价于form表单的method参数
data:{'i1':$('#d1').val(),'i2':$('#d2').val()}, // 要发送给后端的数据
success:function (args) { // 形参args就是用于接收后端返回的数据
$('#d3').val(args)
}
})
})
</script>
.
失去焦点方式：
<input type="text" id="d1">+<input type="text" id="d2">=<input type="text" id="d3">
<script>
$('#d2').blur(function () {
$.ajax({
url: '', // 等价于form表单的action参数
type: 'post', // 等价于form表单的method参数
data: {'i1': $('#d1').val(), 'i2': $('#d2').val()}, // 要发送给后端的数据
success: function (args) { // 形参args就是用于接收后端返回的数据
$('#d3').val(args)
}
})
})
</script>
.
views.py层
def ab_ajax(request):
if request.method == 'POST':
i1 = request.POST.get('i1')
i2 = request.POST.get('i2')
res = int(i1) + int(i2)
return HttpResponse(res)
return render(request,'abAjax.html')
数据编码格式
Content-Type
| 格式 | 数据格式 | 说明 |
|---|---|---|
| urlencoded | 普通数据 eg:name=jason&pwd=123&hobby=read |
django后端统一处理到request.POST中 |
| formdata | 无法直接查阅数据 eg:比如文件类型数据 |
django后端自动将文件数据处理到request.FILES |
| application/json | json格式 | django后端不会处理 ，request.body中存储(bytes类型)，所以需要先做JSON字符串类型转换处理。 |
对于第三种 application/json
语法注意事项
data: JSON.stringify({'name':'jason','pwd':123}),
contentType:'application/json',
Ajax携带文件
$('#d3').click(function () {
// 1.产生内置对象
let formData = new FormData();
// 2.添加普通数据
formData.append('username',$('#d1').val())
// 3.添加文件数据
formData.append('file', $('#d2')[0].files[0])
// 4.发送ajax请求
$.ajax({
url:'',
type:'post',
data:formData,
contentType:false, // 不使用任何编码
processData:false, // 不处理数据对象
success:function (args) {
}
})
})
.
1.针对文件数据jQuery处理方式要想转换成标签形式，再用标签的方法.files[0]取出该文件数据。
2. contentType:false和 processData:false分别表示让系统不做改变对于编码和处理数据对象。
ajax 不能接受后端数据来进行页面跳转，而是局部改变。
回调函数参数问题
$.ajax({
url:'',
type:'post',
data:formData,
contentType:false, // 不使用任何编码
processData:false, // 不处理数据对象
dataType:'JSON',
success:function (args) {
alert(args)
window.location.href = args
console.log(typeof args)
console.log(args)
let MyBaby = JSON.parse(args)
console.log(typeof MyBaby)
console.log(MyBaby)
console.log(MyBaby.name)
}
})
.
1.ajax与后端交互，不应该再返回一个完整的页面，通常返回是json格式数据。
2.前端针对HttpResponse和JsonResponse返回的json格式数据处理策略不同，
HttpResponse 不会自动反序列化，而JsonResponse会自动反序列化。
3.如果想让 HttpResponse 也自动反序列化可以添加一个固定参数。
dataType:'JSON' 在ajax中。
django自带的序列化组件
Django内置的serializers
就是由ORM得到的数据库里面的一个个用户对象，从后端直接序列化出来的数据对象直接给客户端，就需要Django提供的序列化方式。
def get_book(request):
#拿到用户表里面的所有的用户对象
book_query = models.Book.objects.all()
# 将数据全部构造成json格式 {'pk':1,'title':'书'}
# book_list = []
# for book_obj in book_query:
# temp_dict = {}
# temp_dict['pk'] = book_obj.pk
# temp_dict['title'] = book_obj.title
# temp_dict['price'] = book_obj.price
# book_list.append(temp_dict)
from django.core import serializers
# 调用该模块下的方法，第一个参数是你想以什么样的方式序列化你的数据
ret = serializers.serialize('json', book_query)
return HttpResponse(ret)
1.将数据以 json 格式，中间用for循环的方式取出每个数据值再构成一个字典，最后以列表套字典的形式类似于json格式传给前端。不过这种方式对于数据很多的话，不合适。需要用到组件，自动序列化。
sweetalter
sweetalert 网址：https://sweetalert.js.org/
1.下载SweetAlert插件，可以做出基于ajax做出二次确认的动态框样式。
会自动弹出模态框，提供用户第二次确认操作。
2.样式类部分渲染的样式来自于bootstrap中，也要导入bootstrap的js、css。