功能描述：

在不刷新网页的情况下，发送Ajax异步请求，获取到Struts2 Action从数据库中读取的数值型数据，并在前端的表格中显示。

实现流程：

一.部署jQuery Ajax

二.JSP前台布局

三.Action业务逻辑编写

四.配置 Struts.xml

五.应用Ajax实现与Struts2的Action异步通信

解决问题：

扫描二维码关注公众号，回复： 3258911 查看本文章

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方法可以，二者在实现上有区别。

2. 出于性能的考虑，我们无法对Ajax动态加载的数据进行直接处理，并且在网页源代码中也看不到Ajax动态加载的数据。如果我们想对动态加载的数据进一步的处理（本例中就想借助表格插件对动态加载的数据进行分页和排序），可以通过on对新载入的数据绑定click()事件，并重新回调监听方法(本例中为slimtable()方法)，就可以基本实现功能。

应用jQuery Ajax 实现前台与Struts2中Action的交互,并返回一个ArrayList的JSON对象,在前端表格中显示

功能描述：

实现流程：

解决问题：

详细设计：

一. 部署jQuery Ajax

猜你喜欢