分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 技术分享

SSM框架用JSON进行前后端数据传输

发布时间:2023-09-06 01:08责任编辑:郭大石关键词:后端

 

一个根据用户id查找用户信息的简单功能,使用JSON进行数据的传输

前端代码

这里用bootstrap做简单的样式美化,中间留了个div用来异步的显示查询结果,ajax进行前端的数据传输(class内容可以无视,只有美化效果):

<form class="form-horizontal" > ???<label for="firstname" class="col-sm-2 control-label">用户ID</label> ???<div class="col-sm-10"> ?????<input type="text" class="form-control" id="user_id" placeholder="请输入用户ID"> ???</div> ???<div class="col-sm-offset-2 col-sm-10"> ?????<button type="button" id="select" class="btn btn-default">查找</button> ???</div></form><div class="panel-body"> ???<h2 class="text-danger text-center"> ???????<!-- 用来显示查找结果 --> ???????<span class="glyphicon" id="select-box"></span> ???</h2></div>$(function(){$("#select").click(function() { ???????????$.ajax({ ???????????????url : "peopleSelect", ???????????????type : "POST", ???????????????dataType:"json", ???????????????contentType : "application/json;charset=UTF-8", ???????????????<!-- 向后端传输的数据 --> ???????????????data : JSON.stringify({ ???????????????????id : $("#user_id").val(), ???????????????}), ???????????????success:function(result) { ???????????????????<!-- 处理后端返回的数据 --> ???????????????????var message= JSON.stringify(result); ???????????????????$("#select-box").html("查询成功" + message); ???????????????}, ???????????????error:function(result){ ???????????????????$("#select-box").html("查询失败"); ???????????????} ???????????}); ???????});});

后端代码

Controller

这里主要用@RequestBody转换接受的JSON为对象,用@ResponseBody转换返回的对象为JSON。 
有两种接受前端数据的方式,一种使用Map接受,一种使用实体类进行接收,使用Map接受的方法为:

@RequestMapping("/peopleSelect") ???@ResponseBody ???public People peopleSelect(@RequestBody Map<String,String> map) { ???????//使用map.get方法得到JSON中id对应的值 ???????long id = Long.parseLong(map.get("id")); ???????//查找对应id的用户信息 ???????People people = peopleService.getById(id); ???????//返回用户信息,要使用@ResponseBody将返回值转换为JSON ???????return people; ???}

使用实体类接受的话,要求实体类中有对应的属性,如People中有id,name,age属性,只能接受键名为id,name,age的JSON(可以不全有,但不能有People中没有的属性),方法为:

@RequestMapping("/peopleSelect") ???@ResponseBody ???public People peopleSelect(@RequestBody People requestPeople ) { ???????//使用requestPeople.getId方法得到JSON中id对应的值 ???????long id = requestPeople.getId(); ???????//查找对应id的用户信息 ???????People people = peopleService.getById(id); ???????//返回用户信息,要使用@ResponseBody将返回值转换为JSON ???????return people; ???}

最后说几个遇到的问题:

一.点击查找按钮后,页面会快速刷新,看不到返回结果

提交按钮的type一定要设置为button,不要使用submit,因为submit会默认点击提交,而ajax也会提交,这就产生了ajax的返回结果还没看清就因为submit的提交而刷新了页面。

二.后台查询结果没问题,却总是调用ajax的error回调函数

ajax对返回数据的要求很严格,一定要是严格的JSON数据返回才会进行success的回调,只要有一条数据不是严格的JSON格式就会调用error的回调函数,最好将查询结果封装为一个类,每次查询返回这个类,类中包含查询结果或者错误信息。

SSM框架用JSON进行前后端数据传输

原文地址:http://www.cnblogs.com/lizhen-home/p/7472865.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved