特点
- 异步请求
- 局部刷新
基于Jquery实现AJAX最简单案例
HTML
<script>
$("#id").click(function () { //获取到按钮的点击事件
$.ajax({
url: "/ajax_test/", //请求地址
type: "POST", //请求类型
data: { //发送数据 键值对形式
username: "Q1mi",
password: 123456
},
success: function (data) {
alert(data) //回调函数
}
})
})
</script>
视图
def ajax_test(request):
user_name = request.POST.get("username")
password = request.POST.get("password")
res = {'user': None, 'msg': None} # 自定义一个字典存储登录账户,和登录错误信息
# ....进行登录验证
# res 是py的字典,不能直接传, 必须json传过去
import json
return HttpResponse(json.dumps(res)) # jq那边在 用js的反序列方法转换即可
Jquery反序列化Json
//回调函数
success:function (data) {
console.log(data) // 这是json字符串
var data = JSON.parse(data) //JS 的json反序列化方法
if (data.user){ //用点的方法取出键值
console.log('登录成功')
}
else{
console.log('登录失败')
}
}
Jquery序列化Json
$('.btn').click(function () {
$.ajax({
url:'',
type:'post',
contentType:'application/json', //编码类型设置为json ,默认是urlencode: 参数=值&参数=值 格式
data:JSON.stringify({ //要传json数据必须,转换类似python 的dumps
a:1,
b:2,
}),
success:function (data) {
console.log(data)
}
})
})
上传文件
HTML中
必须new一个FormData()
$('.put').click(function () {
var formData = new FormData();
// 两个键值对 用户名 和头像
formData.append('user',$('.user').val());
formData.append('avatar',$('.avatar')[0].files[0]); // 固定语法取文件
// 必须加上token
formData.append('csrfmiddlewaretoken', $("[name='csrfmiddlewaretoken']").val());
$.ajax({
url:'',
type:'post',
// 告诉jQuery不要去处理发送的数据
processData : false,
// 告诉jQuery不要去设置Content-Type请求头
contentType : false,
data:formData,
success:function (data) {
console.log(data)
}
})
})
视图中
request.FILES
就能获取到文件,然后用with open