Ajax实现计算小案例；Ajax数据格式化；Ajax发送json格式的数据；Ajax上传文件；Ajax结合layer组件实现删除的二次确认 # day57
Ajax的小案例
需求：
1+1=2
前提：不需要刷新页面也能显示出来
实现：
views.py
from django.shortcuts import render, HttpResponse
# Create your views here.
def index(request):
print(request.POST)
# if request.method == 'POST'
if request.is_ajax(): # 判断是否使用Ajax
d1 = request.POST.get('d1')
d2 = request.POST.get('d2')
d3 = int(d1) + int(d2) # 此时拿到的d1，d2数据类型是字符串形式
return HttpResponse(d3)
return render(request, 'index.html')
index.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>
</head>
<body>
<input type="text" id="d1">
+
<input type="text" id="d2">
=
<input type="text" id="d3">
<button class="btn btn-success">计算</button>
<script>
// 要想使用Ajax，必先引入jQuery
$('.btn').click(function () {
var d1 = $('#d1').val()
var d2 = $('#d2').val()
$.ajax({
// 1、指定数据提交的路径
url:'/index/', // 引号内不写，默认为当前路由
// 2、指定提交方式
type:'post',
// 3、传入的数据
data:{'d1':d1, 'd2':d2},
// 4、接收后端返回的结果(创建一个匿名函数来接收数据)，当后端返回结果的时候，触发执行
success:function (res) {
{#alert(res)#}
$('#d3').val(res)
}
})
})
</script>
</body>
</html>
扩展：在页面中显示的效果如何实时显示结果？（提示：键盘事件）
Ajax数据格式化
views.py
from django.shortcuts import render, HttpResponse
# Create your views here.
import json
from django.http import JsonResponse
def index(request):
print(request.POST)
# if request.method == 'POST'
if request.is_ajax(): # 判断是否使用Ajax
back_dic = {'code': 200, 'msg': '请求成功', 'data': {'username': 'yuziqi'}}
# d1 = request.POST.get('d1')
# d2 = request.POST.get('d2')
# d3 = int(d1) + int(d2) # 此时拿到的d1，d2数据类型是字符串形式
return HttpResponse(json.dumps(back_dic))
# return JsonResponse(back_dic)
return render(request, 'index.html')
index.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>
</head>
<body>
<input type="text" id="d1">
+
<input type="text" id="d2">
=
<input type="text" id="d3">
<button class="btn btn-success">计算</button>
<script>
// 要想使用Ajax，必先引入jQuery
$('.btn').click(function () {
var d1 = $('#d1').val()
var d2 = $('#d2').val()
$.ajax({
// 1、指定数据提交的路径
url:'/index/', // 引号内不写，默认为当前路由
// 2、指定提交方式
type:'post',
// 3、传入的数据
data:{'d1':d1, 'd2':d2},
dataType:'json',
// 4、接收后端返回的结果(创建一个匿名函数来接收数据)，当后端返回结果的时候，触发执行
success:function (res) {
{#alert(res)#}
{#console.log(typeof res)#}
{#$('#d3').val(res)#}
console.log(typeof res)
// 反序列化
{#res = JSON.parse(res)#}
if (res.code == 200) {
console.log(res.msg)
console.log(res.data)
console.log(res.data.username)
} else {
alert(res.msg)
}
}
})
})
</script>
</body>
</html>
总结：
什么时候前端需要反序列化？
1、return HttpResponse(json.dumps(back_dic))
什么时候前端不需要反序列化
1、return JsonResponse(back_dic)
2、在传入数据中增加一个约束条件（传入数据类型为json格式）
$.ajax({
dataType:'json',
})
Ajax发送json格式的数据
view.py
from django.shortcuts import render, HttpResponse
import json
from django.http import JsonResponse
def index(request):
print(request.POST) # 只能拿post请求方式的数据， 但是除文件数据，还有json格式的数据也拿不到
"""
如何拿到json数据？
"""
# b'{"d1":"1","d2":"1"}' bytes
print(request.body) # json格式的数据在body中
if request.is_ajax(): # 判断是否使用Ajax
# back_dic = {'code': 200, 'msg': '请求成功', 'data': {'username': 'yuziqi'}}
"""
处理json格式的数据
"""
# b'{"d1":"1","d2":"1"}' bytes
json_bytes = request.body
json_str = json_bytes.decode('utf-8')
print(json_str)
json_data = json.loads(json_str)
print(type(json_data))
d1 = json_data.get('d1')
d2 = json_data.get('d2')
d3 = int(d1) + int(d2)
return HttpResponse(d3)
return render(request, 'index.html')
index.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>
</head>
<body>
<input type="text" id="d1">
+
<input type="text" id="d2">
=
<input type="text" id="d3">
<button class="btn btn-success">计算</button>
<script>
// 要想使用Ajax，必先引入jQuery
$('.btn').click(function () {
var d1 = $('#d1').val()
var d2 = $('#d2').val()
$.ajax({
// 1、指定数据提交的路径
url:'/index/', // 引号内不写，默认为当前路由
// 2、指定提交方式
type:'post',
// 3、传入的数据
data:JSON.stringify({'d1':d1, 'd2':d2}),
contentType:'application/json',
// 4、接收后端返回的结果(创建一个匿名函数来接收数据)，当后端返回结果的时候，触发执行
success:function (res) {
$('#d3').val(res)
console.log(typeof res)
// 反序列化
{#res = JSON.parse(res)#}
if (res.code == 200) {
} else {
alert(res.msg)
}
}
})
})
</script>
</body>
</html>
总结：
Ajax发送json格式的数据需要在前端Ajax传入数据中，用以下方式传入，在views.py中用request.body接收json数据格式。
data:JSON.stringify({'d1':d1, 'd2':d2}),
contentType:'application/json',
Ajax上传文件
view.py
def upload_file(request):
if request.is_ajax():
print(request.POST) # <QueryDict: {'d1': ['123']}>
print(request.FILES) # <MultiValueDict: {'d2': [<InMemoryUploadedFile: 6.16嫦娥奔月.jpg (image/jpeg)>]}>
return render(request, 'file.html')
file.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>
</head>
<body>
<input type="text", id="d1">
<input type="file", id="d2">
<button class="btn-success btn">上传</button>
<script>
console.log($('#d2'))
console.log($('#d2')[0])
console.log($('#d2')[0].files)
console.log($('#d2')[0].files[0])
// 要想使用Ajax，必先引入jQuery
$('.btn').click(function () {
var d1 = $('#d1').val()
var formDataobj = new FormData()
// 1、添加普通数据
formDataobj.append('d1', d1)
// 2、添加文件数据
formDataobj.append('d2', $('#d2')[0].files[0])
$.ajax({
// 1、指定数据提交的路径
url:'', // 引号内不写，默认为当前路由
// 2、指定提交方式
type:'post',
// 3、传入的数据
data:formDataobj, // django会自动识别FormDate对象的数据
{#dataType:'json',#}
// 用FormData对象有两个必须制定的参数
contentType:false, // 不指定编码格式
processData: false, // 告诉浏览器不要处理我的数据
// 4、接收后端返回的结果(创建一个匿名函数来接收数据)，当后端返回结果的时候，触发执行
success:function (res) {
}
})
})
</script>
</body>
</html>
Ajax结合layer组件实现删除的二次确认
veiws.py
def userlist(request):
userlist = models.User.objects.all()
if request.is_ajax():
back_dic = {'code':200, 'msg':'删除成功'}
id = request.POST.get('id')
print(type(id))
models.User.objects.filter(pk=id).delete()
return JsonResponse(back_dic)
return render(request, 'userlist.html', locals())
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-v3.5.1/layer/layer.js' %}"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<table class="table table-hover table-striped">
<thead>
<tr>
<th>ID</th>
<th>username</th>
<th>password</th>
<th>操作</th>
</tr>
</thead>
<tbody>
{% for obj in userlist %}
<tr>
<td>{{ obj.id }}</td>
<td>{{ obj.username }}</td>
<td>{{ obj.password }}</td>
<td>
<a href="javascript:;" class="btn btn-danger del" del_id="{{ obj.id }}"
id="del_{{ obj.id }}">删除</a>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
<script>
{#layer.msg('hello');#}
//询问框
$('.del').click(function () {
var id = $(this).attr('del_id')
{#alert(id)#}
var curretnBtn = $(this)
layer.confirm('你确定删除吗？', {
btn: ['确定'] //按钮
}, function () {
{#layer.msg('这里是确定', {icon: 1});#}
$.ajax({
// 1. 指定数据提交的路径
url: '',
// 2. 指定提交方式
type: 'post',
// 3. 传入的数据
data: {'id':id}, // django会自动识别FormData对象的数据
{#dataType: 'json',#}
// 用FormData对象有两个必须制定的参数
{#contentType: false, // 不指定编码格式#}
{#processData: false, // 告诉浏览器不要处理我的数据#}
// 4. 接收后端返回的结果, 当后盾返回结果的时候，触发执行
success: function (res) {
if (res.code == 200 ) {
{% comment %}layer.msg(res.msg, {icon:2}, function () {
location.reload()
}){% endcomment %}
layer.msg(res.msg, {icon:1})
{#$(this).parent().parent().remove()#}
curretnBtn.parent().parent().remove()
} else {
layer.msg(res.msg)
}
}
})
})
})
</script>
</body>
</html>
浙公网安备 33010602011771号