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请求对数据的封装的更多相关文章

  1. AJAX的来龙去脉(由来)-如何被封装出来的--ajax发送异步请求(四步操作)

    <黑马程序员_超全面的JavaWeb视频教程vedio\JavaWeb视频教程_day23_ajax> \JavaWeb视频教程_day23_ajax\day23ajax_avi\14.打 ...

  2. 16 react 发送异步请求获取数据 和 使用Redux-thunk中间件进行 ajax 请求发送

    1.发送异步请求获取数据 1.引入 axios ( 使用 yarn add axios 进行安装 ) import axios from 'axios'; 2. 模拟 在元素完成挂载后加载数据 并初始 ...

  3. AJAX发送PUT请求引发的血案

    如果直接发送ajax=put形式的请求      是拿不到请求体中的数据的.           Tomcat:              1.将请求体中的数据,封装一个map             ...

  4. Ajax发送XML请求案例

    Ajax发送XML请求需求: 根据输入的国家,输出这些国家下面的城市. 如果请求参数较多,而且请求参数的结构关系复杂,则可以考虑发送XML请求.XML请求的实质还是POST请求,只是在发送请求的客户端 ...

  5. ajax发送PUT请求,使用HttpPutFormContentFilter过滤器接受办法

    相信在使用ajax发送put请求时候,肯定遇到过后端数据无法被接受到的405错误. 为什么会遇到这个问题? 1.首先查看Tomcat源码 关于如何将数据封装到Request public class ...

  6. AJAX发送异步请求教程详解

    AJAX 一.AJAX简介 什么是 AJAX ? AJAX = 异步 JavaScript 和 XML. AJAX 是一种用于创建快速动态网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可 ...

  7. 使用Ajax发送http请求(get&post请求)

    本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 同步和异步 同步和异步的概念 同步:必须等待前面的任务完成,才能继续后面 ...

  8. 原生JS实现ajax 发送post请求

    1. [代码]原生JS实现ajax 发送post请求 <script> var oStr = ''; var postData = {}; var oAjax = null; //post ...

  9. IT兄弟连 JavaWeb教程 使用AJAX发送POST请求并获取响应

    POST请求用于向服务器发送应该被保存的数据,因此POST请求天然比GET请求多需要一份需要被保存的数据.那么这些数据应该放在何处呢?毕竟,我们的open()方法接收的三个参数都没有合适的位置. 答案 ...

随机推荐

  1. day 74 vue 2 axios数据请求 以及组件的学习

    前情提要:   vue 学习二: 一: 通过axios实现数据请求 1:json数据语法 json数据对象类似于JavaScript中的对象,但是它的键对应的值里面是没有函数方法的,值可以是普通变量, ...

  2. flask的变量和函数

    flask 中有内置的的变量函数 ,那些特殊的变量可以实现某些功能 config :可以从模板中直接访问Flask当前的config对象:{{config.SQLALCHEMY_DATABASE_UR ...

  3. 解决Fiddler抓不到HTPPS

    刚开始启动Fiddler,设置代理后,直接打开浏览器,输入我们最记得的网址“baidu.com”,发现Fiddler什么都抓不到,这是为什么呢?难道是我的配置有问题,重新检查一下,浏览器的代理已经设置 ...

  4. 遗忘Windows Server 2008R2密码的处理方法

    遗忘Windows Server 2008R2的处理方法 有的时候,我们会由于各种原因忘掉了服务器密码,比如服务器太多,太杂什么的,或直接是被人黑掉了,这个时候我们想要登录,发现我们已经没有办法了,其 ...

  5. 坑爹的Sun JDK

    Sun的这个java.lang.Throwable 源码 设计非常糟糕,完全没有扩展性, 我在IBM 的Java JDK下,继承java.lang.Throwable重新定义了一个ExceptionW ...

  6. odoo开发笔记 -- 异常信息处理汇总

    1 Traceback (most recent call last): File , in _handle_exception return super(JsonRequest, self)._ha ...

  7. kindEditor 使用

    1. kindEditor简介: KindEditor是一套开源的HTML可视化编辑器,主要用于让用户在网站上获得所见即所得编辑效果.     主要特点: 1. 体积小,加载速度快,但功能十分丰富.2 ...

  8. (转)WebSphere禁用SSLv3和RC4算法教程

    原文:https://www.cnblogs.com/lsdb/p/7126399.html WebSphere经常会报“SSL 3.0 POODLE攻击信息泄露”和"SSL/TLS 受诫礼 ...

  9. vue使用代理实现开发阶段跨域

    在config/index.js找到 proxyTable对象,添加键值对即可. "/api":{ target:"http://192.168.1.1", c ...

  10. 业余实现一个统计A股数据工具

    自己瞎捣鼓了几天 python,数据来源新浪财经,每天收盘启动爬虫抓取一遍,web 端呈现日线与周线数据:实时图表显示上证指数与个股指数等.技术点:scrapy apscheduler sqlalch ...