Ajax 发送json格式数据以及发送文件(FormData)和自带的序列化组件: serializers

最新推荐文章于 2024-06-16 11:02:37 发布
最新推荐文章于 2024-06-16 11:02:37 发布
阅读量3.9k 收藏 10
点赞数 2
文章标签： json ajax django 前端 python
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42702493/article/details/124938969
版权

前后端传输数据的编码格式(contentType)

get请求数据就是直接放在url?后面的

url?usernmae=junjie&password=123...

可以向后端发送post请求的方式

  • form请求
  • ajax请求

前后端传输数据的编码格式

  • urlencoded
  • formdata
  • json

研究form表单：默认的数据编码格式是(urlencoded)

结论：Django针对urlencoded编码格式的数据会自动帮你解析封装到request.POST中。

那么文件是什么数据类型？

结论：如果将编码格式改为form-data，那么针对普通的键值对还是解析到request.POST，但是针对文件类型格式解析到request.FILES中。

Django进行了二次封装，后端针对不同的编码格式在后端内部做不同的编码解析，并放到不同的方法中。

form表单只能发送urlencoded以及formdata两种编码格式。

那么Ajax是什么数据格式？

结论：默认也是urlencoded，数据格式username=junjie&age=20。所有后端需要request.POST接受数据

ajax发送JSON格式数据

前后端传输数据的时候一定要确保编码格式与数据真正的格式是一致的。

JSON.stringify 前端将数据转为JSON格式 与 contentType:'application/json' 指定字符编码格式

<script&
最低0.47元/天 解锁文章
Felix.,
关注
  • 2
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Ajax异步请求&Json数据格式配套学习资料
11-27
Ajax(ASynchronous JavaScript And XML):是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术, Json(JavaScript Object Notation) :现在多用于存储和交换文本信息的语法;进行数据的传输,SON 比 XML 更小、更快，更易解析。
jQuery Ajax使用FormData上传文件和其他数据后端web.py获取
12-07
与普通的 Ajax 相比，使用 FormData 的最大优点就是我们可以异步上传二进制文件。 jQuery 2.0+的版本支持FormData 方法一：使用<form>表单初始化FormData对象方式上传文件 •前端（JQuery）： <form ...
014-Axios Ajax-尚硅谷2022+黑马2023：Ajax概述 同步异步，(Axios 发送普通请求参数，发送请求体JSON，服务器端返回JSON数据)后端是servlet方式
aa35434的博客
03-15 1854
使用原生的JavaScript程序执行Ajax极其繁琐，所以一定要使用框架来完成。而Axios就是目前最流行的前端Ajax框架。Axios官网使用Axios和使用Vue一样，导入对应的*.js文件即可。官方提供的script标签引入方式为：
Ajax基础到实战（四）——formData对象_ajax formdata
最新发布
2301_82243710的博客
06-16 619
在ajax对象 xhr 中有upload属性，upload属性中有关于文件上传的一些事件，在文件上传的过程中可以持续触发onprogress事件，在这个事件的事件对象中我们可以看到 ev.loaded 以及 ev.total 这两个事件对象的属性，分别代表当前文件上传的大小以及上传文件的总大小，我们可以据此计算出文件上传的进度并以百分比的形式显示在页面中。password 这个参数在传递给服务器端之前就已经删除了，因此可以看到在最终的输出结果中是没有看到 pasword 这个属性的。
使用Ajax发起JSONP请求
qq_43808342的博客
12-18 1982
对基于Ajax发起的JSONP请求做了一个简单的总结
Ajax学习日志（五）—— 如何传递json格式请求参数
kokunka的博客
03-27 8891
Ajax入门（五）一、如何传递json格式请求参数1.1） json格式的Content-Type是：application/json1.2) 在app.js使用use方法，并且创建路由1.3) 在public文件夹新建一个html文件1.4) 在浏览器运行 一、如何传递json格式请求参数 1.1） json格式的Content-Type是：application/json xhr.setRequestHeader('Content-Type', 'application/json'); 传递的是
Ajax学习：服务端响应Json格式数据的请求
weixin_47295886的博客
11-29 1286
自动设置数据转换（ //自动转换——借助xhr对象上的属性responseType， xhr.responseType='json';首先进行服务器端进行书写——实际上在我的浏览器版本中直接 send直接传递对象也是可以的。手动设置数据转换 json转对象JSON.parse(xhr.response);在窗口下面按下任意一个按键就会向服务端发送请求，服务端会返回结果，在div中显示。在实际工作中，向服务端发送请求，服务端返回的结果大都是json格式的数据，这里的重点是：传递对象给客户端。
【15.0】Ajax进阶操作
Chimengmeng的博客
03-18 365
【一】前后端传输数据的编码格式(contentType) 主要研究POST请求数据的编码格式 因为GET请求数据就是直接放在url后面的 可以朝后端发送post请求的方式 form请求 ajax请求 【1】form表单 前后端传输数据的格式 urlencoded formdata json <form action="" method="post" e...
thinkphp5 + ajax 使用formdata提交数据（包括文件上传） 后台返回json完整实例
12-20
本文实例讲述了thinkphp5 + ajax 使用formdata提交数据（包括文件上传） 后台返回json。分享给大家供大家参考，具体如下： 知识点总结 1.json格式标准 { 'key':"value" } {"state":"1","msg":"\u7b80\u5386\u6295\u...
Vue 使用formData方式向后台发送数据的实现
10-17
在Vue.js应用中，有时我们需要向后端发送数据，包括文件和普通文本数据。在这种情况下，我们可以使用HTML5的`FormData`对象，它提供了一种方便的方式来组织和发送数据，尤其是处理文件上传。本文将详细介绍如何在Vue...
【JavaScript】AJAX之程序流程、异步同步请求、FormData类型、事件监听接口
'Ablaze 的专栏
12-01 1102
试想这样一种情景，当用户点击页面中的某个按钮向服务器发送请求时，页面本质上只是一些数据发生了变化，而此时服务器却要将重绘的整个页面再返回给浏览器加载，这显然有悖于程序员的“DRY”原则，而且明明只是一些数据的变化却迫使服务器要返回整个HTML文档，这本身也会给网络带宽带来不必要的开销。　　有没有办法在页面数据变动时，只向服务器请求新的数据，并且在阻止页面刷新的情况下，动态替换页面中展示的数据呢？ –
jQuery的ajax发送FormData的方式
01-23
<html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <form id="form"> <input type="text" name="username"> <input type="file" name="file"> <input type="button" id="btn" value="提交"> </form> [removed][removed] [removed] var form = $('#form')[0]; // 获取到表单的DOM对象形式 $('#btn').on('click', function () { // 1 使用FormData进行表单的数据处理 var fd = new FormData(form); // 2 使用$.ajax发送fd // 需要指定两个属性 // - processData : false // - contentType : false $.ajax({ method : 'POST', url : '/ajax_Day5/datas03.php', data : fd, success : function (data) { console.log(data); }, processData : false, contentType : false }); }); [removed] </body> </html>
Ajax基础：发送jsonp请求（jsonp、jsonCallback）
昔冰_G的博客
10-01 1万+
jsonp走的是get请求方式，也就是ajax的默认请求方式； ajax方法中也涵盖了jsonp请求，可以通过ajax方法来发送jsonp请求； <!--客户端代码--> <body> <button id="btn">发送jsonp请求</button> <script src="js/jquery-3.5.1.min.js"></script> <script> $('#bt
Ajax，FormData
qq_52179917的博客
06-14 3731
Ajax 的实现步骤：1. 创建ajax对象：new XMLHttpRequest();2. 告诉Ajax 对象要向哪里发送请求，以什么方式open 函数的两个参数，请求方式和请求地址open( 'get' , 'http://localhost:3000/dizhi' )3. 发送请求send()4. 获取服务器端响应到客户端的数据因为不可能发送完直接响应，所以需要绑定 onload 事件，响应成功之后会自动触发xhr.onload = function() {console.log( xhr.respo
ES2020新特性你了解吗？
前端小白的逆袭
12-08 492
ES2020新特性
原生js的Ajax提交json数据到后台
热门推荐
zilingkong的博客
09-26 1万+
原生ajax发送json数据到后台接收（将json转换为name=tom&pwd=123格式的字符串，简单，不在本次测试内），需要做到几点： 1，post方式发送。 2、json对象必须转换为json格式字符串 3、（setQequestHeader，可以默认或者application/json;） 4、后台接收，必须用request.getInputStream()方式。 SO
ajax-FormData快速序列化表单数据以及文件上传
DT辰白
05-07 547
serialize和 FormData 区别 $("form").serialize()和 new FormData($('#uploadForm')[0])都是序列化表单，实现表单的异步提交，但是二者有区别 首先，前者，只能序列化表单中的数据 ，比如文本框等input select等的数据，但是对于文件，比如文件上传，无法实现，那么这时候，FormData就上场了 new FormData使...
使用JQuery Ajax发送FormData数据
05-24
可以使用JQuery的`$.ajax()`函数来发送`FormData`数据。下面是一个示例代码： ```javascript var formData = new FormData(); formData.append('file', $('#fileInput')[0].files[0]); $.ajax({ url: 'upload....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值