Python之django与Ajax
文章目录
一、准备知识、JSON
1、什么是JSON
- JSON 指的是 JavaScript 对象表示法(JavaScript Object Notation)
- JSON 是轻量级的文本数据交换格式
- JSON 独立于语言 *
- JSON 具有自我描述性,更易理解
# 简单一句JSON是各种编程语言相互交互的数据格式
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PnfxqSXa-1635934800241)(C:\Users\pilgirm\AppData\Roaming\Typora\typora-user-images\image-20210817153744225.png)]
2、stringify与parse方法
JSON只认识双引号的字符串格式
// JSON.parse(): 用于将一个 JSON 字符串转换为 JavaScript 对象(json只认双引的字符串格式)
JSON.parse('{"name":"Howker"}');
JSON.parse('{name:"Stack"}') ; // 错误
JSON.parse('[18,undefined]') ; // 错误
// JSON.stringify(): 用于将 JavaScript 值转换为 JSON 字符串。
JSON.stringify({"name":"Tonny"})
二、Ajax简介
AJAX(Asynchronous Javascript And XML)翻译成中文就是“异步的Javascript和XML”。即使用Javascript语言与服务器进行异步交互,传输的数据为XML(当然,传输的数据不只是XML)。
AJAX 不是新的编程语言,而是一种使用现有标准的新方法。
AJAX 最大的优点是在不重新加载整个页面的情况下,可以与服务器交换数据并更新部分网页内容。(这一特点给用户的感受是在不知不觉中完成请求和响应过程)
AJAX 不需要任何浏览器插件,但需要用户允许JavaScript在浏览器上执行。
- 同步交互:客户端发出一个请求后,需要等待服务器响应结束后,才能发出第二个请求;
- 异步交互:客户端发出一个请求后,无需等待服务器响应结束,就可以发出第二个请求。
"""
异步提交
局部刷新
"""
示例
- home.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.2/js/bootstrap.min.js"></script>
</head>
<body>
<input type="text" id="d1"> +
<input type="text" id="d2"> =
<input type="text" id="d3">
<p>
<button id="d4" class="btn btn-success">提交</button>
</p>
<script>
// 先给按钮一个绑定事件
$('#d4').click(function () {
$.ajax({
// 1.指定朝哪个后端发送ajax请求
url:'', // 不写默认朝当前地址提交
// 2.请求方式
type:'post', // 不指定默认就是get 全是小写
// 3.数据
{#data:{'username':'egon','age':18},#}
data:{'i1':$('#d1').val(),'i2':$('#d2').val()},
// 4.回调函数(异步回调机制):当后端返回结果的时候会自动触发,args接受后端返回的结果
success:function (args) {
{#alert(args)#}
console.log(typeof args) // object对象
$('#d3').val(args)
}
})
})
</script>
</body>
</html>
- views.py
from django.shortcuts import render
from django.http import JsonResponse
# Create your views here.
def home(request):
if request.method == 'POST':
print(request.POST) # <QueryDict: {'username': ['egon'], 'age': ['18']}>
a = request.POST.get('i1')
b = request.POST.get('i2')
c = int(a)+int(b)
return JsonResponse(c,safe=False)
return render(request,'home.html')
"""
针对后端如果是用HttpResponse返回的数据 回调函数不会自动帮你反序列化
如果后端直接用的是JsonResponse返回的数据 回调函数会自动帮你反序列化
HttpResponse解决方式
1、自己在前端利用JSON.parse()进行反序列化
2、在ajax里面配置一个参数dataType:true
"""
三、前后端传输数据的编码格式(contentType)
# post请求数据的编码格式
"""
get请求数据是直接放在url后面的
url?username=egon&age=12
"""
# 朝后端发送post请求的方式
"""
1、form表单
2、ajax请求
"""
"""
前后端传输数据的三种格式
urlencoded
formdata
json
"""
# form表单
默认的数据编码格式是urlencoded(可以在request headers中找到content-type)
django后端针对符合urlencoded编码格式的数据都会自动帮你解析封装到request.POST中
如果把编码格式改成formdata,那么针对普通的键值对还是剖析到request.POST中而将文件解析到request.FILES中
form表单不能发送json数据的
# ajax请求
默认编码格式也是urlencoded
数据格式:uname=16600000016&pword=123
django后端针对符合urlencoded编码格式的数据都会自动帮你解析封装到request.POST中
四、Ajax发送文件数据
<p>
username:<input type="text" id="id_username" class="form-control">
</p>
<p>
password:<input type="text" id="id_password" class="form-control">
</p>
<p>
<input type="file" id="id_file" >
</p>
{#<button id="id_button" class="btn btn-success">提交</button>#}
<input type="submit" id="id_button" class="btn btn-success">
<script>
// 给button提交按钮绑定个事件
$('#id_button').click(function () {
// 需要先利用FormData内置对象
let formDataObj = new FormData();
{#formDataobj.append(d1)#}
// 2 添加普通键值对
formDataObj.append('username',$('#id_username').val());
formDataObj.append('password',$('#id_password').val());
// 3 添加文件对象
formDataObj.append('file',$('#id_file')[0].files[0]);
console.log(formDataObj)
// 4 将ajax数据发送给后端
$.ajax({
url:'',
type:'post',
data:formDataObj,
// ajax发送文件必须要指定的两个参数
contentType:false, // 不需使用任何编码 django后端能够自动识别formdata对象
processData:false, // 告诉浏览器不要对数据进行任何处理
success:function (args) {
alert(args)
}
})
})
</script>
# ajax发送文件格式数据
def json_ajax(request):
if request.is_ajax():
if request.method == 'POST':
print(request.POST)
print(request.FILES)
return render(request,'json_ajax.html')
"""
Ajax发送文件总结:
1、需要利用内置对象FormData
let formDataObj = new FormData();
2、需要指定两个关键字的参数
contentType:false, // 不需使用任何编码 django后端能够自动识别formdata对象
processData:false, // 告诉浏览器不要对数据进行任何处理
3、django后端能够直接识别FormData对象并且能够将内部的普通用键值对自动解析并封装到request.POST中,文件数据会自动解析并封装到request.FILES中
"""
五、Ajax发送json数据
$.ajax({
// 1. 指定数据提交的路径
url: '/index/',
// 2. 指定提交方式
type: 'post',
// 3. 传入的数据
{#data: {'d1': d1, 'd2': d2},#}
data: JSON.stringify({'d1': d1, 'd2': d2}),
contentType:'application/json', // 指定编码格式
)}
六、ajax实现弹出框的二次确认
- userlist.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
{% load static%}
<script src="{% static 'layer-v3.5.1/layer/layer.js' %}"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<table class="table table-hover table-striped">
<div class="form-control">
<div class="row">
<thead>
<tr>
<th>ID</th>
<th>姓名</th>
<th>密码</th>
<th>操作</th>
</tr>
</thead>
<tbody>
{% for foo in userall %}
<tr>
<th>{{ foo.id }}</th>
<th>{{ foo.name }}</th>
<th>{{ foo.pwd }}</th>
<th>
<a href="javascript:;" class="btn btn-danger del" del_id=" {{ foo.id }}" id="del_{{ foo.id }}">删除</a>
</th>
</tr>
{% endfor %}
</tbody>
</div>
</div>
</table>
</div>
</div>
<script>
// 绑定弹出按钮
$('.del').click(function () {
var id = $(this).attr('del_id')
var count = $(this)
//询问框
layer.confirm('是否确定删除', {
btn: ['删除', '取消'] //按钮
}, function () {
$.ajax({
url: '',
type: 'post',
data: {'id': id},
success: function (args) {
if (args.code == 200) {
layer.msg(args.msg, {icon: 1},function () {
location.reload()
})
}
}
})
})
})
</script>
</body>
</html>
- views.py
# ajax实现弹出框的二次确认
def userlist(request):
userall = models.User.objects.all()
if request.is_ajax():
if request.method == 'POST':
dict_code = {'code':200,'msg':'删除成功'}
del_id=request.POST.get('id')
int_del_id = int(del_id)
models.User.objects.filter(pk=int_del_id).delete()
return JsonResponse(dict_code)
return render(request, 'userlist.html', locals())