struts2实现jQuery的异步交互
struts2中jQuery的异步交互有两种方式：
1）是利用构造字符串的方式来实现；
使用该方法主要是在服务器端根据前端的请求，返回一个字符串信息，然后前端的jQuery通过解析该字符串信息得到对应的请求内容。该方法优点是使用比较灵活，缺点是使用比较复杂。
2）是利用struts自带的jQuery插件来实现。
使用插件方法时，其过程比较简单，和配置普通action信息一样。需要构造XXXset和XXXget方法以及execute方法。然后在struts.xml文件中配置action。该方法优点是使用简单，缺点是：需要在action中定义出前端页面中可能要获取的所有属性信息，使用起来不够灵活。
下面通过代码看一下：
Person属性映射表
package com.action.xml;
public class Person {
private int id;
private String name;
private int age;
private String address;
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public int getAge() {
return age;
}
public void setAge(int age) {
this.age = age;
}
public String getAddress() {
return address;
}
public void setAddress(String address) {
this.address = address;
}
}
客户端页面getJson.jsp代码：
<%@ page language="java" import="java.util.*" pageEncoding="GB18030"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>"> <title>My JSP 'getJson.jsp' starting page</title>
<script type="text/javascript" src="scripts/jquery-1.4.4.js"></script>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
--> <script type="text/javascript"> $(function(){
$("#button1").click(function(){
$.post("getJsonAction2.action",{name:$("#name").val()},function(returnedData,status){
var html = "<table width='60%' border='1' align='center'><tr><th>id</th><th>name</th><th>age</th><th>address</th></tr>"; var people = returnedData;
var id = people.id;
var name = people.name;
var age = people.age;
var address = people.address; var html = "<table width='60%' border='1' align='center'><tr><th>id</th><th>name</th><th>age</th><th>address</th><tr align='center'><td>"+id+"</td><td>"+name+"</td><td>"+age+"</td><td>"+address+"</td></tr></tr></table>"; $("#theBody table:eq(0)").remove();//找到id为theBody的body中的第0个table（即第一个table表）将其的内容删除掉，防止出现累加
$("#theBody").append(html);//将构建的HTML加入到id为theBody的body中 });
});
}) </script>
</head> <body id="theBody"> <select id="name">
<option value="zhangsan">zhangsan</option>
<option value="lisi">lisi</option>
</select>
<input type="button" value="get json information form server" id="button1">
</body>
</html>
以上代码是两种方式都会使用的公共代码
（1）首先是通过构造字符串实现异步交互代码：
注意：需要在WebRoot目录中导入jQuery库
package com.action.json; import java.io.PrintWriter; import javax.servlet.http.HttpServletResponse; import org.apache.struts2.ServletActionContext;
import org.dom4j.io.OutputFormat;
import org.dom4j.io.XMLWriter; import com.action.xml.Person;
import com.google.gson.Gson;
import com.opensymphony.xwork2.ActionSupport; @SuppressWarnings("serial")
public class GetJsonAction extends ActionSupport { private String name; public String getName() {
return name;
} public void setName(String name) {
this.name = name;
} @Override
public String execute() throws Exception { Person people = new Person(); people.setId(1);
people.setName(name);
people.setAge(20);
people.setAddress("beijing"); Gson gson = new Gson();
//通过Gson对象将Person对象内容以字符串格式返回
String result = gson.toJson(people); System.out.println(result); HttpServletResponse response = ServletActionContext.getResponse();
//设置http头，不使用浏览器缓冲
response.setHeader("cache-control", "no-cache");
//设置内容类型：xml异步交互是：“text/xml”;json异步交互此处是application/json
response.setContentType("application/json;charset=GB18030"); PrintWriter out = response.getWriter(); out.print(result); /*
OutputFormat format = OutputFormat.createCompactFormat();
format.setEncoding("GB18030"); XMLWriter writer = new XMLWriter(out, format); writer.write(result);*/ out.flush();
out.close(); return null;
}
}
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.3.dtd">
<struts>
<!-- 设置Struts运行模式为开发者模式，如果value为false则关闭开发者模式 -->
<constant name="struts2.devMode" value="true"></constant> <package name="struts2_ajax" namespace="/" extends="struts-default"> <action name="getJsonAction" class="com.action.json.GetJsonAction"> </action> </package>
</struts>
（2） 通过struts中的json插件实现交互代码：
说明：使用插件的方式需要导入struts给提供的struts2-json-plugin-2.3.24.jar插件
GetJsonAction2.java代码
package com.action.json;
import org.apache.struts2.json.annotations.JSON;
import com.opensymphony.xwork2.ActionSupport;
@SuppressWarnings("serial")
public class GetJsonAction2 extends ActionSupport {
private String name;
private int id;
private int age;
private String address;
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
//@JSON(name="myAge")//使用注解方式配置action
public int getAge() {
return age;
}
public void setAge(int age) {
this.age = age;
}
public String getAddress() {
return address;
}
public void setAddress(String address) {
this.address = address;
}
@Override
public String execute() throws Exception {
this.id = 1;
this.age = 30;
this.address = "brijing";
return SUCCESS;
}
}
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.3.dtd">
<struts>
<!-- 设置Struts运行模式为开发者模式，如果value为false则关闭开发者模式 -->
<constant name="struts2.devMode" value="true"></constant> <package name="struts2_ajax" namespace="/" extends="json-default"><!-- 使用json插件是需要继承json-default --> <!-- 利用struts的json插件 -->
<action name="getJsonAction2" class="com.action.json.GetJsonAction2">
<result name="success" type="json">
<!-- 如果有不需要获取的属性则需要使用以下语句过滤掉不需要的属性 -->
<!-- <param name="excludeProperties">address</param> -->
</result> </action>
</package>
</struts>
以上两种方式运行结果一样：
struts2实现jQuery的异步交互的更多相关文章
- struts2实现XML异步交互
异步交互,在不用重新提交整个页面的情况下可以实现页面局部信息与服务器的交互.在编写异步交互时需要用到一个架包:dom4j,下载地址为:https://dom4j.github.io/ 下面通过例子说明 ...
- 基于MVC4+EasyUI的Web开发框架经验总结（12）--利用Jquery处理数据交互的几种方式
在基于MVC4+EasyUI的Web开发框架里面,大量采用了Jquery的方法,对数据进行请求或者提交,方便页面和服务器后端进行数据的交互处理.本文主要介绍利用Jquery处理数据交互的几种方式,包括 ...
- 使用Struts2和jQuery EasyUI实现简单CRUD系统（转载汇总）
使用Struts2和jQuery EasyUI实现简单CRUD系统(一)——从零开始,ajax与Servlet的交互 使用Struts2和jQuery EasyUI实现简单CRUD系统(二)——aja ...
- Struts2 整合jQuery实现Ajax功能(1)
技术领域非常多东西流行,自然有流行的道理.这几天用了jQuery,深感有些人真是聪明绝顶,能将那么多技术融合的如此完美. 首先明白个概念: jQuery是什么:是使用javascript语言开发的,用 ...
- （转）基于MVC4+EasyUI的Web开发框架经验总结（12）--利用Jquery处理数据交互的几种方式
http://www.cnblogs.com/wuhuacong/p/4085682.html 在基于MVC4+EasyUI的Web开发框架里面,大量采用了Jquery的方法,对数据进行请求或者提交, ...
- AsyncTask异步交互和httpurlconnection结合使用
//网络请求数据 package com.baidu.myutils; import java.io.BufferedReader; import java.io.InputStreamReader; ...
- 实现AJAX的异步交互的步骤
<input type="button" value="异步请求"id="btn"> <script> 实现ajax ...
- AJAX 异步交互基本总结
AJAX (Asynchronous JavaScript and Xml) 直译中文 - javascript和XML的异步 同步与异步的区别: 同步交互 执行速度相对比较慢 响应的是完整的HTML ...
- 10 个基于 jQuery 的 Web 交互插件推荐
英文原文:10 jQuery for Web Interaction Plugins “用户交互”在现代的 Web 设计中占据了很大比例,这是互联网产品不可或缺的关键,对 Web 设计师也提出了更高的 ...
随机推荐
- centos7安装zabbix客户端并监控
zabbxi-agent安装及配置 1.安装zabbxi-agent yum install zabbix-agent -y 2.配置zabbxi-agent grep -n '^'[a-Z] /et ...
- 一种历史详细记录表，完整实现：CommonOperateLog 详细记录某用户、某时间、对某表、某主键、某字段的修改（新旧值
一种历史详细记录表,完整实现:CommonOperateLog 详细记录某用户.某时间.对某表.某主键.某字段的修改(新旧值). 特别适用于订单历史记录.重要财务记录.审批流记录 表设计: names ...
- airflow 实战
def print_hello(*a,**b): print a print "=========" print b print 'Hello world!' raise Valu ...
- Shell脚本交互之：自动输入密码
Shell脚本交互之:自动输入密码 2016年04月09日 19:41:26 zhangjikuan 阅读数:58208 标签: Shell交互自动输入密码expect重定向管道 更多 个人分类: A ...
- vue脚手架 构建豆瓣App 第一天
课堂笔记: 项目结构分析: 项目入口:index.html(div#app) 全局vue组件:App.vue(template:div#app) 通过相同id的div,index.html与Appvu ...
- 洛谷P3193 [HNOI2008]GT考试 kmp+dp
正解:kmp+dp+矩阵优化 解题报告: 传送门! 啊刚说想做矩阵优化dp的字符串题就找到辣QwQ虽然不是AC自动机的但都差不多嘛QwQ 首先显然可以想到一个dp式?就f[i][j]:凑出i位了,在s ...
- 使用Jersey上传文件
采用jquery.form.js异步上传图片,并结合<form>表单 <script type="text/javascript"> //采用jquery. ...
- magento开发手册之目录结构
magento是一个很优秀的电商系统,很多朋友会用它部署自己的电商网站,少不了二次开发.下面我们随着ytkah来一起认识一下magento开发手册之目录结构吧. /app – 程序根目录 /app/e ...
- perfmon——使用windows系统自带的性能监视器监控进程信息
第一次使用perfmon监控应用进程的信息,步骤总结如下: 第一部分 性能监视器 1.快捷键Win+R打开运行界面,输入“perfmon”命令后回车即可打开windows的性能监视器 2.点击“性能监 ...
- HBuilder 自动整理代码格式快捷键设置
工具 ->选项