文档章节

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

南栀安
 南栀安
发布于 2017/06/26 17:44
字数 399
阅读 7
收藏 0

----转载自CDSN

原地址:http://blog.csdn.net/hi__study/article/details/52346314

作者: hi__study

 

昨天花了一天时间写了个简单的连连看,代码比较粗糙,还没有实现两张相同图片消除的时候显示的连接线。由于是练习,因此我使用了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

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

本文转载自:http://blog.csdn.net/hi__study/article/details/52346314

共有 人打赏支持
南栀安
粉丝 1
博文 20
码字总数 5177
作品 0
绍兴
私信 提问
Webapi创建和使用 以及填坑(二)

Webapi创建和使用 以及填坑(二) 上篇文章由于时间问题没能讲到POST提交,今天做一个补充 POST: 当我们直接通过POST发送方式发送会发现错误信息 参考解决:https://www.cnblogs.com/tinya/p...

EasyAuthor
2018/08/08
0
0
这1个月自己技术上的成长

大家好,进入前端这个领域也有一段时间了,第一次写自己的心得体会,在这段时间中,自己学习到了一些ajax交互是如何实现的,今天写这篇文章,也想让自己缕一缕思路,让整个逻辑更加明确! 前...

MrChows
2016/04/30
114
0
2017-05-11日志

1,实现了JSON数据转换,前台传值数据后台通过basecontroller类解析数据格式,映射实体类,对应数据库中字段名称。 2,将之前写的页面删除,重新布置,按项目流程布置了app.js,control.js ...

麦兜鱼丸
2017/05/11
1
0
Json那点事儿

1.JSON介绍 JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,JSON以key-value的形式提供了很好的读写,在web开发中之前用过xml来进行数据的交互和传输, 但xml的数据结构比较复...

陈小扁
2016/04/10
108
1
【java】jsp和struts2之间如何传值?

一、前言 近期做的项目使用的是SSH框架,其中当然也有很多的问题,自己也查了很多,其中有一个就是jsp和struts2之间如何传值?下面小编就向大家分享一下。 二、Action中获取页面中的数据 这个...

kisscatforever
2017/05/17
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Windows 上安装 Scala

在安装 Scala 之前需要先安装 Java 环境,具体安装的详细方法就不在这里描述了。 您可以自行搜索我们网站中的内容获得其他网站的帮助来获得如何安装 Java 环境的方法。 接下来,我们可以从 ...

honeymose
24分钟前
0
0
数据库篇多表操作

第1章 多表操作 实际开发中,一个项目通常需要很多张表才能完成。例如:一个商城项目就需要分类表(category)、商品表(products)、订单表(orders)等多张表。且这些表的数据之间存在一定的关系...

stars永恒
今天
2
0
nginx日志自动切割

1.日志配置(Nginx 日志) access.log----记录哪些用户,哪些页面以及用户浏览器,IP等访问信息;error.log------记录服务器错误的日志 #配置日志存储路径:location / {      a...

em_aaron
昨天
3
0
java 反射

基本概念 RTTI,即Run-Time Type Identification,运行时类型识别。RTTI能在运行时就能够自动识别每个编译时已知的类型。   要想理解反射的原理,首先要了解什么是类型信息。Java让我们在运...

细节探索者
昨天
2
0
推荐转载连接

https://www.cnblogs.com/ysocean/p/7409779.html#_label0

小橙子的曼曼
昨天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部