Ajax发送POST请求对数据的封装
Ajax发送POST请求把数据到后端后,后端收到数据并解析出来
示列一:
Ajax发送请求,这里主要是发送一个数组的数据类型到后端,如果没有先把数组进行格式化成字符串的话,后端就收了就是一个字符串类型,为了后端接收的是一个列表的类型,所以先进行JSON.stringify()进行数据的转化:
var tr = $(":checked").parent().parent();
if(tr.length != 0){
tr.each(function(){
postList.push($(this).attr('id')); // 选择的id
});
//console.log(postList); // [1,2,3]
if(postList != ''){
$.ajax({
url: '/demo/user/',
type: 'POST',
dataType: 'JSON',
// data: JSON.stringify(postList), //这里是把列表转化为字符串
data: JSON.stringify({ // 把键值对格式转化为字符串
'postList':postList,
'value':status
}),
success:function (arg) {
if(arg.status){
alert(arg.msg);
window.location.reload();
}else {
alert(arg.msg);
}
}
});
}
}else{
alert('请选择要设置的用户')
}
Py后端接收:
def users_list(request):
if request.method == "POST":
content = request.body # 字节
content = str(content, encoding='utf-8') # 字符串
result = json.loads(content) # 再通过json解析成一个字典,字典包含前端传的列表
# print('结果', result,type(result)) # {'value': 'True', 'postList': ['5']} <class 'dict'>
response = {'status':False,'msg':None}
# for id in result:
for id in result['postList']:
print(id)
return JsonResponse(response)
示列二:
Ajax发送请求:
$.ajax({
url: '/demo/user/',
type: 'POST',
dataType: 'JSON',
// data: JSON.stringify(postList), //这里是把列表转化为字符串
data:{ // 把键值对格式转化为字符串
'username':'ray',
'password':'123456'
},
success:function (arg) {
if(arg.status){
alert(arg.msg);
window.location.reload();
}else {
alert(arg.msg);
}
}
});
这里data也可以用FormData来封装数据,例如:
var data = new FormData();
data.append('name',$(":input[name='name']").val());
data.append('file',$(":input[name='file']")[0].files[0]); //文件
Py后端接收:
def ajaxpost(request):
result = {}
if request.method == "POST":
username = request.POST.get('username ')
password= request.POST.get('password')
return Jsonresponse(result)
总结:
这里主要是记录Ajax发送数据对数据格式的封装。
① 如果前端需要发送一个列表格式的数据给后端,则需要通过 JSON.stringify() 先把数据转换为字符串发送给后端,后端可以通过request.body获取到数据并把数据用 json.reloads 解析出来。
② 如果前端直接发送一个键值对的数据给后端,后端在接收数据的时候可直接通过request.POST获取即可。
Ajax发送POST请求对数据的封装的更多相关文章
- AJAX的来龙去脉(由来)-如何被封装出来的--ajax发送异步请求(四步操作)
<黑马程序员_超全面的JavaWeb视频教程vedio\JavaWeb视频教程_day23_ajax> \JavaWeb视频教程_day23_ajax\day23ajax_avi\14.打 ...
- 16 react 发送异步请求获取数据 和 使用Redux-thunk中间件进行 ajax 请求发送
1.发送异步请求获取数据 1.引入 axios ( 使用 yarn add axios 进行安装 ) import axios from 'axios'; 2. 模拟 在元素完成挂载后加载数据 并初始 ...
- AJAX发送PUT请求引发的血案
如果直接发送ajax=put形式的请求 是拿不到请求体中的数据的. Tomcat: 1.将请求体中的数据,封装一个map ...
- Ajax发送XML请求案例
Ajax发送XML请求需求: 根据输入的国家,输出这些国家下面的城市. 如果请求参数较多,而且请求参数的结构关系复杂,则可以考虑发送XML请求.XML请求的实质还是POST请求,只是在发送请求的客户端 ...
- ajax发送PUT请求,使用HttpPutFormContentFilter过滤器接受办法
相信在使用ajax发送put请求时候,肯定遇到过后端数据无法被接受到的405错误. 为什么会遇到这个问题? 1.首先查看Tomcat源码 关于如何将数据封装到Request public class ...
- AJAX发送异步请求教程详解
AJAX 一.AJAX简介 什么是 AJAX ? AJAX = 异步 JavaScript 和 XML. AJAX 是一种用于创建快速动态网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可 ...
- 使用Ajax发送http请求(get&post请求)
本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 同步和异步 同步和异步的概念 同步:必须等待前面的任务完成,才能继续后面 ...
- 原生JS实现ajax 发送post请求
1. [代码]原生JS实现ajax 发送post请求 <script> var oStr = ''; var postData = {}; var oAjax = null; //post ...
- IT兄弟连 JavaWeb教程 使用AJAX发送POST请求并获取响应
POST请求用于向服务器发送应该被保存的数据,因此POST请求天然比GET请求多需要一份需要被保存的数据.那么这些数据应该放在何处呢?毕竟,我们的open()方法接收的三个参数都没有合适的位置. 答案 ...
随机推荐
- 检查iOS项目中是否使用了IDFA
(1)什么是IDFA 关于IDFA,在提交应用到App Store时,iTunes Connect有如下说明: 这里说到检查项目中是否包含IDFA,那如何来对iOS项目(包括第三方SDK)检查是否 ...
- [视频]K8飞刀 ms15022 office漏洞演示动画
[视频]K8飞刀 ms15022 office漏洞演示动画 https://pan.baidu.com/s/1eQnV8qQ
- SQLAlchemy的ORM
表关系: 表之间的关系存在三种:一对一.一对多.多对多.而SQLAlchemy中的ORM也可以模拟这三种关系.因为一对一其实在SQLAlchemy中底层是通过一对多的方式模拟的,所以先来看下一对多的关 ...
- AndroidStudio打包apk,安装出现签名冲突--解决办法
Android UiAutomator2项目部署到jenkins上,实现自动打包,并自动push&安装到设备上 遇到问题: 可成功实现自动打包并push到设备上后,install -r 的时候 ...
- opencv实现正交匹配追踪算法OMP
//dic: 字典矩阵: //signal :待重构信号(一次只能重构一个信号,即一个向量) //min_residual: 最小残差 //sparsity:稀疏度 //coe:重构系数 //atom ...
- 为什么要设置Java环境变量(windows)
在学习JAVA的过程中,涉及到多个环境变量(environment variable)的概念,如PATH.正确地配置这些环境变量,是能够顺利学习.开发的前提.而经常出现的问题是:有的学习者能够按照提示 ...
- 数据库设计 Step by Step (2)——数据库生命周期
引言:数据库设计 Step by Step (1)得到这么多朋友的关注着实出乎了我的意外.这也坚定了我把这一系列的博文写好的决心.近来工作上的事务比较繁重,加之我期望这个系列的文章能尽可能的系统.完整 ...
- rabbitmq 生产环境配置
目录 一 rabbitmq 生产部署 1.1 rabbitmq.conf 1.2 advanced.config 1.3 rabbitmq-env.conf 1.4 在生产环境中不适用的策略. 一 r ...
- linux添加用户、修改密码
1.在root下添加用户用 adduser 命令 # 添加用户 admin [root@flm] #sudo adduser admin 2.添加用户登录密码 # 为用户 admin 修改密码 [ro ...
- 和我一起打造个简单搜索之ElasticSearch入门
本文简单介绍了使用 Rest 接口,对 es 进行操作,更深入的学习,可以参考文末部分. 环境 本文以及后续 es 系列文章都基于 5.5.3 这个版本的 elasticsearch ,这个版本比较稳 ...