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 设计师也提出了更高的 ...
随机推荐
- debian设置软件源为阿里云
首先编辑sources.list这个文件 sudo vim /etc/apt/sources.list 把sources.list文件内容替换成如下 deb http://mirrors.aliyun ...
- 在链表中，元素的"位序"概念淡化，结点的"位置"概念淡化
在链表中,元素的"位序"概念淡化,结点的"位置"概念淡化 1 结点的描述与实现 C语言中用带指针的结构体类型来描述 typedef struct Lnode { ...
- redis分页获取数据
php代码: 采用哈希类型存储数据,有序集合存储分页数据,进行倒序与正序的排序. $getGoodsInfo = M('goods_test')->select(); for($i=0;$i&l ...
- MiniHook研究
git hub 地址: https://github.com/RaMMicHaeL/minhook
- JNI 入门
1.http://cherishlc.iteye.com/blog/1756762 Android 学习笔记--利用JNI技术在Android中调用.调试C++代码 2.http://my.eoe.c ...
- 转:Spring与Mybatis整合的MapperScannerConfigurer处理过程源码分析
原文地址:Spring与Mybatis整合的MapperScannerConfigurer处理过程源码分析 前言 本文将分析mybatis与spring整合的MapperScannerConfigur ...
- vue获取地址栏传过来的参数VS原生js获取地址栏的参数
Vue的方式 Vue的 query方式 ①this.$route.query.companyId ( companyId 为参数的名称 是$route 不是 $router) Vue的 params方 ...
- ubuntu上编译linux内核
Linux 编译:1,首先解压缩内核.2,make ARCH=arm CROSS_COMPILE=arm-xilinx-linux-gnueabi- digilent_z ...
- 微信小程序可以转发给微信好友了
微信小程序又放大招了:小程序页面可以放置转发按钮,分享更流畅.同时开放了微信运动步数.背景音乐播放等更多基础能力.小程序可以在自己的页面上放置转发按钮,用户点击后,即可将喜欢的内容分享给好友或群聊,体 ...
- 报错解决——uwsgi错误invalid request block size
uwsgi错误invalid request block size 使用uwsgi启动django代码,然后打开浏览器输入http://localhost:8000/admin.后台出现下面错误 in ...