JavaWeb之JSON前后台处理

最新推荐文章于 2023-07-06 20:11:31 发布
最新推荐文章于 2023-07-06 20:11:31 发布
阅读量573 收藏 5
点赞数
分类专栏： JavaWeb SSM 文章标签： java web ajax json
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/czm_ob/article/details/103842085
版权

零、前言

最近在搞个JavaWeb的项目，用到了ajax，涉记到json数据的传递的后台处理，发现自己不是很会，网上找了些资料，在此做个记录，供以后参考。

一、简单的项目搭建（基于SSM）

以一个简单的登录页面开始，通过ajax传递json到后台，后台进行数据处理，获取参数

  1. java Bean类

    public class Account {
	private String userId;
	private String userName;
	private String password;
	
	public String getUserId() {
		return userId;
	}
	public void setUserId(String userId) {
		this.userId = userId;
	}
	public String getUserName() {
		return userName;
	}
	public void setUserName(String userName) {
		this.userName = userName;
	}
	public String getPassword() {
		return password;
	}
	public void setPassword(String password) {
		this.password = password;
	}
}

  2. 使用ajax向后台传递数据
    说明：我个人的jsp页面里的form表单基于layui，故其数据封装在data.field中

    $.ajax({
	url:'/Goods/login.do',
	method:'post',
	data:data.field,
	success:function(result){
		if(result){
			console.log("登录成功!");
			//页面跳转到主页
			//window.location.href="/Goods/jsp/main.jsp?user=USER";
		 }else{
			layer.msg("用户名或密码错误,请重新输入!");
		}
	},
	error:function(){
		layer.msg("出错!");
	}
});

  3. 后台controller接受数据，处理数据

    @RequestMapping("/login")
@ResponseBody
public boolean login(Account acc){
	String userName = acc.getUserName();
	String password = acc.getPassword();
	return service.getAccount(userName, password);
}

二、前台数据的传递以及后台获取的方式

1.简单的数据格式

几种简单的ajax传递数据的方式如下：

//1. 直接在url中传递
$.ajax({
	url:'/Goods/login.do?userName=' + data.field.userName + '&password=' + data.field.password,
	method:'post',
	success:function(result){
		if(result){
			console.log("登录成功!");
			//页面跳转到主页
			//window.location.href="/Goods/jsp/main.jsp?user=USER";
		 }else{
			layer.msg("用户名或密码错误,请重新输入!");
		}
	},
	error:function(){
		layer.msg("出错!");
	}
});

//2. form表单序列化
var formData = $("#loginForm").serialize();
console.log(formData);	//userName=admin&password=123
$.ajax({
	url:'/Goods/login.do',
	method:'post',
	data:formData,
	success:function(result){
		if(result){
			console.log("登录成功!");
			//页面跳转到主页
			//window.location.href="/Goods/jsp/main.jsp?user=USER";
		 }else{
			layer.msg("用户名或密码错误,请重新输入!");
		}
	},
	error:function(){
		layer.msg("出错!");
	}
});

//3. 手动拼接数据
$.ajax({
	url:'/Goods/login.do',
	method:'post',
	data:'userName=' + data.field.userName + '&password=' + data.field.password,                           	
	//即data:'userName=admin&password=123', 就是将formData的值引起来
	success:function(result){
		if(result){
			console.log("登录成功!");
			//页面跳转到主页
			//window.location.href="/Goods/jsp/main.jsp?user=USER";
		 }else{
			layer.msg("用户名或密码错误,请重新输入!");
		}
	},
	error:function(){
		layer.msg("出错!");
	}
});

//4. JavaScript对象
$.ajax({
	url:'/Goods/login.do',
	method:'post',
	data:data.field,
	success:function(result){
		if(result){
			console.log("登录成功!");
			//页面跳转到主页
			//window.location.href="/Goods/jsp/main.jsp?user=USER";
		 }else{
			layer.msg("用户名或密码错误,请重新输入!");
		}
	},
	error:function(){
		layer.msg("出错!");
	}
});

与上面四种方式相对应的后台处理方式有两种（任选其一即可），如下所示：

//1. 通过java Bean获取
@RequestMapping("/login")
@ResponseBody
public boolean login(Account acc){
	String userName = acc.getUserName();
	String password = acc.getPassword();
	System.out.println(userName);
	System.out.println(password);
	
	return service.getAccount(userName, password);
}

//2. 自己通过HttpServletRequest请求获取
@RequestMapping("/login")
@ResponseBody
public boolean login(HttpServletRequest req){
	String userName = req.getParameter("userName");
	String password = req.getParameter("password");
	System.out.println(userName);
	System.out.println(password);
	
	return service.getAccount(userName, password);
}

其中：

  1. @RequestMapping表示的是映射路径
  2. @ResponseBody将返回的数据直接写入response body中，传递给前台，若不加，则返回值表示跳转路径(String类型)，页面报500错误，后台报【不知道返回值的类型】错误
  3. service.getAccount(userName, password)是service层的方法，验证用户名和密码是否匹配，属于SSM的内容，与此次所讲内容无关，只需知道其返回的是布尔值即可

结果如下：
在这里插入图片描述
在这里插入图片描述

2. 复杂的数据格式

此种方式一般采用JSON串传递数据。

几种传递JSON串的方式：

  1. 将目标json串作为值传递

    //1. 将数据打包成一个目标json串,然后将目标json串作为值传递, 如普通数据格式的方式三
 $.ajax({
	url:'/Goods/login.do',
	method:'post',
	data:'data'=JSON.stringify(data.field),
	success:function(result){
		if(result){
			console.log("登录成功!");
			//页面跳转到主页
			//window.location.href="/Goods/jsp/main.jsp?user=USER";
		 }else{
			layer.msg("用户名或密码错误,请重新输入!");
		}
	},
	error:function(){
		layer.msg("出错!");
	}
});

//2. 将目标json串作为JSON串的value传递
$.ajax({
	url:'/Goods/login.do',
	method:'post',
	data:{'data':JSON.stringify(data.field)},
	success:function(result){
		if(result){
			console.log("登录成功!");
			//页面掉转到主页
			//window.location.href="/Goods/jsp/main.jsp?user=USER";
		 }else{
			layer.msg("用户名或密码错误,请重新输入!");
		}
	},
	error:function(){
		layer.msg("出错!");
	}
	});

    这两种方式的功能相同，但区别并不大，就看个人理解及喜好吧！
    对于下面三种后台处理方式（选一个实现即可），实际上这三种方式区别也不多，原理都差不多，在这里写出来供参考吧！

    /**
 * 前台JSON串的处理方式一:
 */
@RequestMapping("/login")
@ResponseBody
public boolean login(HttpServletRequest request){
	//1. 获取请求中名为data的值
	String data = request.getParameter("data");
	//2. 将字符串转换为JSON串
	JSONObject json = JSONObject.fromObject(data);
	//3. 获取JSON中各个属性的值
	String userName = json.getString("userName");
	String password = json.getString("password");
	//4. 验证登录
	return service.getAccount(userName, password);
}

/**
 * 前台JSON串的处理方式二:
 * 
 * 对于简单类型(java的基础数据类型(int、boolean等)、包装类型(Integer, Boolean等)、String、Date等)
 * 			默认采用@RequestParam注解处理,故此处的@RequestParam注解可以省略,如下所示
 * 
 *  @RequestParam注解只能处理Content-Type的值为application/x-www-form-urlencoded的内容
 */
@RequestMapping("/login")
@ResponseBody
public Object login(@RequestParam String data){
	//1.将字符串转换为JSON串
	JSONObject dataObject = JSONObject.fromObject(data);
	//2. 将JSON串转换为Java Bean类对象
	Account acc= (Account)dataObject.toBean(dataObject, Account.class);
	//3. 获取值
	String userName = acc.getUserName();
	String password = acc.getPassword();
	//4. 验证登录
	return service.getAccount(userName, password);
}

/**
 *	前台JSON串的处理方式三:
 *
 *	此种方式与方式一基本一样,少了一行从request中获取数据的代码,
 *		原因是@RequestParam会自动从request中获取形参(data)的值
 */
@RequestMapping("/login")
@ResponseBody
public boolean login(String data){
	//1. 将字符串转换为JSON串(JSON对象)
	JSONObject json = JSONObject.fromObject(data);
	//2. 获取JSON中各个属性的值
	String userName = json.getString("userName");
	String password = json.getString("password");
	//3. 验证登录
	return service.getAccount(userName, password);
}

  2. 直接传递目标json串
    说明：
    1. 上面的传递方式（简单的、复杂的数据传递）都采用的是键/值对的方式，但基于 SpringMVC的@ResquestBody注解，可以直接传递json串
    2. @ResquestBody要求把所有参数作为json解析，url中不能包含key=value的写法，故可以轻易的将对象传到后端

    $.ajax({
	url:'/Goods/login.do',
	method:'post',
	data:JSON.stringify(data.field),
	contentType:'application/json;charset=utf-8',	//使用此方式必须制定contentType的值
	success:function(result){
		if(result){
			console.log("登录成功!");
			//页面跳转到主页
			//window.location.href="/Goods/jsp/main.jsp?user=USER";
		 }else{
			layer.msg("用户名或密码错误,请重新输入!");
		}
	},
	error:function(){
		layer.msg("出错!");
	}
});

/**
  * 	前台JSON串的处理方式四:
  * 
  * 	通过@RequestBody注解处理request中的json串,将其绑定到相应的Bean上(转换为Java Bean类)
  */
@RequestMapping("/login")
@ResponseBody
public boolean login(@RequestBody Account acc) {
	String userName = acc.getUserName();
	String password = acc.getPassword();
	return service.getAccount(userName, password);
}

三、总结

说了这么多，写了这么多，仅供大家伙参考，具体采用哪种方式根据自己实际需求来，各取所需，按照自己心中的那个标准来。
希望这篇文章能真正帮助到你！
若对于上文中的@ResponseBody、@RequestBody、@RequestParam注解还不太理解，可以参考我的另一篇文章：
https://blog.csdn.net/czm_ob/article/details/103843518

ob踏雪者
关注
专栏目录
前后台对接时JSON的处理
DurianPudding的博客
11-13 327
如何判断json字符串还是对象： // 对象 var obj = { name : 'nike' } //转化陈哥json字符串 JSON.stringify(obj); // json字符串 // 名字有冒号 // 输出：{ "name" : "nike" } 如何查看后台返回给我的数据呢 打开控制台，在network–re
[Javaweb]JSON
CR2567001684的博客
07-30 415
JSONJavaScriptObjectNotation（JavaScript对象标记法）。JSON是一种存储和交换数据的语法。JSON是一种轻量级的数据交换格式JSON是通过JavaScript对象标记法书写的文本。JSON使用JavaScript语法，但是JSON格式是纯文本的。文本可被任何编程语言作为数据来读取和使用。JSON格式最初由DouglasCrockford提出。如下是JavaScript对象的定义格式{nameage23,...
JSON：javaWeb后台JSON的封装包---源码
12-06
和 XML 一样，JSON 也是基于纯文本的数据格式。由于 JSON 天生是为 JavaScript 准备的，因此，JSON 的数据格式非常简单，您可以用 JSON 传输一个简单的 String，Number，Boolean，也可以传输一个数组，或者一个复杂的 Object 对象。 String，Number 和 Boolean 用 JSON 表示非常简单。例如，用 JSON 表示一个简单的 String “ abc ”
java web 前后台json传值
乔木晨子的博客
12-13 379
1.前端代码(Login.jsp) 注意== 之间的代码 $(function(){ //如果当前窗口不是最顶级窗口，就表示当前窗口被嵌套了 if(window.top != window){ window.top.location.hre...
javaweb 的json的前后端解析
qq_42277351的博客
08-22 191
前后台解析json字符串 https://segmentfault.com/a/1190000015363286 https://www.cnblogs.com/jtlgb/p/6137915.html
JavaWeb前后端交互。
huimoumou的博客
03-19 1059
前端代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> 账号<input type='text' id="account"><...
JavaWeb点餐系统前后台及其sql语句
12-18
【JavaWeb点餐系统前后台及其sql语句】是一个典型的Web开发项目，它结合了Java技术和SQL数据库操作，用于实现在线餐饮订购的功能。这个系统包括前端用户界面和后端服务器逻辑，通过HTTP协议进行通信，为用户提供浏览...
Ajax与JavaWeb后台分页
04-28
4. Gson库：在Java对象和JSON数据之间进行转换，方便前后台数据传输。 5. 前端处理：解析JSON数据，动态渲染页面，监听滚动事件实现无限滚动分页。 以上就是关于Ajax与JavaWeb后台分页以及Gson数据传输的详细讲解，...
基于Javaweb的前后台分离新闻管理系统
资源摘要信息:"基于Java Web技术栈构建的新闻管理系统，其核心设计理念为前后台分离。此系统允许用户通过前端界面浏览新闻内容，而新闻内容的管理与更新则由后台管理员完成。该系统使用Java作为开发语言，以及广泛...
javaweb课程设计，简单商城前后台系统，基于mawen三个模块
12-28
【标题】中的“javaweb课程设计，简单商城前后台系统”表明这是一个关于JavaWeb技术在构建电子商务平台上的应用实践项目。在这个项目中，学生或开发者将学习如何使用JavaWeb技术来开发一个基本的在线商城系统，涵盖...
JsonWebToken一个能够处理JSONWebToken和JSONWebSignature库
08-07
Json Web Token -一个能够处理JSON Web Token 和 JSON Web Signature库
Java使用ClassLoader读取外部json文件
最新发布
Yungang_Young的博客
07-06 502
我们有时候会遇到这样一种业务场景：某个对象是变化的，在不同项目的部署中，可能需要更改对象中的某个属性，这时如果我们将该对象写在代码里，这样不仅寻找不便，部署后也不能随便修改（修改后又要重新打包），这就需要将该对象解耦，单独抽离出来，做成一个json文件，放在resource中，这样即使项目上线后，我们也能随时改变，只需要重启即可。我们将该对象写成json格式，放在resources下的outside包中，内部是标准的json格式文件（略）。
Java解析及读取Json数据
喝拉菲的猫
12-31 181
1.JSON介绍 　　JSON比XML简单，主要体现在传输相同信息的情况下，文件的大小不同。 　　JSON只用于传输信息，XML还可以用于配置文件的使用。 　　JSON中的符号主要有： " , [ {: 2.JSON中的数组和对象 　　1）数组（JSONArray） 　　数组用一对[]，表示存放的是一般的数组数据。 　　如：["11","22","33"]...
java读取web项目下json文件为map集合
小康子的博客
06-07 5044
读取JSON文件并转为java中的List<Map>
Java Web篇_10 Java对JSON的处理
凤文Sharing的博客
07-19 447
JSON在Java中的转换什么是JSONJSON转换工具JacksonJackson介绍Jackson的依赖Jackson常用APIJackson使用演示Java对象与JSON的转换Map 什么是JSON 如果你没听说过什么是JSON，那就先看一下文档了解一下： https://www.w3school.com.cn/js/js_json_intro.asp JSON转换工具Jackson Jackson介绍 了解了JSON是在前端Javascript中使用的数据包，用于前后端交换数据的一种对象。当然了，前
Java web json解析交互详解
CHOSEN的专栏
10-22 5630
这段时间学习json交互，懂得了不少东西，其中碰到不少问题，最后都一一解决了。今天下班恰好有时间，总结一篇关于Java web中利用json进行前后台交互的文章，把自己的总结和近日在网上搜到的资料一一奉上。 一JSON简介及用途 Json是继XML后另一种流行的交互格式，json只是一个数据格式，而且结构非常简单，如今流行程度已经超过XML，成为最普遍的交互格式。 我自己通俗理解，如果一个场
java跨域解析json数据_java后台设计简单的json数据接口，设置可跨域访问，前端ajax获取json数据...
weixin_29530803的博客
02-26 165
在开发的过程中，有时候我们需要设计一个数据接口。有时候呢，数据接口和Web服务器又不在一起，所以就有跨域访问的问题。第一步：简单的设计一个数据接口。数据接口，听起来高大上，其实呢就是一个简单的Serlvlet,在有get的请求的时候，返回我们要提供的数据就可以。现在JSON数据格式已经很普遍，因为很方便，所以我们做一个json数据的接口。直接看代码先建立一个实体类，就是包装我们的数据的bean/k...
【工具类】 读取Resource或jar包外的json文件
dreambyday
12-26 1227
读取Resource下的json文件
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值