基于Hearken平台---ajax获取数据、局部刷新页面(包含分页)

原创 2016年12月09日 15:54:02
页面布局:
 html静态页面中:
  1. <script text="javascript" src="../js/js.js"></script>
  2. /*
  3. *省略...
  4. */
  5. <div class="StudentList_div">
  6. <ul class="StudentList_ul">
  7. </ul>
  8. </div>

相应的javascript中:
  1. getdata(value);
  2. function getdata(value){
  3. $.ajax({
  4. url:'/CXMF/StudentList.svt', //查找学生信息的servlet,CXMF为项目名称
  5. type:'post',
  6. data:value,
  7. contentType:"application/x-www-form-urlencoded; charset=utf-8",
  8. success:function(data){
  9. var obj = eval("("+data+")"); //获取后台返回的所有数据
  10. if(obj.length!=0){
  11. $('.StudentList_ul').empty(); //先清空前台的ul标签
  12. $(".page_nav").css("visibility","visible"); //让分页标签隐藏
  13. if(value.test==1){//初始化请求
  14.                        
  15.                        //total_num为数据查询中查到数据总条数、value.page_num为当前传的value的每页显示条数
  16.                        //两者进行相应的运算,得到total_page,为分页的总页数
  17. total_page=Math.ceil(obj[0].total_num/value.page_num);
  18. $("#totalpage").html(total_page);//分页总数
  19. $("#nowpage").html(1);//当前页数
  20. }
  21. //列表显示内容 获取每个参数,先放到变量cnt中,最后将cnt变量appqnd到ul标签内
  22. var cnt="";
  23. for(var i=0;i<obj.length;i++){
  24. cnt+=
  25. "<li class='student' data-id='"+obj[i].student_id+"'><span class='stname'>姓名:"+obj[i].student_name+"</span><span class='stnum'>学号:"+obj[i].student_id+
  26. "</span><span class='readbtn'>查看考试</span></li>";
  27. }
  28. $('.StudentList_ul').append(cnt);
  29. }else{
  30. error();
  31. }
  32. }
  33. });
  34. }
当需要点击左侧的导航树刷新时,设置导航树span的点击事件,在事件中将value的id(或是其他筛选的字段)赋值,并重新调用ajax的函数。则可实现点击后刷新。
StudentListServlet:
  1. package com.sunsheen.cxmf.web;
  2. import java.io.IOException;
  3. import java.io.PrintWriter;
  4. import java.util.HashMap;
  5. import java.util.List;
  6. import java.util.Map;
  7. import javax.servlet.ServletException;
  8. import javax.servlet.http.HttpServlet;
  9. import javax.servlet.http.HttpServletRequest;
  10. import javax.servlet.http.HttpServletResponse;
  11. import org.hibernate.transform.Transformers;
  12. import com.sunsheen.jfids.gson.Gson;
  13. import com.sunsheen.jfids.system.database.DBSession;
  14. import com.sunsheen.jfids.system.servlet.Servlet;
  15. import com.sunsheen.jfids.util.DataBaseUtil;
  16. @Servlet(value="/StudentList.svt", anonymous=true)
  17. public class StudentListServlet extends HttpServlet{
  18. private static final long serialVersionUID=-187416565L;
  19. @Override
  20. protected void doPost(HttpServletRequest req,HttpServletResponse resp)
  21. throws ServletException, IOException {
  22. req.setCharacterEncoding("utf-8");
  23. resp.setCharacterEncoding("utf-8");
  24. PrintWriter out = resp.getWriter();
  25. //创建平台封装的hibernate
  26. String page_num = req.getParameter("page_num");
  27. String locat_num = req.getParameter("locat_num");
  28. String id = req.getParameter("id");
  29. String userid=req.getSession().getAttribute("id").toString(); //获取用户ID
  30. DBSession session = DataBaseUtil.getHibernateSession();//获取平台封装的HibernateSession。
  31. Map<String, String> map = new HashMap<>();
  32. map.put("page_num", page_num);
  33. map.put("locat_num", locat_num);
  34. map.put("id", id);
  35. map.put("userid", userid);
  36. try {
  37. //方法一:从数据查询中获取值(基于核格平台)
  38. List<?> rs = session.createDySQLQuery("SelectStudentList.selectStudentList",map).setResultTransformer(Transformers.ALIAS_TO_ENTITY_MAP).list();
  39.                
  40.                //方法二:直接写查询语句,查询信息
  41. String sql="select lesson_id,lesson,student_id,student_name,concat('./images/', img_url) as src,text_answer from cxmf_answer where lesson_id=:lesson_id and student_id=:student_id";
  42. SQLQuery query = session.createSQLQuery(sql);
  43. new QueryParameterImpl ().initParameter(query, map);
  44. List<?> rs = null;
  45. rs = query.setResultTransformer(Transformers.ALIAS_TO_ENTITY_MAP).list();
  46. String data = new Gson().toJson(rs);//通过Gson转换数据为json格式字符串
  47. out.print(data);//返回数据到前台
  48. } catch (Exception e) {
  49. session.rollback();
  50. } finally{
  51. session.close();
  52. out.close();
  53. }
  54. }
  55. }
注意:查询在查出所有数据的同时还要查出数据的总条数,并添加limit进行分页的限制。
采用左连接的方式,查询出表中的所有数据,及数据总条数。
举例子如下:
  1. SELECT
  2. *
  3. FROM
  4. (
  5. SELECT
  6. a.id,
  7. a.lesson_id,
  8. a.lesson,
  9. a.student_id,
  10. a.student_name
  11. FROM
  12. cxmf_course a,
  13. cxmf_teaching b
  14. where a.lesson_id="$P.id"
  15. and b.teacher_id="$P.userid"
  16. group by student_id
  17. ) a
  18. LEFT JOIN (
  19. SELECT
  20. COUNT(*) AS total_num
  21. FROM
  22. cxmf_course
  23. ) b ON 1 = 1
  24. LIMIT #if($P.locat_num and $P.page_num !="")
  25. $P.locat_num,
  26. $P.page_num;
  27. #else
  28. 0,
  29. 8 #end
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/Sakura_Momoko/article/details/53540130

基于CDN平台的DDOS攻击防护

从DDoS的基本概念出发,介绍当前DDoS攻击的种类、形式、危害性等,以及在云加速CDN平台上,根据自身服务特点打造的DDoS防护体系
  • 2017年02月17日 17:24

[核格Hearken平台]核格平台国际化语言配置

[核格Hearken平台]核格平台国际化语言配置
  • qq_19919733
  • qq_19919733
  • 2016-11-24 11:07:06
  • 231

iscroll和html5、css3实现的下拉刷新、上拉分页的功能,使用jquery和ajax从后台服务器获取分页数据

  • 2014年04月24日 17:58
  • 13KB
  • 下载

html5 css3实现下拉刷新、上拉分页 jquery ajax从服务器获取数据

  • 2015年06月05日 16:34
  • 95KB
  • 下载

html5 css3实现下拉刷新、上拉分页,使用jquery ajax从服务器获取数据

  • 2015年04月30日 11:05
  • 95KB
  • 下载

Ajax实现从数据库读取数据后,实现分页

Ajax实现从数据库读取数据后,实现分页的操作: 1、 分页效果如图所示:   首先写一个分页的类。 Page.java 在里面封装 了总页数,当前页,总记录数。 2、 在servlet...
  • smallsundoudou
  • smallsundoudou
  • 2012-02-27 15:53:42
  • 2166

分页处理,使用ajax局部刷新列表

第一个jsp页面加载初始资源 第二个jsp页面处理分页 分页展示简历列表 第一个jsp页面加载初始资源,并且页面一加载请求服务端加载第一页数据 ...
  • qq_35661734
  • qq_35661734
  • 2016-09-19 16:48:24
  • 3758

jsp中获取数据中查询出的记录数

第一种:利用ResultSet的getRow方法来获得ResultSet的总行数 Statement stmt = con.createStatement(); ResultSet rs = stm...
  • liufei198613
  • liufei198613
  • 2016-05-26 15:02:50
  • 3518

有关动态获取jsp页面中table的总条数

当你想要获取jsp table中总条数传到后台时,其实并不需要从前端获取; 因为总条数是从后台传过去的,那么只要找到后台获取总条数的方法就可以解决了; 例如:...
  • qq_25391785
  • qq_25391785
  • 2017-03-15 11:47:20
  • 523

如何在JSP页面显示mysql数据库内容 (二)

用Eclipse tomcat新建一个JSP页面(一)介绍了如何创建一个web程序和第一个jsp页面,以及Eclipse需要的一些必要配置。今天,我们重点说一下如何从数据库中查询数据,并且在JSP页面...
  • believejava
  • believejava
  • 2014-09-07 02:34:50
  • 79437
收藏助手
不良信息举报
您举报文章:基于Hearken平台---ajax获取数据、局部刷新页面(包含分页)
举报原因:
原因补充:

(最多只允许输入30个字)