文档章节

使用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
08/08
0
0
这1个月自己技术上的成长

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

MrChows
2016/04/30
114
0
Json那点事儿

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

陈小扁
2016/04/10
108
1
JSONP原理及JQUERY JSONP的使用

JSONP原理 JSON和JSONP   JSON(JavaScript Object Notation)是一种轻量级的数据交换格式。对于JSON大家应该是很了解了吧,不是很清楚的朋友可以去json.org上了解下,简单易懂。   JSONP...

听风雨
2014/03/01
0
0
JQuery分页插件Pagination扩展

项目中用到了Pagination分页栏插件.很精简的一个插件,但是只提供分页栏显示的功能. 如果使用ajax来翻页的话,用起来不太方便.所以打算自己扩展下,前台做的少,js不太好,欢迎大家指点 :-) 例如:...

德胜
2014/04/11
437
0

没有更多内容

加载失败,请刷新页面

加载更多

6. Python3源码—List对象

6.1. List对象 List对象是“变长对象”。 6.1.1. Python中的创建 Python中List对象最重要的创建方法为PyList_New,如下Python语句最终会调用到PyList_New: test = [1, 2, 3, 4, 5] 6.1.2. ...

Mr_zebra
11分钟前
1
0
nginx屏蔽指定接口(URL)

Step1:需求 web平台上线后,需要屏蔽某个服务接口,但又不想重新上线,可以采用nginx屏蔽指定平台接口的办法 Step2:具体操作 location /dist/views/landing/UNIQUE_BEACON_URL { re...

Linux_Anna
19分钟前
2
0
tomcat高并发配置调优

作者:Joker-pan 原文:https://blog.csdn.net/u011622226/article/details/72510385?utm_source=copy --------------------- tomcat 解压就使用的,配置都没动过,肯定不能支持高并发了; ...

imbiao
37分钟前
2
0
mysql 联结,级联查询总结区分

其实我对 数据库的级联或者联结查询一直都是会用,项目能查询出来自己想要的结果即可。 毕竟SQL使用复杂的查询毕竟比较少,而且不难使用。 至于区分他们,我还真的有点模糊。 在看 《SQL必知...

之渊
54分钟前
2
0
区块链入门教程分享区块链POW证明代码实现demo

兄弟连区块链入门教程分享区块链POW证明代码实现demo 这里强调一下区块链的协议分层 应用层 合约层 激励机制 共识层 网络层 数据层 上 一篇主要实现了区块链的 数据层,数据层主...

兄弟连区块链入门教程
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部