本文介绍: 数据的传输方式:title=dasdas&price=2312&date=&publish=2&authors=3,k,v形式的键值对传输。后端如何接收:把前端提交的数据封装到request.POST中,而传输的文件则在request.FILES中。传输方式:title=dasdas&price=2312&date=&publish=2&authors=3。提交form–data文件数据:enctype:form–data。默认的编码格式:urlencode。json格式的数据提交后。
Ajax的特点
- 异步提交:Ajax采用异步通信方式,能够在页面无需重新加载的情况下向服务器发送请求并接收响应数据,提升了用户体验。
- 无需插件:Ajax是基于标准浏览器的Javascript和XMLHttpRequest对象实现的,无需安装插件或控件。
- 局部刷新:Ajax能够实现局部刷新,只更新需要更新的部分,而不是整个页面。
- 支持多种格式数据交互:Ajax不仅支持XML格式数据交互,还支持JSON、HTML、文本等多种格式的数据交互。
- 提高性能:因为Ajax可以在页面保留数据,只更新需要更新的部分,减少了不必要的请求和响应,从而提高了网站性能。
- 提供多种编程语言支持:Ajax不仅支持Javascript编程,还支持其他编程语言,如PHP、ASP、Python等。
- 可以实现动态效果:Ajax可以用来实现动态效果,如自动补全、搜索框提示、无限滚动等。
Ajax案列
views
from django.shortcuts import render, HttpResponse
def a_ajax(request):
if request.method == 'POST':
"""接受ajax提交的数据"""
print(request.POST) # <QueryDict: {'inp1': ['1'], 'inp2': ['1']}>
# d1 = request.POST.get('inp1')
# d2 = request.POST.get('inp2')
# d3 = int(d1)+int(d2)
# print(d3)
l_dict = {'username': 'kk', 'password': 123}
import json
return HttpResponse(json.dumps(l_dict))
return render(request, 'a_ajax.html')
HTML文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet">
{# <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.2.1/js/bootstrap.bundle.min.js"></script>#}
</head>
<body>
<input type="text" id="inp1">+
<input type="text" id="inp2">=
<input type="text" id="inp3">
<button class="btn">提交</button>
</body>
</html>
<script>
$('.btn').click(
function() {
var inp1 = $("#inp1").val();
var inp2 = $("#inp2").val();
//获取到的数据返回到后端,使用python来计算
$.ajax({
url: '',//不写默认朝当前地址传递
type: 'post',//默认为get
data: {inp1: inp1, inp2: inp2},
//回调函数用来压接受后端返回的数据
success: function (res) {
console.log(res)
//获取值
{#$("#inp3").val(res)#}
//进行返序列化
//后端返回的数据别忘记返序列化,后端记得序列化
res = JSON.parse(res)
console.log(res.username)
console.log(res.password)
}
})
})
</script>
前后端传输数据的编码格式
post的请求方式
form表单
Ajax
api工具
1. form表单的post请求
数据的传输方式:title=dasdas&price=2312&date=&publish=2&authors=3,k,v形式的键值对传输
后端如何接收:把前端提交的数据封装到request.POST中,而传输的文件则在request.FILES中
提交form-data文件数据:enctype:form-data
传输方式:title=dasdas&price=2312&date=&publish=2&authors=3
2. Ajax提交POST请求
默认Ajax提交数据 还是在request,POST中接受,默认编码格式urlencode
3. Ajax提交json的格式数据
json格式的数据提交后
$.ajax({
url: '',//不写默认朝当前地址传递
type: 'post',//默认为get
data: JSON.stringify({inp1:inp1, inp2:inp2}),
contentType: 'application/json',
//回调函数用来压接受后端返回的数据
success: function (res) {
console.log(res)
4. Ajax提交文件数据
<script>
$(".btn").click(function (ev) {
console.log(123);
// 要获取到文件数据,
{#console.log($("#myfile")[0].files[0]) // C:fakepath123.png#}
// 提交文件数据需要借助于formdata对象
var myFormDataObj = new FormData;
var username = $("#username").val();
var myfile = $("#myfile")[0].files[0];
myFormDataObj.append('username', username);
myFormDataObj.append('myfile',myfile);
$.ajax({
url: '',
type: 'post',
{#data: JSON.stringify({a: 1, b: 2}), // 序列化的 "{"a":1, "b":2}"#}
data: myFormDataObj, // 序列化的 "{"a":1, "b":2}"
{#contentType: 'application/json', // json格式的#}
contentType:false, // 告诉浏览器不要给我的编码格式做任何的处理
processData: false, //
success: function (res) {
}
})
})
</script>
原文地址:https://blog.csdn.net/weixin_49210718/article/details/134536953
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:http://www.7code.cn/show_1951.html
如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱:suwngjj01@126.com进行投诉反馈,一经查实,立即删除!
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。