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" >
<!-- 配置struts2根元素 -->
<struts>
<!--json-default 内部继承 struts-default -->
<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> <!-- 如果要在validate方法返回result，那么type属性也应该设置为json -->
<result name="error">/error.jsp</result>
<!-- 注意type为json -->
<result type="json" name="success">
<!-- 此处将reslut的值返回给客户端，root的值对应要返回的值的属性result (注意：root为固定写法，否则不会把result的值返回给客户端,result由action中返回) -->
<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效果啦……
分享到：
相关推荐
整合Struts2、jQuery和JSON可以极大地提升Web应用的用户体验和后端数据交互效率。下面将详细解释这些知识点： 1. **Struts2 JSON插件**：Struts2提供了一个JSON插件，允许Action直接返回JSON格式的数据，而无需额外...
总结来说，这个例子展示了如何利用Struts2处理后端业务逻辑，使用JSON作为数据交换格式，以及通过jQuery在前端实现动态更新和与服务器的异步通信。了解和掌握这三个工具的整合使用，对于提升Web开发效率和用户体验...
本实例"Struts2_jquery_json1.0.zip"显然演示了如何在Struts2框架中利用jQuery和JSON进行数据交换。Struts2的JSON插件允许我们轻松地将Java对象转换为JSON格式，以便在客户端使用JavaScript处理。jQuery则负责在前端...
- **前端交互**：jQuery通过AJAX与后台Struts2 Action通信，发送JSON请求并接收JSON响应。 - **数据展示**：Struts2 Action处理完业务逻辑后，返回JSON结果，jQuery解析后动态更新DOM展示数据。 博客链接中提到的...
在Struts2与Ajax的交互中，后端返回的JSON数据需要在前端被`json2.js`解析成可操作的对象，这样才能在页面上动态更新内容。 接下来，我们讨论Struts2的`jsonplugin`。Struts2 JSON插件是官方提供的一个扩展，它使...
Struts2、jQuery和JSON是Web开发中的三个关键技术，它们在构建动态、交互式的Web应用程序时发挥着重要作用。下面将分别对这三个技术进行详细解释，并探讨它们如何协同工作。 Struts2是一个基于MVC（Model-View-...
在Struts2与jQuery的Ajax交互中，JSON扮演着数据载体的角色，可以高效地传输数据。 **2. Struts2 JSON插件** 为了支持JSON数据交换，Struts2提供了一个JSON插件。首先，需要在项目中添加该插件的依赖，并在struts....
Struts2、jQuery、JSON和List是Web开发中常见的技术栈，它们在构建动态、交互式的Web应用程序中扮演着重要角色。这篇博文可能是探讨如何在Struts2框架中结合jQuery和JSON来处理List类型的数据。 Struts2是一个流行...
Struts2、jQuery、JSON和Ajax是Web开发中常见的技术栈，它们共同为构建动态、交互式的用户界面提供了强大的支持。下面将详细解释这些技术及其在登录示例中的应用。 Struts2是一个基于MVC（Model-View-Controller）...
在这个实例中，“整合jquery+json+struts2异步提交”是一个典型的前端与后端交互的示例，利用了jQuery的Ajax功能和Struts2框架处理JSON数据。下面我们将详细探讨这些技术及其相互配合的工作原理。 **jQuery** 是一...
将Struts2与jQuery整合，可以充分利用两者的优势，创建出具有丰富交互效果的动态Web应用。 在本项目中，"struts2整合jquery实现层拖拽即时保存"，指的是利用jQuery的拖放功能（draggable）和Struts2的Action机制，...
2. **Struts2与JSON交互**： - **JSON支持**：Struts2提供了一个名为`struts2-json-plugin`的插件，用于支持JSON格式的数据交换。 - **配置插件**：在`struts.xml`中启用JSON插件，配置Action支持JSON输出。 - **...
4. **Struts2与jQuery的集成**： - **Struts2的JSON插件**：虽然题目要求不使用JSON，但通常情况下，Struts2通过JSON插件返回数据给jQuery是最方便的方式。不过，我们可以通过设置Content-Type为"text/plain"或...
在项目中，`Struts2JQueryJson`文件夹可能包含了HTML页面、JavaScript脚本、Struts2相关的Action类、以及可能的 strut2 配置文件等资源。 总结来说，这个实例通过结合Struts2的后端控制、jQuery的前端交互和JSON的...
Struts2、jQuery和JSON是Web开发中的三个关键组件，它们共同构成了高效、动态和交互式的用户界面。这里我们将深入探讨这三个技术，并结合实例来理解它们如何协同工作。 首先，Struts2是一个基于MVC（Model-View-...
Struts2、jQuery、JSON和Ajax是Web开发中常见的技术栈，它们在构建动态、交互式的Web应用程序中扮演着重要角色。这篇博文可能是介绍如何将这些技术整合到一起，以提高用户界面的响应性和用户体验。 Struts2是一个...
总结来说，这个"ProductSystem"项目通过整合Struts2、jQuery、JSON和Ajax技术，实现了高效的前后端数据交互，提供了动态的用户界面，是学习和实践这些技术的好例子。通过深入理解并实践这个项目，开发者可以更好地...
在Struts2与JQuery结合的场景下，Action类可以接收并返回JSON对象，然后JQuery通过Ajax请求获取这个值。 3. **获取对象值**：如果JSON对象包含其他对象，可以通过点号或方括号语法访问。例如，`{"person": {...