基于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
版权声明:本文为博主原创文章,未经博主允许不得转载。

Ajax 实现无刷新分页

注:本文中使用到的一些类库在前面文章都能找到源代码,我会在文中指明链接所在,为了缩短文章篇幅,由此带来的阅读不便,敬请谅解。 本文讲解 Ajax 实现无刷新分页、实现原理、代码展示、代码下载。 这里...
  • liruxing1715
  • liruxing1715
  • 2012年01月21日 17:31
  • 74722

关于ajax异步请求后台数据进行动态分页

ajax请求后台拿到json类型的数据后,可以在它的success回调方法中进行动态分页,也就是表格重绘,此时,我们需要得到的数据包括:查询得到的数据、数据总条数、总页数、当前页数,其中前三条可在后台...
  • u010131415
  • u010131415
  • 2015年07月28日 09:42
  • 3578

一个完整的Ajax查询及对查询结果实现分页的范例

分页是WEB应用开发中最常用的功能之一,大多数是在动态页面(如:jsp、asp、php)中完成。pageObj是本人针对JavaScript数组实现分页的一个通用的对象,使用简单,效果良好,功能比较完...
  • wj800
  • wj800
  • 2011年11月21日 06:27
  • 4284

jquery实现ajax查询后台数据列表,支持分页

自己写一些页面 为查数据简单方便,写了一个基于jquery和ajax的数据查询列表,有分页功能 一、使用方法 mobiPage.init({         id:"1",         url:...
  • meandmyself
  • meandmyself
  • 2015年03月12日 04:24
  • 3500

jsp页面通过ajax取值/展示数据及分页显示

jsp页面通过ajax从后台获取数据,在页面展示,并实现分页效果代码: 【JavaScript部分】 function getComposition(pageno){ //al...
  • u011019141
  • u011019141
  • 2016年01月08日 12:05
  • 3004

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

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

Ajax实现分页查询

    由于查询返回的数据量很大,超过10w条数据,因此需要对页面查询功能进行优化。放弃原有程序中使用DataGrid的做法,自己编写分页显示模块。    首先在页面上添加几个DIV:        ...
  • CSKnight
  • CSKnight
  • 2007年05月14日 12:21
  • 854

ajax大量数据分页

  • 2013年09月27日 17:00
  • 143KB
  • 下载

PHP-Ajax实现无刷新分页

1.创建数据库并插入数据 create database shop; use shop; CREATE TABLE ecs_goods ( goods_id INT UNSIGNED NOT NU...
  • bbs375
  • bbs375
  • 2016年08月15日 13:58
  • 1092

laravel之ajax无刷新分页

ajax无刷新分页的优点: 1、局部刷新 减轻压力 2、美观 提高用户体验 php代码: /* @Laravel框架 @Ajax无刷新分页(简单7步骤) */ public f...
  • lmy_1
  • lmy_1
  • 2016年09月27日 10:09
  • 2676
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:基于Hearken平台---ajax获取数据、局部刷新页面(包含分页)
举报原因:
原因补充:

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