SSH框架下的条件查询及查询结果分页

最新推荐文章于 2024-06-20 14:26:28 发布

旭旭同学

最新推荐文章于 2024-06-20 14:26:28 发布

阅读量2.1w

点赞数 11

分类专栏： Java开发

本文链接：https://blog.csdn.net/kaka0509/article/details/72597699

版权

Java开发专栏收录该内容

24 篇文章 0 订阅

订阅专栏

之前看过许多别人BLOG中写的方案，但是没有自己动手从数据库、后端、前端全过程实现的话，难以发现自己存在问题。一是没有形成自己独有的解决方案，二是不知道理论和现实之间的差异。

本文例子的使用场景：数据库中存储了一系列商品信息，字段包括商品名字和商品价格。
需要实现功能：商品名字支持模糊查询，商品价格支持精确查询。查询结果分页显示。

一、数据准备
数据库的实验数据

二、项目结构
项目的目录结构
按照惯例，创建的是Maven项目，方便依赖Jar包的导入。vo包存放的是封装好的分页数据类，提供前端进行数据展示。

三、配置文件的编写
省略web.xml和两个peoperties，因为没有特别需要注意的点。
实际在写程序时，我生成了配置文件后不会直接去写。我习惯先写一部分通用的配置，例如数据库连接池和通用事务管理器等。其他的会留到写完类文件之后，需要进行单元测试时才配置到Spring容器中。

1、Spring配置文件。因为Bean的数量少，我偷懒采用直接写的方式。没有用到包扫描。

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:aop="http://www.springframework.org/schema/aop"
    xmlns:tx="http://www.springframework.org/schema/tx" xmlns:context="http://www.springframework.org/schema/context"
    xsi:schemaLocation="http://www.springframework.org/schema/beans
         http://www.springframework.org/schema/beans/spring-beans.xsd
         http://www.springframework.org/schema/aop
         http://www.springframework.org/schema/aop/spring-aop.xsd
         http://www.springframework.org/schema/tx
         http://www.springframework.org/schema/tx/spring-tx.xsd
         http://www.springframework.org/schema/context
         http://www.springframework.org/schema/context/spring-context.xsd">
    <!-- 1：配置数据库相关参数 -->
    <context:property-placeholder location="classpath:jdbc.properties" />

    <!-- 2：数据库连接池Druid -->
    <bean id="dataSource" class="com.alibaba.druid.pool.DruidDataSource"
        init-method="init" destroy-method="close">
        <!-- 配置连接池属性 -->
        <property name="driverClassName" value="${jdbc.driverClassName}" />
        <property name="url" value="${jdbc.url}" />
        <property name="username" value="${jdbc.username}" />
        <property name="password" value="${jdbc.password}" />
        <!-- 配置初始化大小、最小、最大 -->
        <property name="initialSize" value="1" />
        <property name="minIdle" value="1" />
        <property name="maxActive" value="20" />
    </bean>

    <!-- 配置Hibernate相关属性 -->
    <bean id="sessionFactory"
        class="org.springframework.orm.hibernate4.LocalSessionFactoryBean">
        <property name="dataSource" ref="dataSource" />
        <!-- 配置Hibernate属性 -->
        <property name="hibernateProperties">
            <props>
                <prop key="hibernate.dialet">org.hibernate.dialect.MySQLDialect</prop>
                <prop key="hibernate.show_sql">true</prop>
                <prop key="hibernate.format_sql">true</prop>
                <prop key="hibernate.hbm2ddl.auto">update</prop>
            </props>
        </property>
        <!-- 加载映射文件 -->
        <property name="mappingResources">
            <list>
                <value>org/lzx/sshm/domain/Product.hbm.xml</value>
                <value>org/lzx/sshm/domain/Department.hbm.xml</value>
                <value>org/lzx/sshm/domain/Employee.hbm.xml</value>
            </list>
        </property>
    </bean>


    <!-- 配置Action的类 多例 -->
    <bean id="productAction" class="org.lzx.sshm.action.ProductAction"
        scope="prototype">
        <!-- 手动注入Service -->
        <property name="productService" ref="productService"></property>
    </bean>

    <!-- 配置业务层的类 -->
    <bean id="productService" class="org.lzx.sshm.service.impl.ProductServiceImpl">
        <property name="productDao" ref="productDao" />
    </bean>

    <!-- 配置DAO层的类 -->
    <bean id="productDao" class="org.lzx.sshm.dao.impl.ProductDaoImpl">
        <property name="sessionFactory" ref="sessionFactory"></property>
    </bean>

    <!-- 配置事务管理器 -->
    <bean id="transactionManager"
        class="org.springframework.orm.hibernate4.HibernateTransactionManager">
        <property name="sessionFactory" ref="sessionFactory"></property>
    </bean>
    <!-- 开启注解事务 -->
    <tx:annotation-driven transaction-manager="transactionManager" />
</beans>

2、Struts的配置文件

<?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>
    <package name="ssh" extends="struts-default" namespace="/">
        <!-- 由Spring负责创建action实体 -->
        <!-- struts配置中的class直接写spring中的bean id，这种方式创建的Action可以使用aop进行管理 -->
        <action name="product_*" class="productAction" method="{1}">
            <!-- 这个是使用直接提交表单形式 -->
            <result name="findAll">/jsp/show2.jsp</result>
        </action>
        <!-- 单纯用于跳转到显示页面，这个是使用Ajax -->
        <action name="viewProduct">
            <result>/jsp/show4.jsp</result>
        </action>
    </package>
</struts>

3、Hibernate交给Spring容器管理之后，就不需要写cfg.xml文件了。
右击Product实体类，使用Hibernate Tools自动生成对应的hbm.xml文件。

<?xml version="1.0"?>
<!DOCTYPE hibernate-mapping PUBLIC "-//Hibernate/Hibernate Mapping DTD 3.0//EN"
"http://hibernate.sourceforge.net/hibernate-mapping-3.0.dtd">

<hibernate-mapping>
    <class name="org.lzx.sshm.domain.Product" table="PRODUCT">
        <id name="pid" type="java.lang.Integer">
            <column name="PID" />
            <generator class="native" />
        </id>
        <property name="pname" type="java.lang.String" length="20">
            <column name="PNAME" />
        </property>
        <property name="price" type="java.lang.Double">
            <column name="PRICE" />
        </property>
    </class>
</hibernate-mapping>

四、实体类编写

商品实体类 Product.java

public class Product {
    private Integer pid;
    private String pname;
    private Double price;
    //省略构造函数和get/set方法  
}

分页对象VO Pager.java

public class Pager<T> implements Serializable {

    private static final long serialVersionUID = -8741766802354222579L;

    private int pageSize; // 每页显示多少条记录

    private int currentPage; //当前第几页数据

    private int totalRecord; // 一共多少条记录

    private int totalPage; // 一共多少页记录

    private List<T> dataList; //要显示的数据

    public Pager(int pageNum, int pageSize, List<T> sourceList){
        if(sourceList == null || sourceList.isEmpty()){
            return;
        }

        // 总记录条数
        this.totalRecord = sourceList.size();

        // 每页显示多少条记录
        this.pageSize = pageSize;

        //获取总页数
        this.totalPage = this.totalRecord / this.pageSize;
        if(this.totalRecord % this.pageSize !=0){
            this.totalPage = this.totalPage + 1;
        }

        // 当前第几页数据
        this.currentPage = this.totalPage < pageNum ?  this.totalPage : pageNum;

        // 起始索引
        int fromIndex   = this.pageSize * (this.currentPage -1);

        // 结束索引
        int toIndex  = this.pageSize * this.currentPage > this.totalRecord ? this.totalRecord : this.pageSize * this.currentPage;

        this.dataList = sourceList.subList(fromIndex, toIndex);
    }

    public Pager(){

    }

    public Pager(int pageSize, int currentPage, int totalRecord, int totalPage,
            List<T> dataList) {
        super();
        this.pageSize = pageSize;
        this.currentPage = currentPage;
        this.totalRecord = totalRecord;
        this.totalPage = totalPage;
        this.dataList = dataList;
    }

    public int getPageSize() {
        return pageSize;
    }

    public void setPageSize(int pageSize) {
        this.pageSize = pageSize;
    }

    public int getCurrentPage() {
        return currentPage;
    }

    public void setCurrentPage(int currentPage) {
        this.currentPage = currentPage;
    }

    public int getTotalRecord() {
        return totalRecord;
    }

    public void setTotalRecord(int totalRecord) {
        this.totalRecord = totalRecord;
    }

    public int getTotalPage() {
        return totalPage;
    }

    public void setTotalPage(int totalPage) {
        this.totalPage = totalPage;
    }

    public List<T> getDataList() {
        return dataList;
    }

    public void setDataList(List<T> dataList) {
        this.dataList = dataList;
    }

    @Override
    public String toString() {
        return "Pager [pageSize=" + pageSize + ", currentPage=" + currentPage + ", totalRecord=" + totalRecord
                + ", totalPage=" + totalPage + ", dataList=" + dataList + "]";
    }


}

五、DAO层编写

DAO接口：ProductDao.java

/**
 * 商品管理的Dao
 * 
 * @author Skye
 *
 */
public interface ProductDao  {

    /**
     * 根据查询条件，查询商品分页信息
     * 
     * @param searchModel
     *            封装查询条件
     * @param pageNum
     *            查询第几页数据
     * @param pageSize
     *            每页显示多少条记录
     * @return 查询结果
     */
    Pager<Product> findByPage(Product searchModel, int pageNum,
            int pageSize);


}

DAO实现类：ProductDaoImpl.java

public class ProductDaoImpl extends HibernateDaoSupport implements ProductDao {

    public Pager<Product> findByPage(Product searchModel, int pageNum, int pageSize) {

        // 声明结果集
        Pager<Product> result = null;

        // 存放查询参数
        Map<String, Object> paramMap = new HashMap<String, Object>();

        String proName = searchModel.getPname();
        Double price = searchModel.getPrice();

        StringBuilder hql = new StringBuilder("from Product where 1=1");
        StringBuilder countHql = new StringBuilder("select count(pid) from Product where 1=1 ");

        if (proName != null && !proName.equals("")) {
            hql.append(" and pname like :proName ");
            countHql.append("  and pname like :proName ");
            paramMap.put("proName", "%" + proName + "%");
        }

        if (price != null && !price.equals("")) {
            hql.append(" and price = :price ");
            countHql.append(" and price = :price ");
            paramMap.put("price", price);
        }

        // 起始索引
        int fromIndex = pageSize * (pageNum - 1);

        // 存放所有查询出的商品对象
        List<Product> productList = new ArrayList<Product>();

        Session session = null;

        // 获取被Spring托管的session
        session = this.getHibernateTemplate().getSessionFactory().getCurrentSession();

        // 获取query对象
        Query hqlQuery = session.createQuery(hql.toString());
        Query countHqlQuery = session.createQuery(countHql.toString());

        // 设置查询参数
        setQueryParams(hqlQuery, paramMap);
        setQueryParams(countHqlQuery, paramMap);

        // 从第几条记录开始查询
        hqlQuery.setFirstResult(fromIndex);

        // 一共查询多少条记录
        hqlQuery.setMaxResults(pageSize);

        // 获取查询的结果
        productList = hqlQuery.list();

        // 获取总记录数
        List<?> countResult = countHqlQuery.list();
        int totalRecord = ((Number) countResult.get(0)).intValue();

        // 获取总页数
        int totalPage = totalRecord / pageSize;
        if (totalRecord % pageSize != 0) {
            totalPage++;
        }

        // 组装pager对象
        result = new Pager<Product>(pageSize, pageNum, totalRecord, totalPage, productList);

        return result;
    }

    /**
     * 设置查询的参数
     * 
     * @param query
     * @param paramMap
     * @return
     */
    private Query setQueryParams(Query query, Map<String, Object> paramMap) {
        if (paramMap != null && !paramMap.isEmpty()) {
            for (Map.Entry<String, Object> param : paramMap.entrySet()) {
                query.setParameter(param.getKey(), param.getValue());
            }
        }
        return query;
    }
}

六、Service层编写
接口： ProductService.java

public interface ProductService {

    /**
     * 根据查询条件，查询商品分页信息
     * 
     * @param searchModel
     *            封装查询条件
     * @param pageNum
     *            查询第几页数据
     * @param pageSize
     *            每页显示多少条记录
     * @return 查询结果
     */

    Pager<Product> findByPage(Product searchModel, int pageNum, int pageSize);

}

实现类： ProductServiceImpl.java

public class ProductServiceImpl implements ProductService {

    private ProductDao productDao;

    public void setProductDao(ProductDao productDao) {
        this.productDao = productDao;
    }

    public Pager<Product> findByPage(Product searchModel, int pageNum, int pageSize) {
        Pager<Product> result = productDao.findByPage(searchModel, pageNum, pageSize);
        return result;
    }

}

七、控制层Action编写
这个Action采用了两套不同的方法。
方式一： findAll方法是支持前端使用Form表单直接提交查询数据，然后将分页对象压入值栈（方式很多，存入Servlet 对象中也是可行的）；
方式二： findAllJSON方法是支持前端AJAX提交数据然后返回JSON格式数据的。详情见注释。

public class ProductAction extends ActionSupport implements ModelDriven<Product> {

    // 模型驱动需要使用的实体类
    private Product product = new Product();

    //该例子实际没有用到自动绑定，数据从request对象中取了
    public Product getModel() {
        return product;
    }

    //返回前端的JSON字符串，需要提供get/set方法
    private String responseStr; 

    public String getResponseStr() {
        return responseStr;
    }

    public void setResponseStr(String responseStr) {
        this.responseStr = responseStr;
    }

    // Struts和Spring整合过程中按名称自动注入的业务层类
    private ProductService productService;

    public void setProductService(ProductService productService) {
        this.productService = productService;
    }

    // 方式一
    public String findAll() {
        System.out.println("控制器方法启动");
        // 使用struts2的servlet接口，接收request里的参数
        // 商品名字参数
        HttpServletRequest request = ServletActionContext.getRequest();
        String proName = request.getParameter("proName");
        // 获取价格
        Double price = null;
        String priceStr = request.getParameter("price");
        if (priceStr != null && !"".equals(priceStr.trim())) {
            price = Double.parseDouble(priceStr);
        }

        // 校验pageNum参数输入合法性
        String pageNumStr = request.getParameter("pageNum");
        System.out.println("前端给的pageNum是："+pageNumStr);

        int pageNum = 1; // 默认显示第几页数据
        if (pageNumStr != null && !"".equals(pageNumStr.trim())) {
            pageNum = Integer.parseInt(pageNumStr);
        }

        int pageSize = 5; // 默认每页显示多少条记录
        String pageSizeStr = request.getParameter("pageSize");
        if (pageSizeStr != null && !"".equals(pageSizeStr.trim())) {
            pageSize = Integer.parseInt(pageSizeStr);
        }

        // 组装模糊查询条件
        Product searchModel = new Product();
        searchModel.setPname(proName);
        searchModel.setPrice(price);
        System.out.println("==============Product对象==============");
        System.out.println(searchModel);
        // 调用service 获取查询结果
        Pager<Product> result = productService.findByPage(searchModel, pageNum, pageSize);

        // 将pageBean存入值栈，供前端页面读取        
        ActionContext.getContext().getValueStack().push(result);
        // 将查询条件也压回值栈，在初始化函数中为其初始化
        ActionContext.getContext().getValueStack().push(searchModel);
        System.out.println("==============Pager对象==============");
        System.out.println(result);
        System.out.println("控制器方法完成");
        return "findAll";
    }

    //方式二：Ajax+JSON
    public String findAllJSON() {
        // 使用struts2的servlet接口，接收request里的参数
        // 商品名字参数
        HttpServletRequest request = ServletActionContext.getRequest();
        HttpServletResponse response = ServletActionContext.getResponse();
        String proName = request.getParameter("proName");
        // 获取价格
        Double price = null;
        String priceStr = request.getParameter("price");
        if (priceStr != null && !"".equals(priceStr.trim())) {
            price = Double.parseDouble(priceStr);
        }

        // 取得页面索引
        String pageNumStr = request.getParameter("pageNum");


        int pageNum = 1; // 默认显示第几页数据
        if (pageNumStr != null && !"".equals(pageNumStr.trim())) {
            pageNum = Integer.parseInt(pageNumStr);
        }

        int pageSize = 5; // 默认每页显示多少条记录
        String pageSizeStr = request.getParameter("pageSize");
        if (pageSizeStr != null && !"".equals(pageSizeStr.trim())) {
            pageSize = Integer.parseInt(pageSizeStr);
        }

        // 组装模糊查询条件
        Product searchModel = new Product();
        searchModel.setPname(proName);
        searchModel.setPrice(price);
        // 调用service 获取查询结果
        Pager<Product> result = productService.findByPage(searchModel, pageNum, pageSize);
        // 将查询结果封装成JSON字符串格式    
        responseStr = JSONObject.toJSONString(result);
        System.out.println(responseStr);
        // 利用response对象传回前端
        response.setHeader("Cache-Control", "no-cache");  
        response.setHeader("Pragma", "no-cache");  
        response.setDateHeader("Expires", 0);  
        response.setContentType("text/html;charset=utf-8");     
        try {
            Writer writer = response.getWriter();
            writer.write(responseStr);
            writer.flush();
        } catch (IOException e) {
            e.printStackTrace();
        }

        return NONE;
    }
}

八、前端的实现方式
都采用了JQuery-Pagination插件。
方式一：
注意：在Struts值栈中的对象，可以直接用属性名拿到他的值。比如说，我们之前往值栈中push了一个Pager对象，他有一个属性是dataList，那么我们就能够直接在c:forEach items=”${dataList}”；为了保留上一页的查询条件，我们需要从后台把查询条件再次传回前台，所以往值栈push了一个Product类对象，因此在使用JavaScript初始化函数时，就可以为$(“#pro_name”).val(“${pname}”); $(“#pro_price”).val(“${price}”);设定分页查询的属性值。这么做的原因是，直接使用Form的Submit提交是同步的，会直接刷新整个页面，那么之前文本框里的查询条件就会丢失。可以采用Chrome的F12开发者工具进行分析。

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib uri="/struts-tags" prefix="s"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
.table1 {
    border: 1px solid #ddd;
    width: 900px;
}

thead {
    background-color: lightblue;
}
</style>
</head>


<%
    // 获取请求的上下文
    String context = request.getContextPath();
%>
<link href="${pageContext.request.contextPath}/css/pagination.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.11.3.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.pagination.js"></script>
<script type="text/javascript">
// 点击分页按钮以后触发的动作
function handlePaginationClick(new_page_index, pagination_container) {
    $("#proForm").attr("action", "<%=context %>/product_findAll.action?pageNum=" + (new_page_index +1));
    $("#proForm").submit();
    return false;
}

//初始化函数
$(function(){
    $("#News-Pagination").pagination(${totalRecord}, {
        items_per_page:${pageSize}, // 每页显示多少条记录
        current_page:${currentPage} - 1, // 当前显示第几页数据
        num_display_entries:2, // 连续分页主体显示的条目数
        next_text:"下一页",
        prev_text:"上一页",
        num_edge_entries:2, // 连接分页主体，显示的条目数
        callback:handlePaginationClick, //执行的回调函数，也就是去获取新的分页数据
        load_first_page:false //防止页面一直刷新( 这条非常重要！)        
    }); 
    // 初始化时就获得后台发过来的前一次的查询参数
    $("#pro_name").val("${pname}");
    $("#pro_price").val("${price}");

});
</script>


<body>
    <div>
        <form action="<%=context %>/product_findAll.action" id="proForm" method="post">
            商品名称 <input type="text" name="proName" id="pro_name" style="width: 120px" > &nbsp; 
            商品价格 <input type="text" name="price" id="pro_price" style="width: 120px" > &nbsp; 
        <input type="submit" value="查询">
        </form>
    </div>
<c:if test="${fn:length(dataList) gt 0 }">
<table border="1px" cellspacing="0px"
                style="border-collapse: collapse">
                <thead>
                    <tr height="30">
                <td align="center">商品编号</td>
                <td align="center">商品名称</td>
                <td align="center">商品价格</td>
                    </tr>
                </thead>
                    <c:forEach items="${dataList}" var="p">
                        <tr>
                            <td><c:out value="${p.pid }"></c:out></td>
                            <td><c:out value="${p.pname }"></c:out></td>
                            <td><c:out value="${p.price }"></c:out></td>
                        </tr>
                    </c:forEach>
            </table>
            <br> 
            <div id="News-Pagination"></div>
    </c:if>

    <div>后台传来的当前页:${currentPage}</div>
</body>
</html>

方式二：
这种方式采用了Ajax异步提交数据。在没有使用ajax-submit插件的情况下，不能直接用JQuery绑定表单的submit事件了，它会像方式1一样提交，那么查询数据就会丢失。采用Ajax的方式异步提交，只刷新页面的一部分元素，那么查询条件是不会丢失的。

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib uri="/struts-tags" prefix="s"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
.table1 {
    border: 1px solid #ddd;
    width: 900px;
}

thead {
    background-color: lightblue;
}
</style>
</head>


<%
    // 获取请求的上下文
    String context = request.getContextPath();
%>
<link href="${pageContext.request.contextPath}/css/pagination.css"
    rel="stylesheet" type="text/css" />
<script type="text/javascript"
    src="${pageContext.request.contextPath}/js/jquery-1.11.3.js"></script>
<script type="text/javascript"
    src="${pageContext.request.contextPath}/js/jquery.pagination.js"></script>
<script type="text/javascript">


$(function(){
    Query();    
});


// JQuery-Pagination的初始化
function JPagination(result){
    $("#News-Pagination").pagination(result.totalRecord, {
        items_per_page:result.pageSize, // 每页显示多少条记录
        current_page:result.currentPage - 1, // 当前显示第几页数据
        num_display_entries:2, // 连续分页主体显示的条目数
        next_text:"下一页",
        prev_text:"上一页",
        num_edge_entries:2, // 连接分页主体，显示的条目数
        callback:handlePaginationClick, //执行的回调函数，也就是去获取新的分页数据
        load_first_page:false //防止页面一直刷新( 这条非常重要！)        
    });     
}





//点击分页按钮以后触发的动作
function handlePaginationClick(new_page_index, pagination_container) {
    //根据ID从表单中获取查询需要的参数
    var pname = $("#pro_name").val();  
    var price = $("#pro_price").val();
    var pageIndex = new_page_index + 1;
    //异步方式提交查询
     $.ajax({   
                type: "POST",
                //返回结果转换成json,方便用data.属性的方式取值
                dataType: "json",  
                url: "<%=context%>/product_findAllJSON.action" ,   
                data: "pageNum="+ pageIndex +"&proName=" + pname + "&price=" + price,  
                success: function(result) { 
                    //加载结果的JSON字符串
                    var totalRecord = result.totalRecord;
                    var currentPage = result.currentPage; // 获取当前第几页数据
                    var productList = result.dataList; // 学生记录信息                    
                    //生成表格内容                    
                    showProductData(productList);
                    //不需要再进行分页插件初始化
                        }  
           }); 
    return false;
}

//直接自定义一个button来发起查询
function Query(){   
    $("#btn2").click(function(){
        //根据ID从表单中获取查询需要的参数
        var pname = $("#pro_name").val();  
        var price = $("#pro_price").val();
        //异步方式提交查询
         $.ajax({   
                    type: "POST",
                    //返回结果转换成json,方便用data.属性的方式取值
                    dataType: "json",  
                    url: "<%=context%>/product_findAllJSON.action" ,   
                    data: "proName=" + pname + "&price=" + price,  
                    success: function(result) { 
                        //加载结果的JSON字符串
                        var totalRecord = result.totalRecord;
                        var currentPage = result.currentPage; // 获取当前第几页数据
                        var productList = result.dataList; // 学生记录信息
                        //生成表格内容                    
                        showProductData(productList);
                        //生成表格后对JQeury插件进行初始化
                        JPagination(result);
                            }  
               }); 

        });
}


//加载学生的数据
function showProductData(proList) {
        //每次加载新页面清空原来的内容
        $("#proDataBody").empty();
        var proDataHtml = "";
        $.each(proList, function(idx, obj) {
            proDataHtml += "<tr>";
            proDataHtml += "<td>" + obj.pid + "</td>"; // 获取商品编号的值
            proDataHtml += "<td>" + obj.pname + "</td>"; // 获取商品名称的值
            proDataHtml += "<td>" + obj.price + "</td>"; // 获取商品价格的值
            proDataHtml += "</tr>";
        });
        $("#proDataBody").append(proDataHtml);
    }
</script>


<body>
    <div>
        <form id="proForm">
            商品名称 <input type="text" name="proName" id="pro_name" style="width: 120px"> &nbsp; 
            商品价格 <input type="text" name="price" id="pro_price" style="width: 120px"> &nbsp;
        </form>
    <button id="btn2">查找</button>
    </div>



    <div id="div1">
        <h2>商品信息</h2>
    </div>
    <br>
    <!-- 后台返回结果不为空 -->
    <table border="1px" cellspacing="0px" style="border-collapse: collapse"
        id="ProductTable">
        <thead>
            <tr height="30">
                <th width="130">商品编号</th>
                <th width="130">商品名称</th>
                <th width="130">商品价格</th>
            </tr>
        </thead>
        <tbody id="proDataBody">
        </tbody>
    </table>

<div id="News-Pagination"></div>
</body>
</html>