文档章节

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

南栀安
 南栀安
发布于 2017/06/26 17:44
字数 399
阅读 6
收藏 0
点赞 0
评论 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
绍兴
这1个月自己技术上的成长

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

MrChows
2016/04/30
114
0
JSONP原理及JQUERY JSONP的使用

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

听风雨
2014/03/01
0
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
工作中遇到的问题及解决方式

1.select tmodelid,tmodelcourseid,tmodelfilename,tfilespath,tmodelmoney,tusername,tpaytypepname,tmodeldate from vbackmodellist where tmodelstate=1 and concat(tmodelid,',',tmodelc......

MrChows
2016/07/02
46
0
微信小程序 - 微信打赏Step by Step

应一位小程序开发者的需求,对图灵机器人接口进行测试。本人接触微信小程序的时间不长,解析微信事项打赏 项目结构目录树 Project.jpg Development Notices: 生命周期函数 在使用生命周期函数...

语落心生
2017/10/08
0
0
JQuery分页插件Pagination扩展

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

德胜
2014/04/11
437
0
javaweb前台对参数加密,后台解密,避免出现中文乱码

废话不多说,在web开放中遇到前台向后台传值,注意:中文值的时候,后台如果单纯的用request.getParamter(name);接收,得到的是一个乱码,如何避免出现中文乱码?这里简单的介绍下,我自己的...

什么是程序员
2015/12/17
68
0
面包屑导航条如何从后台取值

前台页面需要实现一个面包屑的导航条,Bootstrap这个直接写确实很方便,现在要求,这个面包屑的导航条需要的位置数据要是从后台拿出来,就是这个传的值要是通用的,传值用Json,这样一个通用...

隔壁王大爷
2016/11/29
536
3
问个基础的问题,想知道大家怎么解决的

(一) 我在做项目的过程中,发现了这样一个问题 目前靠两种方式从页面传值过来 一种是将数据弄成json格式的字符串传到后台 然后将这json字符串直接转成一个对象 但是对象中的类型有int date等等...

-Jw-
2013/07/19
248
6

没有更多内容

加载失败,请刷新页面

加载更多

下一页

一款成功的全球服游戏该如何进行架构选型与设计?

全球服游戏如今正在成为出海游戏的主要考虑模式,跨国对战、全球通服打破国界的限制,将不同地区不同语言的玩家放在一起合作/竞技,成功吸引了大量玩家的关注,并逐渐成为主流的游戏玩法。 ...

UCloudTech
1分钟前
0
0
StringUtils类中isEmpty与isBlank的区别

org.apache.commons.lang.StringUtils类提供了String的常用操作,最为常用的判空有如下两种isEmpty(String str)和isBlank(String str)。 StringUtils.isEmpty(String str) 判断某字符串是否为...

说回答
14分钟前
0
0
react native使用redux快速上手

先看个简单demo //app.jsimport React, {Component} from 'react';import {StyleSheet, Button, View} from 'react-native';import TestView from './src/testView'export default......

燕归南
16分钟前
0
0
页面输出JSON格式数据

package com.sysware.utils;import java.io.IOException;import javax.servlet.ServletResponse;import org.apache.log4j.Logger;import com.sysware.SyswareConstant;pub......

AK灬
37分钟前
0
0
springCloud-2.搭建Eureka Client的使用

1.使用IDEA,Spring Initializr创建 2.填写项目资料 3.选择spring boot版本,插件选择Cloud Discovery→Eureka Discovery 4.选择保存地址 5.修改application.yml eureka: client: s...

贺小康
40分钟前
0
0
CenOS 6.5 RPM 安装 elasticsearch 6.3.1

下载 wget --no-check-certificate https://artifacts.elastic.co/downloads/elasticsearch/elasticsearch-6.3.1.rpm...

阿白
43分钟前
0
0
1.4 创建虚拟机&1.5 安装CentOS7&1.6 配置ip(上)&1.7 配置ip(下)

1.4 创建虚拟机 知识点 虚拟机网络链接模式 桥连 直接将虚拟网卡桥接到一个物理网卡上面。需要手工为虚拟系统配置IP地址、子网掩码,而且还要和宿主机器处于同一网段,这样虚拟系统才能和宿主...

小丑鱼00
49分钟前
0
0
TrustAsia(亚洲诚信)助力看雪2018安全开发者峰会

2018年7月21日,看雪2018安全开发者峰会在北京国家会议中心圆满落下帷幕。拥有18年悠久历史的老牌安全技术社区——看雪学院联手国内最大开发者社区CSDN,汇聚业内顶尖的安全开发者和技术专家...

亚洲诚信
50分钟前
0
0
Spring注解介绍

@Resource、@AutoWired、@Qualifier 都用来注入对象。其中@Resource可以以 name 或 type 方式注入,@AutoWired只能以 type 方式注入,@Qualifier 只能以 name 方式注入。 但它们有一些细微区...

lqlm
今天
0
0
32位汇编在64位Ubuntu上的汇编和连接

本教程使用的操作系统是Ubuntu Linux 18.04 LTS版本,汇编器是GNU AS(简称as),连接器是GNU LD(简称ld)。 以下是一段用于检测CPU品牌的汇编小程序(cpuid2.s): .section .dataoutput...

ryanliue
今天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部