Spring+Hibernate+struts2+JPA 註解+跨域//完成手機端點擊加載更多下拉加載更多

時間 2019-12-08

標籤 spring+hibernate+struts2+jpa spring hibernate struts jpa 註解完成手機端點加載更多下拉欄目 Spring 简体版

原文原文鏈接

1、使用IDEA新建一個maven項目(student)

1.1.0編寫pom文件，添加項目所須要的包javascript

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>

    <parent>
        <groupId>org.spring</groupId>
        <artifactId>parent</artifactId>
        <version>1.0-SNAPSHOT</version>
        <relativePath>../pom.xml</relativePath>
    </parent>
    <artifactId>student</artifactId>
    <packaging>war</packaging>

    <properties>
        <struts2.version>2.5.8</struts2.version>
        <hibernate.version>5.2.8.Final</hibernate.version>
    </properties>

    <!-- 配置打包插件 -->
    <build>
        <plugins>
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-war-plugin</artifactId>
                <version>2.2</version>
                <configuration>
                    <warSourceDirectory>web</warSourceDirectory>
                    <webXml>web\WEB-INF\web.xml</webXml>
                </configuration>
            </plugin>
        </plugins>
    </build>

    <dependencies>
        <!-- struts2 -->
        <dependency>
            <groupId>org.apache.struts</groupId>
            <artifactId>struts2-core</artifactId>
            <version>${struts2.version}</version>
        </dependency>
        <!-- struts2整合spring的插件 -->
        <dependency>
            <groupId>org.apache.struts</groupId>
            <artifactId>struts2-spring-plugin</artifactId>
            <version>${struts2.version}</version>
            <!-- 排除整合插件自動依賴的spring核心包，
            否則可能會引發版本不一致或衝突的狀況。因此使用exclusion
             排除循環依賴-->
            <exclusions>
                <!-- 排除struts自動依賴的spring-core版本 -->
                <exclusion>
                    <groupId>org.springframework</groupId>
                    <artifactId>spring-core</artifactId>
                </exclusion>
                <!-- 排除struts自動依賴的spring-beans版本 -->
                <exclusion>
                    <groupId>org.springframework</groupId>
                    <artifactId>spring-beans</artifactId>
                </exclusion>
            </exclusions>
        </dependency>
        <!-- JSON插件 -->
        <dependency>
            <groupId>org.apache.struts</groupId>
            <artifactId>struts2-json-plugin</artifactId>
            <version>${struts2.version}</version>
        </dependency>
        <!-- 引入aspectj的依賴模塊 -->
        <dependency>
            <groupId>org.aspectj</groupId>
            <artifactId>aspectjweaver</artifactId>
            <version>1.8.9</version>
        </dependency>
        <!-- 引入spring web模塊 -->
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-web</artifactId>
            <version>4.3.6.RELEASE</version>
        </dependency>
        <!-- 引入spring orm 整合hibernate-->
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-orm</artifactId>
            <version>4.3.6.RELEASE</version>
        </dependency>
        <!--  引入Spring tx事務管理模塊-->
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-tx</artifactId>
            <version>4.3.6.RELEASE</version>
        </dependency>
        <!-- Hibernate依賴 -->
        <dependency>
            <groupId>org.hibernate</groupId>
            <artifactId>hibernate-core</artifactId>
            <version>${hibernate.version}</version>
        </dependency>
        <!-- JPA依賴支持，添加實體管理器 -->
        <dependency>
            <groupId>org.hibernate</groupId>
            <artifactId>hibernate-entitymanager</artifactId>
            <version>${hibernate.version}</version>
        </dependency>
        <!-- DBCP鏈接池 -->
        <dependency>
            <groupId>commons-dbcp</groupId>
            <artifactId>commons-dbcp</artifactId>
            <version>1.4</version>
        </dependency>
        <!--  mysql驅動 -->
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>5.1.35</version>
        </dependency>
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>javax.servlet-api</artifactId>
            <version>3.0.1</version>
        </dependency>
    </dependencies>
</project>

View Code

在這裏我用的是MySql數據庫，因此在這裏添加MySql的驅動包，其餘的數據庫添加相應的驅包就好了html

在這裏我繼承了父類的pom文件前端

父類的pom文件以下：java

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>

    <groupId>org.spring</groupId>
    <artifactId>parent</artifactId>
    <version>1.0-SNAPSHOT</version>
    <packaging>pom</packaging>
    <!-- 配置maven的常規屬性 -->
    <properties>
        <!-- 設置整個maven項目的編碼格式 -->
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
        <!-- 設置控制檯輸出參數的編碼格式， 解決亂碼  -->
        <orgLine>-Dfile.encoding=UTF-8</orgLine>
    </properties>

    <build>
        <plugins>

            <!-- 配置maven編譯插件，指定maven編譯版本 -->
            <plugin>
                <!-- 插件名稱 -->
                <artifactId>maven-compiler-plugin</artifactId>
                <!-- 插件配置信息 -->
                <configuration>
                    <target>1.8</target>
                    <source>1.8</source>
                    <encoding>UTF-8</encoding>
                </configuration>
            </plugin>
        </plugins>
    </build>
    <dependencies>
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-context</artifactId>
            <version>4.3.6.RELEASE</version>
        </dependency>

        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-orm</artifactId>
            <version>4.3.6.RELEASE</version>
        </dependency>
    </dependencies>

</project>

View Code

添加進來的包以下

2、給項目添加Spring支持以及Web 支持mysql

3、給項目新建好相應的包

在這裏沒有寫建表語句自動建表容器在啓動的時候會把所須要的表建出來(在ApplicationContext.xml 裏面)jquery

        <!-- 是否自動執行DDL語句，(自動建表)-->
        <property name="generateDdl" value="true"/>

實體類(entity)web

3.0.1(Student)spring

package org.student.entity;

import javax.persistence.*;

/**
 * Created by YongLin on 17/3/14.
 */
@Entity
@Table(name="STU_INFO")
public class Student {
    private int sid;
    private String stuName;
    private int age;
    private Team team;

    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    @Column(name = "STU_ID")
    public int getSid() {
        return sid;
    }

    public void setSid(int sid) {
        this.sid = sid;
    }
    @Column(name = "STU_NAME")
    public String getStuName() {
        return stuName;
    }

    public void setStuName(String stuName) {
        this.stuName = stuName;
    }

    @Column(name = "STU_AGE")
    public int getAge() {
        return age;
    }

    public void setAge(int age) {
        this.age = age;
    }

    @ManyToOne
    @JoinColumn(name = "TEAM_ID")
    public Team getTeam() {
        return team;
    }

    public void setTeam(Team team) {
        this.team = team;
    }
}

3.0.2(Team)sql

package org.student.entity;

import javax.persistence.*;

/**
 * Created by YongLin on 17/3/15.
 */
@Entity
@Table(name = "TEAM_INFO")
public class Team {
    private int tid;
    private String teamName;


    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    @Column(name = "TEAM_ID")
    public int getTid() {
        return tid;
    }

    public void setTid(int tid) {
        this.tid = tid;
    }

    @Column(name = "TEAM_NAME")
    public String getTeamName() {
        return teamName;
    }

    public void setTeamName(String teamName) {
        this.teamName = teamName;
    }
}

3.1.1(dao)裏面有2個接口對應2個實現類數據庫

3.1.2StuDao

package org.student.dao;

import org.student.entity.Student;

import java.util.List;

/**
 * Created by wangl on 2017/2/27.
 */
public interface StuDao {
    //查詢全部學生
    public List<Student> findStudents();

    public void save(Student student);

    public List<Student> findByTeam(int tid);

    public Student findById(int sid);

    public List<Student> findStudents(int first, int max);
}

3.1.3 StuDaoImpl

package org.student.dao.impl;

import org.springframework.stereotype.Repository;
import org.student.dao.StuDao;
import org.student.entity.Student;

import javax.persistence.EntityManager;
import javax.persistence.PersistenceContext;
import javax.persistence.Query;
import java.util.List;

/**
 * Created by YongLin on 17/3/14.
 */
@Repository("stuDao")
public class StuDaoImpl  implements StuDao {
    @PersistenceContext
    private EntityManager em;
    @Override
    public List<Student> findStudents() {
        String jpql = "from Student s";
        return em.createQuery(jpql).getResultList();
    }

    @Override
    public void save(Student student) {
            em.persist(student);
        }

    @Override
    public List<Student> findByTeam(int tid) {
        String jpql = "from Student s where s.team.tid=?1";
        Query query = em.createQuery(jpql);
        query.setParameter(1,tid);
        return query.getResultList();
        /*String jqpl = "from Student s where s.team.tid=?1";
        Query query = em.createQuery(jqpl);
        query.setParameter(1,tid);
        return query.getResultList();*/
    }
    @Override
    public Student findById(int sid) {
        return null;
    }


    @Override
    public List<Student> findStudents(int first, int max) {
        String jpql = "from Student s";
        Query query = em.createQuery(jpql);
        //分頁
        query.setFirstResult(first);
        query.setMaxResults(max);
        return query.getResultList();
    }
}

4、給項目配置好因此需的配置文件

3.2.1TeamDao

package org.student.dao;
import org.student.entity.Team;

import java.util.List;

/**
 * Created by YongLin on 17/3/15.
 */
public interface TeamDao {
    public List<Team> findTeams();
    public  void save(Team team);
}

3.2.2TeamDaoImpl

package org.student.dao.impl;

import org.springframework.stereotype.Repository;
import org.student.dao.TeamDao;
import org.student.entity.Team;

import javax.persistence.EntityManager;
import javax.persistence.PersistenceContext;
import java.util.List;

/**
 * Created by YongLin on 17/3/15.
 */
@Repository("teamDao")
public class TeamDaoImpl implements TeamDao {
    @PersistenceContext
    private EntityManager em;

    @Override
    public List<Team> findTeams() {
        String hql="from Team t";
        return em.createQuery(hql).getResultList();
    }

    @Override
    public void save(Team team) {
        em.persist(team);
    }

}

3.3.1StuService

package org.student.service;

import org.springframework.stereotype.Service;
import org.student.entity.Student;

import java.util.List;

/**
 * Created by YongLin on 17/3/14.
 */
@Service("stuService")
public interface StuService {
    public List<Student> findStudent();
    public void add(Student student);
    public List<Student> findByTeam(int tid);
    public List<Student> findStudents(int first, int max);
}

3.3.2StuServiceImpl

package org.student.service.impl;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;
import org.student.dao.StuDao;
import org.student.entity.Student;
import org.student.service.StuService;

import java.util.List;

/**
 * Created by YongLin on 17/3/14.
 */
@Service("stuService")
@Transactional
public class StuServiceImpl implements StuService {
    @Autowired
    private StuDao stuDao;
    @Override
    public List<Student> findStudent() {
        return stuDao.findStudents();
    }

    @Override
    public void add(Student student) {
        stuDao.save(student);
    }

    @Override
    public List<Student> findByTeam(int tid) {
        return stuDao.findByTeam(tid);
    }

    @Override
        public List<Student> findStudents(int first, int max) {
        return stuDao.findStudents(first,max);
    }
}

3.3.3TeamService

package org.student.service;
import org.student.entity.Team;

import java.util.List;

/**
 * Created by YongLin on 17/3/15.
 */
public interface TeamSevice {
    public List<Team> findTeams();
    public void save(Team team);
}

3.3.4TeamServiceImpl

package org.student.service.impl;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;
import org.student.dao.TeamDao;
import org.student.entity.Team;
import org.student.service.TeamSevice;

import java.util.List;

/**
 * Created by YongLin on 17/3/15.
 */
@Service("teamService")
@Transactional
public class TeamService implements TeamSevice {
    @Autowired
    private TeamDao teamDao;
    @Override
    public List<Team> findTeams() {
        return teamDao.findTeams();
    }

    @Override
    public void save(Team team) {
        teamDao.save(team);
    }
}

Action(StuAction)

package org.student.action;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.student.entity.Student;
import org.student.entity.Team;
import org.student.service.StuService;
import org.student.service.TeamSevice;

import java.util.List;

/**
 * Created by YongLin on 17/3/14.
 */
@Controller("stuAction")
public class StuAction {
    private Student student;
    private String message;
    private List<Student> studentList;
    private List<Team> teamList;
    private Team team;
    private int pageNum;

    public int getPageNum() {
        return pageNum;
    }

    public void setPageNum(int pageNum) {
        this.pageNum = pageNum;
    }

    //注入一個Service
    @Autowired
    private StuService stuService;
    @Autowired
    private TeamSevice teamSevice;

    public Student getStudent() {
        return student;
    }

    public void setStudent(Student student) {
        this.student = student;
    }

    public String getMessage() {
        return message;
    }

    public void setMessage(String message) {
        this.message = message;
    }

    public List<Student> getStudentList() {
        return studentList;
    }

    public void setStudentList(List<Student> studentList) {
        this.studentList = studentList;
    }

    public List<Team> getTeamList() {
        return teamList;
    }

    public void setTeamList(List<Team> teamList) {
        this.teamList = teamList;
    }

    public StuService getStuService() {
        return stuService;
    }

    public void setStuService(StuService stuService) {
        this.stuService = stuService;
    }

    public TeamSevice getTeamSevice() {
        return teamSevice;
    }

    public void setTeamSevice(TeamSevice teamSevice) {
        this.teamSevice = teamSevice;
    }

    public Team getTeam() {
        return team;
    }

    public void setTeam(Team team) {
        this.team = team;
    }

    public String find(){
       studentList =  stuService.findStudent();
        return "success";
    }

    public String findByPage(){
        //第一個參數表示從第幾條開始查MySql的0表示第一條 第二個參數表示查詢幾條
        System.out.println(pageNum);
        studentList=stuService.findStudents(pageNum,5);
        return  "page";
    }

    public String findStusByTeam(){
        studentList = stuService.findByTeam(team.getTid());
        return "byTeamList";
    }

    public String findTeams(){
        teamList = teamSevice.findTeams();
        return "teams";
    }
}

編寫CorsFilter(跨域用的設置響應頭部) 實現了Filter

package org.student.filter;

import javax.servlet.*;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

public class CrosFilter implements Filter{

    @Override
    public void init(FilterConfig filterConfig) throws ServletException {

    }

    @Override
    public void doFilter(ServletRequest req, ServletResponse res, FilterChain filterChain) throws IOException, ServletException {
        //相應以前設置響應的頭部，受權跨域訪問
        HttpServletResponse response = (HttpServletResponse) res;
        response.setHeader("Pragma", "no-cache");
        response.setHeader("Cache-Control", "no-cache");
        response.setHeader("Access-Control-Allow-Origin", "*");
        response.setDateHeader("Expires", 0);
        //放行
        filterChain.doFilter(req,res);
    }
    @Override
    public void destroy() {

    }
}

4.0.1在resource 下面新建applicantionContext.xml struts.xml以下：

4.1.2applicantionContext.xml

<?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:context="http://www.springframework.org/schema/context"
       xmlns:tx="http://www.springframework.org/schema/tx"
       xsi:schemaLocation="http://www.springframework.org/schema/beans
       http://www.springframework.org/schema/beans/spring-beans.xsd
       http://www.springframework.org/schema/context
       http://www.springframework.org/schema/context/spring-context.xsd
       http://www.springframework.org/schema/tx
       http://www.springframework.org/schema/tx/spring-tx.xsd">

    <!-- 啓用相應的註解處理器,掃描指定的包 -->
    <context:component-scan base-package="org.student"/>

    <!-- 配置數據源，使用DBCP鏈接池 -->
    <bean id="dataSource" class="org.apache.commons.dbcp.BasicDataSource" destroy-method="close">
        <!-- 數據源以及鏈接池屬性 -->
        <property name="driverClassName" value="com.mysql.jdbc.Driver"/>
        <property name="url" value="jdbc:mysql://localhost:3306/mydate"/>
        <property name="username" value="root"/>
        <property name="password" value="root"/>
        <property name="initialSize" value="5"/>
        <property name="maxIdle" value="50"/>
        <property name="maxActive" value="60"/>
        <property name="minIdle" value="10"/>
        <property name="maxWait" value="2000"/>
    </bean>

    <!-- 配置JPA實現方的適配器,由於JPA實現方有不少，
    Hibernate也是JPA標準的一種實現，所以這裏指定爲Hibernate的JPA實現適配器-->
    <bean id="jpaVendorAdapter" class="org.springframework.orm.jpa.vendor.HibernateJpaVendorAdapter">
        <!-- 配置JPA的屬性 -->
        <!-- 使用的數據庫類型,這裏使用的是MYSQL -->
        <property name="database" value="MYSQL"/>
        <!-- 指定數據庫方言-->
        <property name="databasePlatform" value="org.hibernate.dialect.MySQL5Dialect"/>
        <!-- 在控制檯顯示sql語句-->
        <property name="showSql" value="true"/>
        <!-- 是否自動執行DDL語句，(自動建表)-->
        <property name="generateDdl" value="true"/>
    </bean>

    <!-- 配置實體管理器工廠，Spring會依據這個工廠建立並注入一個實體管理器EntityManager,
    建立出來的EntityManager是由Spring容器管理的，而且會參與到Spring的事務當中,它是線程安全的-->
    <bean id="entityManagerFactory" class="org.springframework.orm.jpa.LocalContainerEntityManagerFactoryBean">
        <!-- 須要注入一個數據源和JPA的適配器 -->
        <property name="dataSource" ref="dataSource"/>
        <property name="jpaVendorAdapter" ref="jpaVendorAdapter"/>
        <!-- 指定實體的掃描路徑 -->
        <property name="packagesToScan" value="org.student.entity"/>
    </bean>

    <!-- 配置JPA事務管理器-->
    <bean id="txManager" class="org.springframework.orm.jpa.JpaTransactionManager">
        <!-- 須要注入一個實體管理器工廠 -->
        <property name="entityManagerFactory" ref="entityManagerFactory"/>
    </bean>

    <!-- 啓用註解事務管理,transaction-manager引用上面的事務管理器-->
    <tx:annotation-driven transaction-manager="txManager"/>
</beans>

4.0.3 struts.xml

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE struts PUBLIC
        "-//Apache Software Foundation//DTD Struts Configuration 2.5//EN"
        "http://struts.apache.org/dtds/struts-2.5.dtd">

<struts>
    <package name="struts" extends="json-default">
        <action name="find" class="stuAction" method="find">
            <result type="json">
                <param name="root">studentList</param>
            </result>
        </action>
        <action name="findByPage" class="stuAction" method="findByPage">
            <result type="json" name="page">
                <param name="root">studentList</param>
            </result>
        </action>

        <action name="findStusByTeam" class="stuAction" method="findStusByTeam">
            <result type="json" name="byTeamList">
                <param name="root">studentList</param>
            </result>
        </action>

        <action name="findTeams" class="stuAction" method="findTeams">
            <result type="json" name="teams">
                <param name="root">teamList</param>
            </result>
        </action>
    </package>
</struts>

以及在Web下添加相應的文件

Web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
         version="3.1">
    <!-- 配置監聽器 -->
    <listener>
        <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
    </listener>
    <!-- 指定spring核心配置文件所在的目錄 -->
    <context-param>
        <param-name>contextConfigLocation</param-name>
        <!-- 默認會從WEB—INF下查找applicationContext.xml -->
        <param-value>classpath*:applicationContext.xml</param-value>
    </context-param>
    <filter>
        <filter-name>crosFilter</filter-name>
        <filter-class>org.student.filter.CrosFilter</filter-class>
    </filter>
    <filter-mapping>
        <filter-name>crosFilter</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>
    <!-- struts2核心控制器 -->
    <filter>
        <filter-name>dispatcher</filter-name>
        <filter-class>org.apache.struts2.dispatcher.filter.StrutsPrepareAndExecuteFilter</filter-class>
    </filter>
    <filter-mapping>
        <filter-name>dispatcher</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>
</web-app>

在前端頁面這邊，發起Ajax請求跨域拿到後臺查出的數據

5.0.1 (點擊加載更多 clickmore.html)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <title>Title</title>
    <script src="myjs/jquery-1.11.0.js"></script>
    <style>
        #box .box{
             width: 100%;
            height: 100px;
            padding: 10px 0;
            border: 1px slateblue solid;
            border-left:none;
            border-right: none;
            font-family: "Microsoft YaHei";
         }
        h4{
            text-align: center;
            color: red;
            cursor: pointer;
        }
    </style>
    <script type="text/javascript">
        $(function(){
            //定義一個成員變量
            //從第一條開始查
            var pageNum = 0;
            //頁面一加載    從第0 條數據開始加載  MySql的第0 條是第一條
        $.get("http://localhost:8080/findByPage",{"pageNum":pageNum}, function (date) {
                    //查出來的數據填充到div中
                    addBox(date);
            });
            //點擊「點擊加載更多」的時候
        $("#divAdd").click(function() {
            //發起一個跨域的請求  每次請求5條數據 每次從當前條數的後5條數據開始查(Hibernate提供的分頁查詢的方法)
                $.get("http://localhost:8080/findByPage",{"pageNum":pageNum+=5}, function (date) {
                    addBox(date);
                });
        });
    function addBox(date){
        $.each(date,function(index,obj){
                           $("#box").append("<div class='box'>"+
                        "<div class='div2'>ID："+obj.sid+"</div>"+
                        "<div class='div1'>姓名："+obj.stuName+"</div>"+
                        "<div class='div1'>班級："+obj.team.teamName+"</div>"+
                        "</div>");
                    });
            }
        });                
</script>
</head>
<body>
    <div id="box">
        
    </div>
        <h4 id="divAdd">點擊加載更多。。。</h4>
</body>
</html>

運行效果：

初始化先查出5條數據

點擊"加載更多時"，又從後臺查出5條數據

5.0.2（下滑加載更多 upmore.html)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <title>Title</title>
    <script src="myjs/jquery-1.11.0.js"></script>
    <style>
        #box .box {
            width: 100%;
            height: 100px;
            padding: 10px 0;
            border: 1px slateblue solid;
            border-left:none;
            border-right: none;
            font-family: "Microsoft YaHei";
        }

        .div2 {
            margin-top: -1px
        }
    </style>
    <script type="text/javascript">
        $(function () {
            //定義一個成員變量
            //從第一條開始查
            var pageNum = 0;
            //頁面一加載    從第0 條數據開始加載  MySql的第0 條是第一條
            $.get("http://localhost:8080/findByPage", {"pageNum": pageNum}, function (date) {
                //查出來的數據填充到div中
                addBox(date);
            });
            //鼠標滾動事件
            $(window).scroll(function () {
                if ($(document).scrollTop() >= $(document).height() - $(window).height()) {
                    //當頁面移動到最底部的時候
                    //發起一個請求 ，每一次請求查詢3條記錄
                    $.get("http://localhost:8080/findByPage", {"pageNum": pageNum += 3}, function (date) {
                        addBox(date);
                    });
                }
            });
            function addBox(date) {
                $.each(date, function (index, obj) {
                    $("#box").append("<div class='box'>" +
                        "<div class='div2'>ID：" + obj.sid + "</div>" +
                        "<div class='div1'>姓名：" + obj.stuName + "</div>"+
                        "</div>");
                });
            }
        });

    </script>


</head>
<body>
<div id="box">


</div>
</body>
</html>