使用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格式传递数据使用方法(JS和JAVA)

一、传值页面 1、var retVal = JSON.parse("{}");//定义一个json 2、在retVal内注入两个值 retVal .aa= 'aaStr'; retVal .bb= '...
  • q542928492
  • q542928492
  • 2015年02月02日 15:49
  • 32634

使用JSON格式传递数据,获取JSON的值

项目中,接口之间传递数据是经常的,不管是项目内部接口传递数据,还是与外部系统之间接口传递数据,通过json都会较为容易一些,至于什么是json,自己goodle,百度吧。在html中,使用ajax请求...
  • damaolly
  • damaolly
  • 2015年11月08日 16:38
  • 7407

解析JSON对象与字符串之间的相互转换(获取json数据转换为字符串,json传值方法)

对JSON对象与字符串之间的相互转换进行了详细的介绍; 在开发的过程中,如果对于少量参数的前后台传递,可以直接采用ajax的data函数,按json格式传递,后台Request即可,但有的时候,需要...
  • kunkun378263
  • kunkun378263
  • 2015年01月15日 11:11
  • 4017

接口json转换以及传值

关于接口格式的解析以及jquery传值
  • wzl0310
  • wzl0310
  • 2016年10月12日 09:34
  • 430

关于json前后台传值

2014-05-10 23:57:30|  分类: json|字号 订阅后台.java HttpServletResponse response = ServletActionCo...
  • yannanying
  • yannanying
  • 2014年05月19日 13:40
  • 1523

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

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

json前后台传值代码

  • 2017年03月30日 09:41
  • 36KB
  • 下载

通过URL传参和通过json传参后台实例

private static final String UPDATERULESTATUS = "{\"status\":\"1\"}"; @ApiOperation(value = "修改有效规则状...
  • qililong88
  • qililong88
  • 2016年07月25日 18:10
  • 1591

json的基本传值方式(从前台到后台,再从后台到前台)

  • 2014年02月27日 21:56
  • 36KB
  • 下载

AJAX - 前台传JSON到后台

【1】contentType默认为application/x-www-form-urlencoded的情况var url = "person.action"; var jsonStr = {"name...
  • J080624
  • J080624
  • 2017年01月18日 09:48
  • 4356
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:使用JSON在前台与后台之间进行简单的传值
举报原因:
原因补充:

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