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()方法接收的三个参数都没有合适的位置. 答案 ...
随机推荐
- 使用json-server模拟REST API
https://segmentfault.com/a/1190000005793257 在开发过程中,前后端不论是否分离,接口多半是滞后于页面开发的.所以建立一个REST风格的API接口,给前端页面提 ...
- 关于使用 IDEA Spring Boot 热部署
1,POM 中引用 <dependency> <groupId>org.springframework.boot</groupId> <artifactId& ...
- Jenkins配置项目
前提:服务器上部署了jenkins+Tomcat,并且安装了所需插件 1.新建项目 -- 项目配置 2.配置git地址 出现上述错误是因为该git地址,在jenkins服务器上无权限访问.在git上开 ...
- [Umbraco] Data Type之Render control
继续探讨Data Type.如果你创建过Data Type,你就会知道创建一个新的Data Type都需要指定一个Render control,这有点类似开始C#时用到的继承. 那么如何创建我们自己的 ...
- Python Web框架 tornado 异步原理
Python Web框架 tornado 异步原理 参考:http://www.jb51.net/article/64747.htm 待整理
- Elasticsearch使用filter进行匹配关系and,or,not,range查询
RESTful接口URL的格式: http://localhost:9200/<index>/<type>/[<id>] 其中index.type是必须提供的. i ...
- Intellij添加Jetty远程Debug
步骤一: 步骤二: 步骤三:-agentlib:jdwp=transport=dt_socket,server=y,suspend=n,address=15005 步骤四: 找到服务器上jetty的b ...
- error C4996: 'scanf': This function or variable may be unsafe.
项目属性-配置属性-c/c++-预处理器- 在下面的编辑窗口中添加一句命令:_CRT_SECURE_NO_WARNINGS 添加完成后应用并退出 http://jingyan.baidu.com/al ...
- 全网最详细的Sublime Text 3的安装Package Control插件管理包(图文详解)
不多说,直接上干货! 全网最详细的Windows里下载与安装Sublime Text *(图文详解) 全网最详细的Sublime Text 3的激活(图文详解) 全网最详细的Sublime Text ...
- ubuntu 下配置elasticSearch
配置JAVA环境 配置jdk 上官网下载x64的和ubuntu匹配的jdk 找到usr/java ,解压下载的文件 tar –xzvf 文件.tar.gz Vim /etc/source 添加配 ...