https://blog.csdn.net/u012373405/article/details/51277030
应用jQuery Ajax 实现前台与Struts2中Action的交互,并返回一个ArrayList的JSON对象,在前端表格中显示
2016年04月28日 19:27:50 未来开发者 阅读数:2478 标签: jquery ajax jquery ajax json struts2.0
功能描述:
在不刷新网页的情况下,发送Ajax异步请求,获取到Struts2 Action从数据库中读取的数值型数据,并在前端的表格中显示。
实现流程:
一.部署jQuery Ajax
二.JSP前台布局
三.Action业务逻辑编写
四.配置 Struts.xml
五.应用Ajax实现与Struts2的Action异步通信
解决问题:
1.jQuery Ajax getJSON异步网页刷新
2.可分页排序的表格插件动态按行添加数据
3.Ajax动态加载内容无法响应监听事件
详细设计:
一. 部署jQuery Ajax
将jquery-.**..min.js拷贝到Web工程的WebContent目录下。
利用jquery框架中ajax实现前台与struts2中action交互-模拟用户登录的例子
二. JSP前台布局
插入一个具有分页排序功能的表格插件 表格插件下载地址
插入一个按钮,用以响应用户的点击查询事件
table.jsp
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<%@taglib prefix="s" uri="/struts-tags" %>
<html>
<head>
<title>jQueryAjax应用</title>
<!-- 表格插件用到的css样式和js脚本 -->
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/slimtable.min.js"></script>
<link rel="stylesheet" href="css/slimtable.css">
<link rel="stylesheet" href="css/site.css">
<!-- 自己编写的query.js -->
<link rel="stylesheet" href="css/query.css">
</head>
<body style="background: #fac234">
<br>
<table id="exampletable">
<thead>
<tr>
<th>ImgSize</th>
<th>CpsWay</th>
<th>Total</th>
<th>DWT</th>
<th>SPIHT</th>
<th>SptCoder</th>
<th>SptUnpack</th>
<th>SegmtLink</th>
</tr>
</thead>
<tbody id="ct-tmp">
<tr>
<td>--</td>
<td>--</td>
<td>--</td>
<td>--</td>
<td>--</td>
<td>--</td>
<td>--</td>
<td>--</td>
</tr>
</tbody>
</table>
<s:submit id="query" value="查询历史数据"></s:submit>
<script type="text/javascript">
$(function() {
$("#exampletable").slimtable();
});
</script>
</body>
</html>
preview:
三. Action业务逻辑编写
逻辑功能描述:
接收前端发送的请求参数ImageSize、CpsWay。并在Action中输出参数值,在数据库表中查询所有数据,在ArrayList中存储数据,并传回该List的JSON对象。
—注意—
数据库读取功能的实现需要引入sqljdbc.jar包
为传回JSON对象,需要在WebContent目录下拷贝如下架包
AnalysisAction.java
public class AnalysisAction implements Action {
private Connection conn = null;
private Statement state = null;
private ResultSet rs = null;
private List<Vector<String>> historyTimeDataSet ;
private int imageSize;
private int cpsWay;
@Override
public String execute() throws Exception {
//查询数据库,并记录结果到historyTimeDataSet
queryDataFromDbo_CpsTime();
//将ArrayList对象转换为JSON对象
JSONArray jsonArray = JSONArray.fromObject(historyTimeDataSet);
//将JSON对象转换为字符串,并赋值给response对象,在Ajax回调函数的参数
//data中读取
HttpServletResponse response = ServletActionContext.getResponse();
response.setContentType("text/html;charset=UTF-8");
response.getWriter().write(jsonArray.toString());
return null;
}
public void queryDataFromDbo_CpsTime(){
System.out.println("imageSize="+iamgeSize+"cpsWay="+cpsWay);
try {
conn = DBTools.getConnection();
state = conn.createStatement();
String sql = "select * from mytest..compress_time";
historyTimeDataSet = new ArrayList<Vector<String>>();
PreparedStatement stmt;
stmt = conn.prepareStatement(sql);
rs = stmt.executeQuery(sql);
ResultSetMetaData data = rs.getMetaData(); //读取表中的所有列名
rs = state.executeQuery(sql); //读取表中的所有数据
while (rs.next()) {
Vector<String> tempPara = new Vector<String>();
for (int i = 1; i <= data.getColumnCount(); i++) {
if (i<=2) { tempPara.add(String.valueOf(rs.getInt(data.getColumnName(i))));
}else { tempPara.add(String.valueOf(rs.getFloat(data.getColumnName(i))));
}
}
historyTimeDataSet.add(tempPara);
}
} catch (Exception e) {
e.printStackTrace();
}finally{
DBTools.closeRs(rs);
DBTools.closeState(state);
DBTools.closeConn(conn);
}
}
public int getImageSize() {
return imageSize;
}
public void setImageSize(int imageSize) { //接收参数imageSize
this.imageSize = imageSize;
}
public int getCpsWay() {
return cpsWay;
}
public void setCpsWay(int cpsWay) { //接收参数cpsWay
this.cpsWay = cpsWay;
}
}
DBTools.java
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;
public class DBTools {
public static Connection getConnection() {
Connection conn = null;
String driverName = "com.microsoft.sqlserver.jdbc.SQLServerDriver";
String url = "jdbc:sqlserver://localhost:1433; DatabaseName=mytest";
String userName = "sa";
String passWord = "123";
try {
Class.forName(driverName);
conn = DriverManager.getConnection(url,userName,passWord );
System.out.println("Connection Successful!"); } catch (Exception e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
return conn;
}
public static void closeConn(Connection conn)
{
try {
if(conn != null)
{
conn.close();
}
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
public static void closeState(Statement state)
{
try {
if(state != null)
{
state.close();
}
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
public static void closeRs(ResultSet rs)
{
try {
if(rs != null)
{
rs.close();
}
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
}
四. 配置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>
<constant name="struts.enable.DynamicMethodInvocation" value="false" />
<constant name="struts.devMode" value="true" />
<package name="default" extends="struts-default">
<action name="queryTimeData" class="com.wlkfz.action.AnalysisAction">
</action>
</package>
<!-- Add packages here -->
</struts>
五. 应用Ajax实现与Struts2的Action异步通信
编写query.js 并在table.jsp页面内引入该脚本
query.js
var flag = 0;
$(document).ready(function(){
$("#query").click(function() {
var argsList = {"imageSize":1024,"cpsWay":1,"date":new Date()};
flag = 0;
/*Ajax getJSON方法*/
$.getJSON("queryTimeData.action", /*Action的url*/
argsList, /*JSON格式的参数列表*/
function(data){ /*回调函数*/
var table = $("#ct-tmp");
table.empty();
var content = '';
for(var i=0;i<data.length;i++){
content+='<tr>';
for(var j=0;j<data[i].length;j++){
content+='<td>'+data[i][j]+'</td>';
}
content+='</tr>';
}
$(content).appendTo(table);
/*若用append()方法则不能实现预期效果*/
});
/*
通过点击表格,
对Ajax动态加载的数据重新绑定slimtable()方法
实现对表格中动态加载数据的分页和排序功能
*/
$("#exampletable").on("click",function(){
if(flag==0){ //查询后首次点击有效
$('.slimtable-paging-div').remove(); /*table page页码和item/page*/
$('.slimtable-sprites').remove(); /*排序按钮*/
$('#exampletable').slimtable();
flag=1;
};
});
});
});
结果:
总结:
Ajax动态加载的数据可以在表格中显示,但无法使用表格插件的分页和排序功能。为使Ajax异步刷新的数据与表格插件融合,废了一番周折。
1.jQuery对网页动态添加新内容有四种方法
append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容
对本例来说,应用append方法不能向表格中正确的添加数据,而appendTo方法可以,二者在实现上有区别。
- 出于性能的考虑,我们无法对Ajax动态加载的数据进行直接处理,并且在网页源代码中也看不到Ajax动态加载的数据。如果我们想对动态加载的数据进一步的处理(本例中就想借助表格插件对动态加载的数据进行分页和排序),可以通过on对新载入的数据绑定click()事件,并重新回调监听方法(本例中为slimtable()方法),就可以基本实现功能