使用JSON在前台与后台之间进行简单的传值

原创 2016年08月28日 16:12:57

  昨天花了一天时间写了个简单的连连看,代码比较粗糙,还没有实现两张相同图片消除的时候显示的连接线。由于是练习,因此我使用了Ajax进行前台与后台的传值,这个传值的载体自然就是json了。

  这篇博文仅仅是记录一下代码中用json进行传值的使用。

 1、我是将游戏区的top和left使用ajax传递给后台,让后台计算出每张图片的包裹的div的top和left,然后再转换为string的json数据传递给前台,前台再进行解析,代码贴图如下:


  将游戏区的top和left使用ajax传递给后台


  后台计算出每张图片的包裹的div的top和left,然后再转换为string的json数据传递给前台,注意方法的返回值类型前有@ResponseBody


  前台解析后台传递来的string的json数据


2、对于每张图片我对应的bean是ImageItem,这个Bean有一个属性叫ImageWrapper,这个ImageWrapper是包裹图片的div,我想让前台直接传递个json给这个bean赋值

  这里使用了jquery.json.js,贴图如下:


  赋值给ImageItem这个bean对象的json



  使用了jquery.json.js的$.toJSON()方法


  后台直接用imageItem对象来接收这个json数据,注意ImageItem前面的@RequestBody



  至此,对这次的学习记录完毕。




版权声明:本文为博主原创文章,未经博主允许不得转载。 举报

相关文章推荐

Json:前台对象数组传到后台解析

方法:使用JsonArray进行解析 步骤: 一、引入一系列JAR包       要使程序便于解析json,首先引入json-lib包,son-lib包同时依赖于5个JAR包:(前5个为依赖包); ...
  • kymegg
  • kymegg
  • 2016-03-23 16:47
  • 11350

《项目经验》--通过js获取前台数据向一般处理程序传递Json数据,并解析Json数据,将前台传来的Json数据写入数据库表中

先看一下我要实现的功能界面:       这个界面的功能在图中已有展现,课程分配(教师教授哪门课程)在之前的页面中已做好。这个页面主要实现的是授课,即给老师教授的课程分配学生。此页面实现功能...

精选:深入理解 Docker 内部原理及网络配置

网络绝对是任何系统的核心,对于容器而言也是如此。Docker 作为目前最火的轻量级容器技术,有很多令人称道的功能,如 Docker 的镜像管理。然而,Docker的网络一直以来都比较薄弱,所以我们有必要深入了解Docker的网络知识,以满足更高的网络需求。

JSON格式传递数据使用方法(JS和JAVA)

一、传值页面 1、var retVal = JSON.parse("{}");//定义一个json 2、在retVal内注入两个值 retVal .aa= 'aaStr'; retVal .bb= '...

如何使用json在前后台进行数据传输

转自:http://blog.csdn.net/laner0515/article/details/8784959 上一篇博客写到用javascript生成多组文本,可以让数据的输入不受显示,现在...

Ajax调用Action采用json格式传递数据

采用ajax实现局部刷新。在使用ajax过程中,发现传统的xml方式得到的结果解析很麻烦,因此采用json格式传递。 采用ajax将数据传递到后台action中处理,action通过service层...

ajax传递json字符串写法

ajax传递json字符串写法

页面传值之json--简单入门

JSON 即 JavaScript Object Natation,它是一种轻量级的数据交换格式,非常适合于服务器与 JavaScript 的交互。本文将快速讲解 JSON 格式,并通过代码示例演示如...

使用JSON进行数据传输的总结

一、选择的意义在异步应用程序中发送和接收信息时,可以选择以纯文本和 XML 作为数据格式。为了更好的使用ajax,我们将学习一种有用的数据格式 JavaScript Object Notation(J...

Bootstrap V3.0 Ajax无刷新分页的实现 附代码

Bootstrap V3.0 Ajax无刷新分页的实现 附代码 效果图: 1.首先输入数据并提交: 2.控制台收到请求后 手动打回20条数据 ...

Bootstrap Paginator分页插件+ajax 实现动态无刷新分页

插件地址: DownloadVisit Project in GitHub 的
  • zxw394
  • zxw394
  • 2014-06-11 16:53
  • 28242
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)