之前遗留一个老问题:列表模糊查询,用的直接是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/52447507JsonConfig 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行,数据都没有问题,但是最后一条覆盖了第一条。才发现有些地方写的不对,然后我就改啊改,越改越乱。越测越有问题。越来越觉得,写代码之前如果没有清晰的设计思路,根本做不好,中间会返很多遍。
ajax实现模糊查询完成列表信息显示
原文地址:http://www.cnblogs.com/sincoolvip/p/7794417.html