ajax实现模糊查询完成列表信息显示

时间：2022-10-30 12:24:52

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

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

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

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

*惯，先看下效果：

ajax实现模糊查询完成列表信息显示

下面讲一下思路：

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

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

  1. django实战（二）--带多字段模糊查询的分页（也是不容易）

    上节我们实现了分页功能,这节我们要实现对模糊查询后的结果进行分页.(引入了bootstrap框架) urls.py from django.urls import path from . import ...

  2. jquery select 列表 ajax 动态获取数据 模糊查询 分页

    最近需要一个这样的select 在网上找的多是数据一次性获取到再通过前端模糊查询匹配的 这样在数据量比较大的情况下不适合 ,所以参考http://www.jq22.com/jquery-info145 ...

  3. Ajax实现在textbox中输入内容，动态从数据库中模糊查询显示到下拉框中

    功能:在textbox中输入内容,动态从数据库模糊查询显示到下拉框中,以供选择 1.建立一aspx页面,html代码 <HTML> <HEAD> <title>We ...

  4. Springmvc&plus;Myabtis&plus;Ajax实现异步分页emp&plus;dept（全部查询及模糊查询）

    1.在项目中创建如下目录 2.创建实体类Dept package com.entity; import java.io.Serializable; /** * 部门表 * @author Admini ...

  5. SharePoint 2007 单列表模糊查询SPD定制

    应用场景:项目中总会遇到一些列表,存着是用户.项目等数据,而我们需要查询有哪些项目,这时候,就需要用到模糊查询了,而这样的查询,基本不需要跨列表,所以,也没必要配置复杂的搜索,用Designer(简称 ...

  6. Ajax 模糊查询的简单实现

    类似于百度的搜索引擎模糊查询功能,不过百度的模糊查询功能更强大,这里简单实现下. 要实现模糊查询,首先要做的就是把SQL写好.话不多少,直接贴代码了! JSP页面: <%@ page langu ...

  7. AJAX基本操作 &plus; 登录 &plus; 删除 &plus; 模糊查询

    AJAX练习显示页面 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:// ...

  8. 使用mybatis提供的各种标签方法实现动态拼接Sql。这里演示where标签和if标签实现使用姓名的模糊查询和性别查询用户列表，当用户没有选择姓名以及性别时查询出所有的记录。

    1.需求: 使用姓名的模糊查询和性别查询用户列表,当用户没有选择姓名以及性别时查询出所有的记录. 2.在UserMapper接口中定义方法: public List<User> findU ...

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

    1.需求 将下边的功能实现Dao: 根据用户id查询一个用户信息 根据用户名称模糊查询用户信息列表 添加用户信息 2. 原始Dao开发方法需要程序员编写Dao接口和Dao实现类 3.User.xml映 ...

随机推荐

  1. coreseek&plus;sphinx&plus;mysql&plus;thinkphp整合

    1.安装coreseek 1.1首先升级或安装系统依赖库 yum install make gcc g++ automake libtool mysql-client libmysqlclient15 ...

  2. 在MVVM模式中，按钮Click事件的绑定方法

    在MVVM模式中,我们将Button的方法写到ViewModel中,然后绑定到前端界面.通常的做法是写一个类,继承ICommand接口,然而如果按钮比较多的话,就需要写很多的类,对于后期维护造成很大的 ...

  3. ZOOM - 简单易用的 jQuery 照片相册插件

    jQuery 最令人印象深刻的应用之一就是对图片的处理,它可以让帮助你在你的项目中加入一些让人惊叹的图片切换效果.ZOOM 是一款全屏效果的 jQuery 图片切换展示插件,支持键盘前后按键切换,支持 ...

  4. lintcode：数飞机

    数飞机 给出飞机的起飞和降落时间的列表,用 interval 序列表示. 请计算出天上同时最多有多少架飞机? 如果多架飞机降落和起飞在同一时刻,我们认为降落有优先权. 样例 对于每架飞机的起降时间列表 ...

  5. UVA 11426 GCD Extrme （Ⅲ）

    给定一个整数N(1<N<=4000000)的整数求∑GCD(i,j)i=1,2,3....j-1,2<=j<=n的值.参考了一下网上的题解,复述一下我理解后的思路,加深理解: ...

  6. 2016&quot&semi;百度之星&quot&semi; - 资格赛（Astar Round1） Problem B

    规律题,斐波那契数列,数据有毒,0的时候输出换行.会爆longlong,写个大数模板或者Java搞. import java.io.BufferedInputStream; import java.m ...

  7. yaourt 之 Curl 错误

    最近执行 yaourt 更新时总是出现以下错误: curl error: Couldn't connect to server 无法进行更新.把配置中的下载工具更换了成 axel 等其它下载工具,还是 ...

  8. Python学习笔记012&lowbar;网络&lowbar;异常

    1,Python如何访问互联网? url + lib =  urllib >>> # 使用urllib包下的request模块 >>> >>> i ...

  9. JAVA描述的简单ORM框架

    抽了点时间自己写了个ORM,主要是为了复习JAVA泛型,映射,注解方面的知识.如需代码,可前往:https://github.com/m2492565210/java_orm自行下载 框架的类结构如下 ...

  10. javascript之事件监听

    addEventListener是一个监听事件并处理相应的函数,用于向指定元素添加事件句柄,可使用removeEventListener()方法来移除addEventListener()方法添加的事件 ...

相关文章