用ajax请求返回来的list集合在页面上迭代显示出来
2016-09-11 16:38
441 查看
ajax请求是一个已不处理的过程,也就是说是局部刷新,而不是重新刷新整个页面,所以我们访问后台的服务器得到的数据应该是一个json格式的数据,然后通过输入输出流response到页面上。
前端页面:
代码:
$(document).ready(function(){
$("a").click(function(){
$.ajax({
type: "POST",
url: "http://localhost:8080/Table_fenye/servlet/ListData",
data: {page:$(this).text(),starttime:$("#start").val(),stoptime:$("#end").val(),obj:$("#obj").val(),opt:$("#opt").val(),now:$("#now").val()},
dataType: "json",
success: function(data){
$('#ct').empty(); //清空resText里面的所有内容
var html = '';
$.each(data, function(commentIndex, comment){
html += '<tr>'+
'<th>'+comment['msg']+'</th>'+
'<th>'+comment['time']+'</th>'+
'<th>'+comment['username']+'</th>'+
'<th>'+comment['app']+'</th>'+
'<th>'+comment['operation']+'</th>'+
'<th>'+comment['object']+'</th>'+
'<th>'+comment['result']+'</th>'+
'<th>'+comment['detail']+'</th>'+
'</tr>';
});
$('#ct').html(html);
}
});
});
后端的页面:
public class ListData extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doPost(request, response);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("text/html;charset=utf-8");
request.setCharacterEncoding("utf-8");
response.setCharacterEncoding("utf-8");
PrintWriter out = response.getWriter();
String p=(String) request.getParameter("page");
String starttime=(String) request.getParameter("starttime");
String stoptime=(String) request.getParameter("stoptime");
String obj=(String) request.getParameter("obj");
String opt=(String) request.getParameter("opt");
String now=(String) request.getParameter("now");
int size=20;
int page=0;
if(p.equals("上一页"))
{
page=Integer.valueOf(now)-2;
}else if(p.equals("下一页")){
page=Integer.valueOf(now);
}else{
page=Integer.valueOf(p)-1;
}
DateFormat format=new SimpleDateFormat("yyyy-MM-dd_HH:mm:ss");
java.sql.Date start=null;
java.sql.Date end=null;
try {
start =new java.sql.Date(format.parse(starttime).getTime());
end =new java.sql.Date(format.parse(stoptime).getTime());
} catch (ParseException e1) {
// TODO Auto-generated catch block
e1.printStackTrace();
}
int from=page*size;
List<StartstopInfo> list=new ArrayList<StartstopInfo>();
Connection conn=JdbcUtil.getConn();
//查询
String strSelect = "select id,msg,time,username,app,operation,object,result,detail from startstopinfo "
+ "where app='"+obj+"' and operation='"+opt+"'and time2>='"+start+"' and time2<='"+end+"' "
+ "order by time2 limit "+from+","+size+"" ;
//select * from startstopinfo where app='ATM_switch' and operation='start' and time2>='2016-9-8' and time2<='2016-9-8' order by time2 limit 0,20;
//创建Statement对象
Statement st;
try {
st = (Statement) conn.createStatement();
//查询用户
ResultSet rs = st.executeQuery(strSelect);
while(rs.next()){
StartstopInfo info=new StartstopInfo();
info.setId(rs.getInt(1));
info.setMsg(rs.getString(2));
info.setTime(rs.getString(3));
info.setUsername(rs.getString(4));
info.setApp(rs.getString(5));
info.setOperation(rs.getString(6));
info.setObject(rs.getString(7));
info.setResult(rs.getString(8));
info.setDetail(rs.getString(9));
list.add(info);
}
rs.close();
st.close();
conn.close();
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
//把验证的信息封装成json
Gson gson=new Gson();
//把一个对象转化成一个json形式的字符串
String userinfo=gson.toJson(list);
//输出流输出
System.out.println(userinfo);
out.print(userinfo);
}
}
前端页面:
代码:
$(document).ready(function(){
$("a").click(function(){
$.ajax({
type: "POST",
url: "http://localhost:8080/Table_fenye/servlet/ListData",
data: {page:$(this).text(),starttime:$("#start").val(),stoptime:$("#end").val(),obj:$("#obj").val(),opt:$("#opt").val(),now:$("#now").val()},
dataType: "json",
success: function(data){
$('#ct').empty(); //清空resText里面的所有内容
var html = '';
$.each(data, function(commentIndex, comment){
html += '<tr>'+
'<th>'+comment['msg']+'</th>'+
'<th>'+comment['time']+'</th>'+
'<th>'+comment['username']+'</th>'+
'<th>'+comment['app']+'</th>'+
'<th>'+comment['operation']+'</th>'+
'<th>'+comment['object']+'</th>'+
'<th>'+comment['result']+'</th>'+
'<th>'+comment['detail']+'</th>'+
'</tr>';
});
$('#ct').html(html);
}
});
});
后端的页面:
public class ListData extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doPost(request, response);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("text/html;charset=utf-8");
request.setCharacterEncoding("utf-8");
response.setCharacterEncoding("utf-8");
PrintWriter out = response.getWriter();
String p=(String) request.getParameter("page");
String starttime=(String) request.getParameter("starttime");
String stoptime=(String) request.getParameter("stoptime");
String obj=(String) request.getParameter("obj");
String opt=(String) request.getParameter("opt");
String now=(String) request.getParameter("now");
int size=20;
int page=0;
if(p.equals("上一页"))
{
page=Integer.valueOf(now)-2;
}else if(p.equals("下一页")){
page=Integer.valueOf(now);
}else{
page=Integer.valueOf(p)-1;
}
DateFormat format=new SimpleDateFormat("yyyy-MM-dd_HH:mm:ss");
java.sql.Date start=null;
java.sql.Date end=null;
try {
start =new java.sql.Date(format.parse(starttime).getTime());
end =new java.sql.Date(format.parse(stoptime).getTime());
} catch (ParseException e1) {
// TODO Auto-generated catch block
e1.printStackTrace();
}
int from=page*size;
List<StartstopInfo> list=new ArrayList<StartstopInfo>();
Connection conn=JdbcUtil.getConn();
//查询
String strSelect = "select id,msg,time,username,app,operation,object,result,detail from startstopinfo "
+ "where app='"+obj+"' and operation='"+opt+"'and time2>='"+start+"' and time2<='"+end+"' "
+ "order by time2 limit "+from+","+size+"" ;
//select * from startstopinfo where app='ATM_switch' and operation='start' and time2>='2016-9-8' and time2<='2016-9-8' order by time2 limit 0,20;
//创建Statement对象
Statement st;
try {
st = (Statement) conn.createStatement();
//查询用户
ResultSet rs = st.executeQuery(strSelect);
while(rs.next()){
StartstopInfo info=new StartstopInfo();
info.setId(rs.getInt(1));
info.setMsg(rs.getString(2));
info.setTime(rs.getString(3));
info.setUsername(rs.getString(4));
info.setApp(rs.getString(5));
info.setOperation(rs.getString(6));
info.setObject(rs.getString(7));
info.setResult(rs.getString(8));
info.setDetail(rs.getString(9));
list.add(info);
}
rs.close();
st.close();
conn.close();
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
//把验证的信息封装成json
Gson gson=new Gson();
//把一个对象转化成一个json形式的字符串
String userinfo=gson.toJson(list);
//输出流输出
System.out.println(userinfo);
out.print(userinfo);
}
}
相关文章推荐
- list集合转换成json数据,ajax请求返回json数据,再通过循环显示出来
- 同一个页面,发出ajax请求,经过controller,返回ModelAndView,数据显示不了
- SSH JQuery Json ajax请求返回List对象集合
- 笔记1----前台ajax请求,后台返回list对象集合!
- 前端通过Ajax请求从后台返回数据到页面显示,实现分页功能
- list集合通过ajax 在页面显示 、 以及省市级联查询
- jQuery,ajax请求返回长数字字符串,jsp页面不显示为科学计数法
- 请求Action的路径、参数设置及Struts2的Action向JSP传输List集合并且将数据显示在页面上
- ajax请求返回的页面不跳转
- ajax XMLHttpRequest请求页面返回的值和ashx处理程序返回的值
- ajax调用action后返回list给list.jsp,显示为xml文档
- 利用AJAX为JSP页面传递一个包含了若干对象的List集合
- 利用AJAX为JSP页面传递一个包含了若干对象的List集合
- 用AJAX异步交互返回xml文件从jsp页面中读取并用表格显示
- ajax简单实例(js内产生xmlHttpRequest,它和servlet交互返回xml显示在页面)
- java中ajax请求后台返回object对象在前台直接显示事例
- 遇到的问题---jsp的ajax请求相同页面,服务端更新后浏览器仍然显示第一次的内容
- 将List中一列的值取出来 求和后 放到页面显示 用BigDicamal
- 在html页面用ajax的简单应用通过javascript得到数据库中的图片路径并在表格中显示出来
- jquery里面调用getjson方法,将list类型转换为json格式数据,在页面迭代显示