Struts2实现JSON和Ajax操作

“两个蝴蝶飞”特别喜欢"java1234知识分享网"小峰的实用主义，所以本文及其系列文章均是采用实用主义，从项目和代码的角度去分析。由于本人经验有限，嘴皮子不溜，所以学术性，概念性，底层性的知识点暂时不做介绍。文章中有错误之处，欢迎拍砖和指点。特别感谢"java1234知识分享网 "和"黑马程序员官网"，所有的资料大部分是两者提供，为了方便书写，故不一一指名出处，请谅解，非常抱歉。

上一章简单介绍了Struts2使用Token避免表单重复提交(全)(十三),如果没有看过，请观看上一章

在网页操作的时候，利用JSON数据进行前后端的传输，利用Ajax进行异步的提交。重要性就不说了。首先要搭建一个基本的Struts运行环境。(不要忘记在web.xml中配置过滤器)

一添加整合的Json依赖(Jar包)

将这些Jar包从Struts中找到，然后放置到WEB-INF下的lib包下，添加到path中。

特别不要忘记用struts2-json-plugin-2.3.30.jar包。

以下是关于Struts2比较全的Jar包

二 Struts2与Ajax交互简单

二.一新建UserAction类

package com.yjl.web.action;
import org.apache.log4j.Logger;
import com.opensymphony.xwork2.ActionSupport;
import com.opensymphony.xwork2.ModelDriven;
import com.yjl.pojo.User;
/**
* @author 两个蝴蝶飞
* @version 创建时间：2018年9月14日 下午6:35:10
* 演示json交互的Action
*/
public class UserAction extends ActionSupport implements ModelDriven<User>{
	private static final long serialVersionUID = -4164832837385401186L;
	private static Logger logger=Logger.getLogger(UserAction.class);
	private User user=new User();
	//定义结果,为字符串类型,这个非常重要
	private String result;
	public String getResult() {
		return result;
	}
	public void setResult(String result) {
		this.result = result;
	}
	public User getModel(){
		return user;
	}
	public String register(){
		logger.info("注册时的名称为:"+user.getName());
                //只是简单的验证，判断一下是否是两个蝴蝶飞
		if("两个蝴蝶飞".equals(user.getName())){
			result="true";
		}else{
			result="false";
		}    
        //得到的是一个字符串
		logger.info("结果为:"+result);
		return "register";
	}
}

注意，此时接收的字符串为result. 要与struts2中配置的结果相同一致。

二.二配置struts.xml文件

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE struts PUBLIC
	"-//Apache Software Foundation//DTD Struts Configuration 2.3//EN"
	"http://struts.apache.org/dtds/struts-2.3.dtd">
<struts>
	<!-- 继承的包为json-default,可以进行多重继承 -->
	<package name="user" namespace="/" extends="struts-default,json-default">
		<action name="User_*" class="com.yjl.web.action.UserAction" method="{1}">
			<!-- 返回类型为json -->
			<result name="register" type="json">
					<!-- 参数中name为root,结果为result.与Action中接收结果的值相同 -->
					<param name="root">result</param>
			</result>
		</action>
	</package>
</struts>

二.三编写前端界面，引入jquery.js库

<body>
	<h3>这是一个注册框架的页面</h3>
	<s:form action="User_register" method="post" namespace="/">
		<s:textfield label="用户名" name="name" id="name" cssClass="inputClass"></s:textfield><label id="nameError"></label>
		<s:password label="密碼" name="password"></s:password><br>
		 <br/>
		<s:submit value="提交"/>
	</s:form>
</body>

二.四编写前端验证，调用ajax验证

<script src="jquery-3.1.0.min.js"></script>
<script>
$(function(){
	$(".inputClass").blur(function(){
		//1. 得到移出标签的这个id
		var id=$(this).attr("id");
		//设置要执行的是哪一个方法  toUpperCase() substring  不要忘记()
		//2. 根据id去拼凑function的方法,这个方法起得应该是: loginName--->validateLoginName();
		var funName="validate"+id.substring(0,1).toUpperCase()+id.substring(1)+"()";
		//alert(funName);
		//3.用eval()去验证这个方法
		eval(funName);
	})
});
/*
 * 图片验证码的验证
 */
function validateName(){
	//设置对象
	var id="name";
	//得到值
	var value=$("#"+id).val();
	//设置标签Label的对象.
	var $label=$("#"+id+"Error");
	if(!value){
		//如果为空,则使其对应的label的text进行设置,调用showError()方法.
		$label.text(" 用户名不能为空");
		showError($label);
		//返回false
		return false;
	}
	/*
	 * 2. 对服务器端的不唯一进行分析判断
	 */
	$.ajax(
			{
				url:"/Struts_JSON/User_register.action",
				type:"post",
				data:{
					"name":value},
				dataType:"json",
				async:false,
				success:function(result){
					//alert(typeof(result)); ==>String
					//1.用JSON去转换这个字符串为json对象
					var obj=JSON.parse(result);
					console.log(obj);
					if(obj){
						$label.text("该用户名已经存在");
						showError($label);
						//返回false
						return false;
					}else{
						$label.text("");
						showError($label);
					}
				}
			});
	return true;
}
/**
 * 9 写showError方法，去判断这个标签是否显示。
 * 如果这个标签有值，则显示。
 * 如果没有值，则不显示.
 */
function showError(ele){
	//看是否有文字，如果有文字，则显示。没有，则隐藏
	var text=ele.text();
	if(!text){
		//是ele.css,不是text.css
		ele.css("display","none");
	}else{
		ele.css("display","");
	}
}
</script>

二.五重启服务器，进行验证

输入网址是: http://localhost:8090/Struts_JSON/register.jsp

如果输入的不是两个蝴蝶飞:

返回的是false

如果输入的是两个蝴蝶飞

输出的结果为:

1.验证一个简单的字符串成功。如果返回的是单纯的"true","false",会自动转成为boolean类型的true,false.

如果返回的是普通的字符串或者是文字，即result="帅哥", result="123"

那么可以判断为:

if(obj=="帅哥"){
    //成功
}
if(obj==123){
    //成功
}

2. 在解析JSON的时候，用的是JSON.parse(result)。有些低版本的浏览器是不支持JSON.parse(result)这种形式的，可以去:

https://github.com/douglascrockford/JSON-js/blob/master/json2.js 下载一个json2.js文件。引用这个文件即可。

如果不想下载的话，可以用Jquery中自带的解析.

var obj=$.parseJSON(result);

我看网上说有: var obj=result.parseJSON() 的写法，试了试，是错误的。我们从后台传过来的是一个JSON类型的字符串，本质上来说，是一个字符串。而字符串是没有parseJSON()的函数的。可以用$.parseJSON(result)来实现。

3.有的也用eval()来实现的。即

	var obj=eval('(' + result + ')');

这样也可以进行正常的解析。但会引起脚本注入的问题，不太安全。不建议使用。

4.补充,将JSON对象转换成JSON字符串，可以使用

JSON.stringify(obj);

如:从后端得到数据之后:

//1.用JSON去转换这个字符串为json对象
var obj=eval('(' + result + ')');
//现在obj是一个json对象了.
var r=JSON.stringify(obj);
console.log(r+",类型:"+typeof(r));
console.log(obj+",类型:"+typeof(obj));

5. 在进行转换时，也可以在struts.xml中进行配置，配置哪些不需要转换，哪些需要转换的属性。如

            <!-- 返回类型为json -->
			<result name="register" type="json">
					<!-- 参数中name为root,结果为result.与Action中接收结果的值相同 -->
					<param name="root">result</param>
					<param name="excludeProperties">去除不需要的属性</param>
					<param name="includeProperties">要哪些属性</param>    
			</result>

但一般都不会在struts.xml中进行相应的配置，而是在生成字符串时，就直接进行筛选了。

三特别说明

上面的例子只是简单的返回一个字符串，实际开发了，返回的并不仅仅是一个字符串，有多个字符串，有JavaBean属性，有List,有Map等多种形式。但无论哪种形式，最终都会返回的是JSON类型的字符串。我们需要在后端利用json.jar，或者fastjson.jar包对对象进行处理，快速生成JSON类型的字符串。主要操作是生成JSON类型的字符串操作。而在前端，主要是对JSON进行相应的解析，根据不同的情况进行解析。至于JavaBean如何转换成JSON字符串，List如何转换成JSON字符串，前端如何对JSON进行解析，可以参照老蝴蝶飞的JSON系列。

谢谢!!!