`
noble510520
  • 浏览: 54416 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

正确的前端传后台json方式

 
阅读更多

DEMO:

var data=JSON.stringify({"page": {"pagenow": 1,"pagesize": 20},"file":{"name":"jpg"},"catalogs":[{"id":1},{"id":2}]});
        $.ajax({
            type:"POST",
            url:"//访问的url",
            data:data,
            contentType:"application/json", 
            success:function(data){
                //显示数据
            }
        });

注意:

一、contentType

contentType,可以是application/x-www-form-urlencoded这种默认类型的,不过当后台有struts等框架的话,会在action之前拦截请求,并把request body 里面的值都读出来,导致我们不能再request里面读取到值,只能依赖struts的domain model
所有如果有后台用这种机制的话,那就需要更改contentType:application/json,这样子strust就不会拦截请求了

二、stringify和parseJSON

这两种方法不能乱用,一不小心的话就会导致后台解析不了数据,正确的用法在上面。
stringify是将Json转义,parseJSON是将json去除转义并解析成对象
总结

前端传后台json,应该传字符串过去,不能传Object对象,而且要适当指定contentType

查看原文:
http://139.129.55.235/2016/05/30/%e6%ad%a3%e7%a1%ae%e7%9a%84%e5%89%8d%e7%ab%af%e4%bc%a0%e5%90%8e%e5%8f%b0json%e6%96%b9%e5%bc%8f/

<script type="text/javascript"> $(function () { $('pre.prettyprint code').each(function () { var lines = $(this).text().split('\n').length; var $numbering = $('<ul/>').addClass('pre-numbering').hide(); $(this).addClass('has-numbering').parent().append($numbering); for (i = 1; i <= lines; i++) { $numbering.append($('<li/>').text(i)); }; $numbering.fadeIn(1700); }); }); </script>
分享到:
评论

相关推荐

    Python读写Json涉及到中文的处理方法

    为了以后的数据扩展,那必须有一个数据库,我的想法就是自己写一个简单的网页做为提交输入,然后post到后台以后录入到数据库中,再写一个展示文章的页面,展示效果正确后,写一个requests动态的把所有的数据都爬下来...

    App热更新发布流程.docx

    这个流程涉及到多个角色,包括前端开发人员、打包人员、测试人员和后台管理员。下面我们将详细介绍这个流程中的每个步骤。 一、前端开发人员提交代码到版本管理 在这个步骤中,前端开发人员将最新的应用程序代码...

    MinibarCMS小型酒吧在线管理系统 v2

    更新内容如下: 1、增加14个Sevelet来处理相关数据,减少了多余的JSP页面 2、FCKediter更改为ueditor 3、前端使用JQ+JQ UI的方式重新布局和实现相关功能 4、登陆增加了Ajax查询用户名是否正确 5、注册页面增加了Ajax...

    鉴权系统(JWT架构)-SpringBoot2+Vue2(一定惊喜满满,万字长文)

    在Spring Boot2中编写后台代码,接受前端请求并完成与数据库之间的交互,核对用户输入的用户名和密码是否正确。如果信息正确,Spring Boot2返回token给前端;否则,返回错误消息通知前端。 3.token生成和管理 在...

    OA办公系统 Springboot vue.js前后分离,Flowable工作流自定义表单

    后台框架:springboot 2.7.0+Flowable6.7.2+ mybaits+maven+接囗前端页面:html +vuejs 形式jquery ajax 异步跨域json 格式数据交互 前后分离,前后台分开部署(特别注意,前端用的vue.js,就是html页面引入vue.js形式,...

    jsp+mysql小型酒吧在线管理系统

    更新内容如下: 1、增加14个Sevelet来处理相关数据,减少了多余的JSP页面 2、FCKediter更改为ueditor 3、前端使用JQ+JQ UI的方式重新布局和实现相关功能 4、登陆增加了Ajax查询用户名是否正确 5、注册页面增加了Ajax...

    jsp+mysql小型酒吧在线管理系统.zip

    更新内容如下: 1、增加14个Sevelet来处理相关数据,减少了多余的JSP页面 2、FCKediter更改为ueditor 3、前端使用JQ+JQ UI的方式重新布局和实现相关功能 4、登陆增加了Ajax查询用户名是否正确 5、注册页面增加了Ajax...

    amis前端低代码框架 v1.1.4

    amis前端低代码框架特点1、不需要懂前端:在百度内部,大部分 amis 用户之前从来没写过前端页面,也不会 JavaScript,却能做出专业且复杂的后台界面,这是所有其他前端 UI 库都无法做到的; 2、不受前端技术更新的...

    简易学习社交平台

    用户请求主页时对后台请求,后台返回JSON数据供浏览器解析并向用户展示,利用丰富的文章内容吸引用户注册登录评论文章,对于用户的请求,后台service业务层都有相对应的curd功能为用户提供服务,后台servlet逻辑层...

    瑞吉外卖学习笔记...

    JacksonObjectMapper广泛应用于Web开发中,用于将Java对象转换为JSON格式,以便于与前端进行交互。JacksonObjectMapper需要考虑到性能、安全性和可扩展性等方面。 编辑员工信息 编辑员工信息是指系统管理员或普通...

    解决jquery有正确返回值但不执行success函数的问题

    从后台返回的结果是这样的:{“readyState”:4,”responseText”:”success”, “status”:200, “statusText”:”OK”} 前端代码 $.ajax({ url:'save', type:'POST', dataType:'json', contentType:'...

    tuzicms_v2.0.6_企业网站管理系统

    GD 扩展库+MySQL 扩展库+JSON 支持 四、相关资源 TuziCMS官方主站 http://www.tuzicms.com TuziCMS演示站 http://demo.tuzicms.com 五、更新日记 [增加] 新闻表的下载字段news_download [优化] 前台模板div未...

    TuziCMS企业网站管理系统 v3.0.zip

    GD 扩展库 MySQL 扩展库 JSON 支持 TuziCMS企业网站管理系统更新日记: 1.【修复】上下篇url在兼容模式下出错。(2016.01.23解决) 2.【修复】万能标签调用不出文章描述。(2016.05.10解决) 3.【修复】单页模型...

    第三代移动WEB内核小程序风口-逐浪CMS2 x3.9.3全面发布

    ■修复:模型字段,设置为前端不显示时,后台内容管理也不显示Bug ■修复:用户中心--内容--无法添加商品Bug ■修复:会员Excel导入Bug ■增加:扩展邮件发送模块,会记录邮件模板,与发送日志(目标用户是否成功接收) ■...

    2023年VUE面试题大全

    安全性更高,客户端支持防御XSRF,就是让你的每个请求都带一个从cookie中拿到的key,根据浏览器同源策略,假冒的网站是拿不到你cookie中得key的,这样,后台就可以轻松辨别出这个请求是否是用户在假冒网站上的误导...

    基于springboot,采用mybatis和mapper3插件,基于shiro的sso cookies单机实现+源代码+文档说

    14. 消息转换未配置,如果需要返回 map 自动转换成 UTF-8 json 及需要保证 JDK8 LocalDateTime 类日期的正确性,请打开 com.zyf.admin.support.config.WebConfiguration.configureMessageConverters 注释部分。...

    程序员面试刷题的书哪个好-LuckHome:beego框架项目

    后台接口值否则提供响应数据,前端页面负责展示数据和效果 项目的各接口设计符合RESTfulAPI风格 技术实现 python实现后台接口 前端页面使用Bootstrap框架实现 数据库存储使用Redis+MySQL 第三方扩展 七牛云:存储...

    基于SSM+VUE的前后端分离在线考试管理系统项目源码+数据库+项目说明.zip

    2. 使用了 Vue 全家桶+ES5ES6ES7+Webpack 等前端新技术 3. 后端基于SpringBoot搭建SSM框架 4. 包括学生端、教师端和管理员端 5. 采用模块化、组件化、工程化的模式开发 6. 教师端和管理员端基于[vue-element-admin...

    网络用户应用:Corona School的用户部分(又名“ User-Bereich”)

    Corona School用户仪表板的前端。 入门 您可能需要以下命令。 yarn install 将依赖项安装到/ node_modules /目录中。 这必须在克隆目录并每次更新package.json文件之后运行。 yarn run dev 在开发模式下运行应用...

    C#进阶系列--WebApi

    目录 C#进阶系列——WebApi 路由机制剖析:你准备好了吗? ................................................................................................... 3 一、MVC和WebApi路由机制比较 ..................

Global site tag (gtag.js) - Google Analytics