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行，数据都没有问题，但是最后一条覆盖了第一条。才发现有些地方写的不对，然后我就改啊改，越改越乱。越测越有问题。越来越觉得，写代码之前如果没有清晰的设计思路，根本做不好，中间会返很多遍。

时间： 2024-10-12 15:51:23

ajax实现模糊查询完成列表信息显示的相关文章

$.ajax 进行模糊查询

html代码 <div class="conditions staff ue-clear"> <label>公司类型:</label><input type="text" id="companytypename"/> </div> $.ajax代码 $.ajax({ type: "Post", url: "/company/companycheck/geta

延时模糊查询

当用户在输入框上输入东西的时候,下面自动显示出搜索结果来.但是我想的是当延迟一秒,判断用户还有没有继续输入或者删除的意愿再进行ajax调用模糊查询. 方案一: fn为延时后执行的函数,delay为延时时间 1 debounce_return: function (fn, delay) { 2 var timer = null; 3 return function () { 4 var context = this; 5 var args = arguments; 6 clearTimeout(t

Springmvc+Myabtis+Ajax实现异步分页emp+dept（全部查询及模糊查询）

1.在项目中创建如下目录 2.创建实体类Dept package com.entity; import java.io.Serializable; /** * 部门表 * @author Administrator * */ public class Dept implements Serializable{ /** * */ private static final long serialVersionUID = 1L; private Integer deptno; private Stri

ajax 判断账户密码 调取数据模糊查询 时钟

一.判断账户密码 <Login.html> 1 <head> 2 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 3 <title></title> 4 <script src="Script/jquery.js"></script> 5 <script languag

ajax交互servlet返回数据和jdbc模糊查询-中文-已经设置了UTF-8和解决了乱码

1.编码是将字符按一定翻译方式转换成字节存储在内存或外存中,解码是按照一定翻译方式将存储中的字节转换成字符. 2.ASCII是单字节,最高位总为0,相当于只占用了一个字节的7位,2^7=128个字符,相当于键盘上的128个键,有大小写因为字母,有*,%￥#@!+....等这些可显示字符,也有不可以显示的控制符F1,ctr... 而ISO-8859-1是启用了ASCII码的最高位,理论上是能再多128位,实际上没用掉这么多,至于多了那些,你们自己查下表 UTF-8是可变长的,具体中文几个字节,怎么

AJAX基本操作 + 登录 + 删除 + 模糊查询

AJAX练习显示页面 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu

使用mybatis开发Dao的原始方法，实现根据用户id查询一个用户信息 、根据用户名称模糊查询用户信息列表 、添加用户信息等功能

1.需求 将下边的功能实现Dao: 根据用户id查询一个用户信息 根据用户名称模糊查询用户信息列表 添加用户信息 2. 原始Dao开发方法需要程序员编写Dao接口和Dao实现类 3.User.xml映射文件的内容为: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "h

前端js模糊搜索（模糊查询）

1.html结构: <label for="searchShop" class="clear pos-a" style="top:17px;">            <input type="text" id="searchShop" placeholder="场所搜索">            <input type="button"

分页加模糊查询

基于Spring+springmvc+spring data jpa+jquery框架 一,首先,我们先来看下后台. 我这里是根据经理登录来查看自己对应的客户,所以传递了4个值  页面大小,当前页 , 经理ID,和模糊查询的数据 ,首先看下Service currentPage = currentPage == null ? 1 : currentPage; pageSize = pageSize == null ? 10 : pageSize return dao.findLike(admin