1. 程式人生 > >用ajax請求返回來的list集合在頁面上迭代顯示出來

用ajax請求返回來的list集合在頁面上迭代顯示出來

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);

}
}