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

相关文章推荐

HTML中使用Ajax进行局部刷新页面

使用Ajax进行用户名动态校验,局部刷新页面1.在HTML页面中使用js脚本将请求数据发送给后台servlet 由按钮触发事件 查询 由js脚本对将数据发送到后台 var req = new ...

Bootstrap 分页插件 ajax获取数据显示

bootstrap-paginator

ajax获取数据/分页/li+div仿select代码

ajaxMethod.js---------//>>>ajax 读取类function ajax_get_lists(inObj){//使用ajax获取列表,用于筛选页面获取列表  var p_tem...
  • qidizi
  • qidizi
  • 2013年04月11日 21:27
  • 1295

商品列表获取数据ajax clone 分页

function goods_list(){ $.ajax({    url: url+"goods/list",    //请求的url地址    dataType: "json",   //返回格...

asp+ajax无限刷新获取数据

  • 2015年10月10日 17:55
  • 904KB
  • 下载

AJAX获取数据然后显示在页面

主要功能流程介绍循环获取列表数据 点击列表数据进入详情页 点击报名参加弹出报名成功提示框 点击提示框中的确定按钮,跳回列表页代码实现流程和解说一、列表页1、访问链接list.php时...

WebForm.aspx 页面通过 AJAX 访问WebForm.aspx.cs类中的方法,获取数据

WebForm.aspx 页面通过 AJAX 访问WebForm.aspx.cs类中的方法,获取数据 WebForm1.aspx 页面 fun...

ajax(三)之省市二级菜单联动(从sql获取数据),无刷新翻页

分析:二级菜单栏,主要是数据库的设计,设计好就非常简单。第2级菜单栏中带有1级菜单栏的索引,只要有一级菜单栏的索引,就可以找到城市。上代码 思路:获取一级菜单省份de值,在Servlet中收集到...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:基于Hearken平台---ajax获取数据、局部刷新页面(包含分页)
举报原因:
原因补充:

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