Ajax基本操作
Ajax基本操作
Ajax简介
1.Ajax(Asynchronous Javascript And XML)异步的JavaScript和XML。即使用JavaScript语言与服务器进行异步交互，传输的数据为XML
2.XML是被设计用来传输和存储数据的，可扩展标记语言，是一种标记语言，是从标准通用标记语言中简化修改出来的，他主要用到可扩展标记语言，可扩展样式语言
3.JSON格式与2001年由Douglas Crockford提出，目的为了取代繁琐笨重的XML格式
4.优点
Ajax使用JavaScript技术向服务端发送异步请求
Ajax请求无需刷新整个页面
因为服务器响应内容不再是整个页面而是页面中的部分内容，所以Ajax性能高
两个关键点:局部刷新、异步请求
5.我们现在使用的是jQuery封装之后的版本
Ajax基本操作
1.jQuery实现的AJAX
$.ajax({
url:'', 控制数据的提交地址
type:'', 控制请求方式(默认是get请求)
data:{}, 组织提交的数据
success:function(形参){
异步回调函数
}
})
2.JS实现AJAX
var b2 = document.getElementById("b2");
b2.onclick = function () {
// 原生JS
var xmlHttp = new XMLHttpRequest();
xmlHttp.open("POST", "/ajax_test/", true);
xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlHttp.send("username=q1mi&password=123456");
xmlHttp.onreadystatechange = function () {
if (xmlHttp.readyState === 4 && xmlHttp.status === 200) {
alert(xmlHttp.responseText);
}
};
};
数据编码格式
1.可以朝后端发送post请求的方式
1.form表单
2.Ajax请求
2.前后端传输数据的编码格式
1.urlencoded
2.formdata
3.json
3.form表单
默认的数据编码格式是urlencoded
数据格式：username=haha&password=123
格式一:urlencoded
django 后端针对符合urlencoded编码格式的数据都会帮你解析封装到request.POST中
username=haha&password=123---->request.POST
格式二:formdata
如果把编码格式改成formdata，那么针对普通键值对还是解析到 request.POST中 而将文件解析到request.FILES中
格式三:json
form表单没法发送json格式数据
4.Ajax请求
Content-Type
格式一: urlencoded
数据格式: name=joseph&age=21&hobby=read
django后端同意处理到request.POST中
格式二:formdata
数据格式:无法查阅
django后端自动将文件数据处理到request.FILES 普通数据 request.POST
格式三:application/json
数据格式:json格式
django后端不会自动处理,在request.body中存储(bytes类型)需要自己编写处理
语法注意事项
data:JSON.stringify({'name':'joseph','age':21,'hobby'}),
contentTYPE:'application/json',
Ajax携带文件数据
1.前端查看数据类型
console.log(typeof 字段名)
console.log(打印)
console.log(args.name)
2.diamante编写
$('#d3').click(function() {
let formData = new FormData(); # 产生内置对象
formData.append('username',$('#d1').val()) # 添加普通数据
formData.append('file', $('#d2')[0].files) # 添加文件数据
dataType:'JSON' # 直接修改参数
$.ajax({ # 发送jjax请求
url:'',
type:'post',
data:formData,
contentType:false, # 不适用任何编码，必须是小写false
processData:false, # 不处理数据对象,必须是小写false
success:function (args) {
alert(args)
window.location.href = args # 直接返回网页
console.log(typeof 字段名)
console.log(打印)
console.log(args.name)
}
})
})
使用Ajax计算小工具
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
# 使用ajax必须导入文件
<body>
<input type="text" id="i1"> + <input type="text" id="i2"> = <input type="text" id="i3">
<button id="d1">计算</button>
<script>
// 1.查找计算器按钮标签
let $btnEle = $('#d1'); // 根据id查找标签对象
// 2.给按钮标签绑定一个点击事件
$btnEle.on('click', function () {
// 3.获取两个输入框内的数据
// 3.1 先查找到输入框之后获取里面的value属性值即可
let i1Val = $('#i1').val(); // val()拿到输入框里面的值
let i2Val = $('#i2').val();
// 4.发送ajax的请求
$.ajax({
uri: '', // 向哪个后端发送请求（路径有3方式：不写，后缀，全路径）
type: 'post', // 规定发送什么请求方式(get post)
data: {'i1': i1Val,'i2':i2Val}, // 请求携带的数据
success:function (args) { // 异步回调机制（后端返回数据之后，自动触发的操作）
// 形参args就是后端返回过来的数据
$('#i3').val(args)
}
})
})
</script>
</body>
# 后端
from django.shortcuts import render,HttpResponse
import json
def ajax(request):
if request.method == 'POST':
print(request.POST)
i1 = request.POST.get('i1')
i2 = request.POST.get('i2')
res = int(i1) + int(i2)
return HttpResponse(res)
return render(request,'ajax.html')
sweetalter介绍
-
介绍：帮助我们替换前端事件的触发改为弹窗，有各种样式的弹窗供你选择
-
swal：弹出提示框
-
element: 代表的是输入框
-
attributes：一些属性设置
- type：input类型
- placeholder：提示内容
回调函数参数问题
1.
后端跟Ajax交互不应该再返回页面，通常情况下都是返回json格式数据
前端针对HttpResponse和JsonRepose返回的Json格式数据处理策略不同
HttpResponse返回的是一个字符串
JsonRepose返回的则是一个JSON格式数据
HttpResponse不会自动反序列化，而JsonRepose会自动反序列化，如果想让HttpResponse也自动反序列化那么需要添加一个固定参数
dataType：'JSON'
Django自带的序列化组件
1.序列化
python中序列化与反序列化
import json
json.dumps()
json.loads()
Js中反序列化
JSON.stringify()
JSON.parse()
2.序列化
def ser(request):
# 拿到用户表里面的所有用户对象
user_list=models.User.objects.all()
# 导入内置序列化模块，就不需要像之前一样每一个数据都需要自己手动转
from django.core import serializers
# 调用该模块下方法，第一个参数是你相依什么样的方式序列化你的数据
ret=serializers.serialize('json',user_list)
return HttpResponse(res)
