zoukankan      html  css  js  c++  java
  • ajax实现模糊查询完成列表信息显示

    之前遗留一个老问题:列表模糊查询,用的直接是form提交,点击搜索按扭后,页面刷新,搜索框中关键词就没了,这鸡肋的体验,我发誓一定要搞定它

    但是鉴于自己写代码是纯粹玩票,我写代码没有目标,只有在当前工作中找不到自信的时候,我会通过写代码来鼓励自己更加自信

    写了这么久,一个系统也是要写很久的,这其中很多细节点,都得一步步的搞定,而且中间可能调试时候遇到很多问题,也得慢慢查

    这个功能是很早之前欠下自己的,搞了3天,终于出来了。涉及的点,我准备用一长篇来讲述清楚

    老习惯,先看下效果:

    下面讲一下思路:

    1、首先访问servlet出全列表内容

    2、查询为空判断,跳转默认首页出列表全内容

    3、查询条件传入servlet,根据查询条件出内容

    帖整体代码:

    test.jsp

    <%@page import="java.sql.Timestamp"%>
    <%@page import="entity.User"%>
    <%@page import="java.util.List"%>
    <%@ page language="java" contentType="text/html; charset=utf-8"
        pageEncoding="utf-8"%>
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Insert title here</title>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
    	$("#btn").click(function(){
    			var search = $("#search").val();
    			alert(search);
    			$("#all tr td").remove();
    			if(search==null ||search==""){
    				alert("查询条件不能为空!");//要判断一下,否则的话,要出全部列表,我下面已经有出全部列表的了,
    				parent.document.location.href="<%=request.getContextPath()%>/userListServlet";//必须得这一步,否则会空列表
    			}else{
    				$.ajax({
    					type:"POST",
    					url:"<%=request.getContextPath()%>/userListServlet",
    					data:{
    						"search":search,
    					},
    					DataType:"json",
    					success:function(data){
    						var dataObj = eval("("+data+")");
    						//alert(dataObj);
    						var a=null;//主要是因为json是个数组,有多列结果的时候,得拼接+
    						$.each(dataObj,function(i,item){
    							//alert(dataObj.length);
    							//alert("这是:"+item.id+","+item.username);
    							a += '<tr>'+
    							+'<td id="id">'+item.id+'</td>'
    							+'<td id="name">'+item.username+'</td>'
    							+'<td id="status">'+item.status+'</td>'
    							+'<td id="isAdmin">'+item.isAdmin +'</td>'
    							+'<td id="createTime">'+item.createTime+'</td>'
    							+'</tr>';
    						})
    						$("#all").append(a);
    						
    					},
    				});
    			}
    	})
    });
    
    </script>
    </head>
    <body>
    <div>
    	<input type="text" name="search" id="search"/>
    	<input type="button" name="btn" id="btn" value="搜索"/>
    	<table id="all">
    		<tr>
    			<th>id</th>
    			<th>name</th>
    			<th>status</th>
    			<th>isAdmin</th>
    			<th>createTime</th>
    		</tr>
              <!--之所以为什么这么麻烦还得再求一遍全列表数据,是因为我笨,我想不到其它办法,只有麻烦一些了,这是不输入查询条件时候的结果--> <% List<User> userList = (List<User>)request.getAttribute("userList"); if(userList==null){ %> <tr> <td >没有数据</td> </tr> <%}else{ for(int i=0;i<userList.size();i++){ User user = userList.get(i); %> <tr> <td id="id"><%=user.getId() %></td> <td id="name"><%=user.getUsername() %></td> <td id="status"><%=user.getStatus() %></td> <td id="isAdmin"><%=user.getIsAdmin() %></td> <td id="createTime"><%=user.getCreateTime()%></td> </tr> <%}%> <%} %> </table> </div> </body> </html>

     servlet:

    package servlet;
    
    import java.io.IOException;
    import java.io.PrintWriter;
    import java.sql.Date;
    import java.text.SimpleDateFormat;
    import java.util.List;
    import javax.servlet.ServletException;
    import javax.servlet.annotation.WebServlet;
    import javax.servlet.http.HttpServlet;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    import entity.User;
    import net.sf.json.JSONArray;
    import net.sf.json.JsonConfig;
    import net.sf.json.processors.JsDateJsonValueProcessor;
    import net.sf.json.processors.JsonValueProcessor;
    import service.UserService;
    import service.impl.UserServiceImpl;
    
    @WebServlet(name = "userListServlet", urlPatterns = { "/userListServlet" })
    public class UserListServlet extends HttpServlet {
    	private static final long serialVersionUID = 1L;
        public UserListServlet() {
            super();
        }
    	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    		doPost(request, response);
    	}
    
    	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    		PrintWriter print=response.getWriter();
    		UserService userService=new UserServiceImpl();
    		String search = request.getParameter("search");//这里是因为遇到了一个问题,JSONArray转换日期报错,java.lang.reflect.InvocationTargetExce,http://blog.csdn.net/zz210891470/article/details/52447507
    		JsonConfig jsonConfig=new JsonConfig();
    //下面这个方法可以另起一个util类里写工具方法,但我只想快快验证,所以就写一起了 jsonConfig.registerJsonValueProcessor(java.sql.Date.class,new JsonValueProcessor() { private final String format="yyyy-MM-dd"; public Object processObjectValue(String key, Object value,JsonConfig arg2){ if(value==null) return ""; if (value instanceof java.sql.Date) { String str = new SimpleDateFormat(format).format((java.sql.Date) value); return str; } return value.toString(); } public Object processArrayValue(Object value, JsonConfig arg1){ return null; } });
              //对搜索的关键字进行判断处理 System.out.println("search==="+search); if(search==null || search.equals("")) {//如果搜索框不输入,第一次进入列表的时候肯定是这种情况,另外就是输入框中为空点击搜索也是这种情况统一处理 List<User> userList = userService.findUserByLikeName(""); System.out.println(userList.size()); request.setAttribute("userList", userList); request.getRequestDispatcher("page/test.jsp").forward(request,response); //我就用了最老实最原始最笨的上面这种servlet朝jsp传值的方法。然后在jsp中又是代码写呀写拼呀拼 }else { //如果搜索条件不为空 List<User> userList = userService.findUserByLikeName(search); System.out.println("有几条数据:"+userList.size()); String json = JSONArray.fromObject(userList,jsonConfig).toString(); print.print(json);//通过ajax传给页面 } } }

     总结:要说知识点,其实都是一些常见的很基础的点,但是最重要的是测试,测试各种情况,我这篇博写了1天,原因是,当我准备放上去的时候,我去测试了搜索n这个关键字发现TMD只显示1行,数据都没有问题,但是最后一条覆盖了第一条。才发现有些地方写的不对,然后我就改啊改,越改越乱。越测越有问题。越来越觉得,写代码之前如果没有清晰的设计思路,根本做不好,中间会返很多遍。

  • 相关阅读:
    (2.3)备份与还原--事务的运行模式与处理机制
    (2.2)备份与还原--备份类型与恢复模式、备份介质
    (2.1)备份与还原--sql server文件的概念及操作
    (1.3.3)权限控制
    (1.3.2)登录验证(加密连接与登录验证)
    (1.3.1)连接安全(连接实例与网络协议及TDS端点)
    static class
    cnblog
    microsoft
    C# socket android
  • 原文地址:https://www.cnblogs.com/sincoolvip/p/7794417.html
Copyright © 2011-2022 走看看