Struts2整合jquery利用json与后台交互

最新推荐文章于 2025-08-23 23:21:14 发布

huang445190448

最新推荐文章于 2025-08-23 23:21:14 发布

阅读量116

点赞数

分类专栏：学习笔记文章标签： json struts web jquery ViewUI

学习笔记专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何使用Struts2整合jQuery进行JSON交互，通过实例展示了通过账号密码查询类并以JSON格式返回实体类的过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Struts2整合jquery利用json与后台交互
总觉得写个实例更容易理解,这个例子是通过帐号密码查出一个类然后将一个实体类由json格式返回。
环境是由eclipse搭建
Json需要的包
commons-beanutils.jar
commons-collections-3.2.jar
commons-lang.jar
commons-logging-1.1.1.jar
ezmorph-1.0.3.jar
json-lib-2.1-jdk15.jar
struts2-json-plugin-2.2.1.1.jar
struts需要的包
…………
项目名strutsJquery

1.Web.xml配置
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" id="WebApp_ID" version="2.5">
<filter>
<filter-name>struts2</filter-name>
<filter-class>org.apache.struts2.dispatcher.FilterDispatcher</filter-class>
</filter>
<filter-mapping>
<filter-name>struts2</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
</web-app>

2.建立Index.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(function(){
$("#sub").click(function(){
//将form表单中的数据一同序列化，以便传递到后台
var params = $("#reg").serialize();
//通过getjson方法与后台经行交互
$.getJSON("reg.action",params,function(text){
var rs = $.parseJSON(text);
//注意这里的rs.data 的 data 是在后台定义的
//返回的val是一个json格式的对象即{"data":[{"id":1,"pwd":"123","uname":"qwe"}]}
$.each(rs.data,function(key,val){
$("#vie").append("<tr class=gg><td>"+val.id+"</td><td>"+val.uname+"</td><td>"+val.pwd+"</td></tr>");
});
});

/*
第二种方式
$.ajax({
url: "reg",
// 数据发送方式
type: "post",
// 接受数据格式
dataType : "json",
// 要传递的数据
data : params,
// 回调函数，接受服务器端返回给客户端的值，即result值
success : function(result){
//测试result是否从服务器端返回给客户端
//alert(result);
//解析json对象
var re = eval("("+result+")");
alert(re);
for(var i=0;i<re.data.length;i++){
$("#vie").append("<tr class=gg><td>"+re.data[i].id+"</td><td>"+re.data[i].userName+"</td><td>"+re.data[i].passwd+"</td></tr>");
}
}
}); */
});
});
</script>
</head>

<body>
<form action="reg.action" id="reg" mothod="post">
<table>
<tr><td>用户名：<input type="text" name="bean.uname"/></td></tr>
<tr><td>密码：<input type="password" name="bean.pwd"/></td></tr>
<tr><td><input type="button" value="提交" id="sub"></td></tr>
</table>
<hr>

<table id="vie" class="tt">
<tr>
<td>id</td>
<td>用户名</td>
<td>密码</td>
</tr>
</table>
</form>
</body>
</html>

3.Struts.xml
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE struts PUBLIC
"-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
"http://struts.apache.org/dtds/struts-2.0.dtd" >


<struts>

<package name="userReg" extends="json-default">
<action name="reg" class="com.strutsJquery.action.RegAction">
<result type="dispatcher">/index.jsp</result>
<result name="input">/reg.jsp</result> 
<result name="error">/error.jsp</result>

<result type="json" name="success">

<param name="root">result</param>
</result>
</action>
</package>
</struts>
4. com.strutsJquery.action.RegAction
package com.strutsJquery.action;

import java.util.ArrayList;

public class RegAction extends ActionSupport {
//表单formBean
private UserInfo bean;
//json结果集对应struts.xml中的result
private String result;

public UserInfo getBean() {
return bean;
}
public void setBean(UserInfo bean) {
this.bean = bean;
}
public String getResult() {
return result;
}
public void setResult(String result) {
this.result = result;
}

public String execute() throws Exception{
System.out.println("userName: "+bean.getUname());
System.out.println("passwd: "+bean.getPwd());
/*连接数据库拿值就不写了下面模拟从数据库得到很多值*/
List<UserInfo> list = new ArrayList<UserInfo>();
UserInfo ui=new UserInfo();
ui.setId(1);
ui.setUname(bean.getUname());
ui.setPwd(bean.getPwd());
list.add(ui);

/*JsonMetaDate是Util包里面自己写的一个类 */
JsonMetaData.getJsonResult(list);

System.out.println(JsonMetaData.getJsonResult(list));
this.result = JsonMetaData.getJsonResult(list);
return SUCCESS;
//return service.service(getBean())? SUCCESS : ERROR;
}
}
5. com.strutsJquery.entity.UserInfo
package com.strutsJquery.entity;

public class UserInfo {
private int id;
private String uname;
private String pwd;
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public String getUname() {
return uname;
}
public void setUname(String uname) {
this.uname = uname;
}
public String getPwd() {
return pwd;
}
public void setPwd(String pwd) {
this.pwd = pwd;
}

}
6.com.strutsJquery.util.JsonMetaData
package com.strutsJquery.util;

import java.util.List;
import net.sf.json.JSONArray;
import net.sf.json.JSONObject;

public class JsonMetaData {
public static String getJsonResult(List<?> list){
JSONObject json = new JSONObject();
JSONArray array = new JSONArray();
//将得到的list转换为json格式
if(list!=null&&list.size()!=0){
for(int i=0;i<list.size();i++){
// JSONObject.fromObject()将一个类转换成json格式
array.add(JSONObject.fromObject(list.get(i)));
}
//put进json里面并给个对象名data，也就是前台jsp页面用到的data
json.put("data", array);
}else{
return null;
}
//返回json格式的字符串
return json.toString();
}
}

最后的效果

既然类都可以从后台传过来，就可以做出很多很好的AJAX效果啦……