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行，数据都没有问题，但是最后一条覆盖了第一条。才发现有些地方写的不对，然后我就改啊改，越改越乱。越测越有问题。越来越觉得，写代码之前如果没有清晰的设计思路，根本做不好，中间会返很多遍。
ajax实现模糊查询完成列表信息显示的更多相关文章
- django实战（二）--带多字段模糊查询的分页（也是不容易）
上节我们实现了分页功能,这节我们要实现对模糊查询后的结果进行分页.(引入了bootstrap框架) urls.py from django.urls import path from . import ...
- jquery select 列表 ajax 动态获取数据 模糊查询 分页
最近需要一个这样的select 在网上找的多是数据一次性获取到再通过前端模糊查询匹配的 这样在数据量比较大的情况下不适合 ,所以参考http://www.jq22.com/jquery-info145 ...
- Ajax实现在textbox中输入内容，动态从数据库中模糊查询显示到下拉框中
功能:在textbox中输入内容,动态从数据库模糊查询显示到下拉框中,以供选择 1.建立一aspx页面,html代码 <HTML> <HEAD> <title>We ...
- Springmvc+Myabtis+Ajax实现异步分页emp+dept（全部查询及模糊查询）
1.在项目中创建如下目录 2.创建实体类Dept package com.entity; import java.io.Serializable; /** * 部门表 * @author Admini ...
- SharePoint 2007 单列表模糊查询SPD定制
应用场景:项目中总会遇到一些列表,存着是用户.项目等数据,而我们需要查询有哪些项目,这时候,就需要用到模糊查询了,而这样的查询,基本不需要跨列表,所以,也没必要配置复杂的搜索,用Designer(简称 ...
- Ajax 模糊查询的简单实现
类似于百度的搜索引擎模糊查询功能,不过百度的模糊查询功能更强大,这里简单实现下. 要实现模糊查询,首先要做的就是把SQL写好.话不多少,直接贴代码了! JSP页面: <%@ page langu ...
- AJAX基本操作 + 登录 + 删除 + 模糊查询
AJAX练习显示页面 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:// ...
- 使用mybatis提供的各种标签方法实现动态拼接Sql。这里演示where标签和if标签实现使用姓名的模糊查询和性别查询用户列表，当用户没有选择姓名以及性别时查询出所有的记录。
1.需求: 使用姓名的模糊查询和性别查询用户列表,当用户没有选择姓名以及性别时查询出所有的记录. 2.在UserMapper接口中定义方法: public List<User> findU ...
- 使用mybatis开发Dao的原始方法，实现根据用户id查询一个用户信息 、根据用户名称模糊查询用户信息列表 、添加用户信息等功能
1.需求 将下边的功能实现Dao: 根据用户id查询一个用户信息 根据用户名称模糊查询用户信息列表 添加用户信息 2. 原始Dao开发方法需要程序员编写Dao接口和Dao实现类 3.User.xml映 ...
随机推荐
- IE报错：The given path's format is not supported
在使用FileUpload控件进行上传EXCEL文件时,本地调试上传无问题,但是发布之后报地址无效错误 一.出现这个错误的主要原因是,在本地上传图片的时候HttpPostedFileBase对象里面保 ...
- cocos2d-x---CCLabelTTF加载字体库
strPath = g_ImgPath + "方正卡通简体.ttf"; m_pLebGold = CCLabelTTF::create(); CC_ERROR(m_pLebGold ...
- 【web技术】html特效代码（二）
html特效代码(一) html特效代码(二) 图片漂浮广告代码 <bodybgcolor="#F7F7F7"> <!--图片漂浮广告代码开始--> < ...
- Python爬取新浪微博评论数据，写入csv文件中
因为新浪微博网页版爬虫比较困难,故采取用手机网页端爬取的方式 操作步骤如下: 1. 网页版登陆新浪微博 2.打开m.weibo.cn 3.查找自己感兴趣的话题,获取对应的数据接口链接 4.获取cook ...
- 移动web开发（二）——viewport
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scal ...
- JAVA-JSP内置对象之response对象
相关资料:<21天学通Java Web开发> response对象1.response对象用来给客户端传送输出信息. 方法 ...
- 【应用笔记】【AN005】Qt开发环境下基于RS485的4-20mA电流采集
简介 4-20mA电流环具有广泛的应用前景,在许多行业中都发挥着重要作用.本文主要介绍在Qt开发环境下基于RS485实现4-20mA电流采集,实现WINDOWS平台对数据的采集.分析及显示. 系统组成 ...
- nginx报502 bad GateWay错误的解决方法
nginx+php-fpm+mysql的网站,访问nginx的某个页面,报502 GateWay的错误,一般见到此错误,可以判断是php-fpm的问题,而不是nginx的问题.通过监控nginx的错误 ...
- android 中使用jwt token(json web token)--java
http://blog.csdn.net/mingzhnglei/article/details/51119836 下面贴上自己项目中的一个小小的example import com.nimbusds ...
- windows C 盘大小异常增大并解决记录
前几天偶然看了一下 C 盘的大小,发现分配的 60 G 最后剩下 8G 可用.十分怀疑. 我先是下载 WizTree 工具进行查看C盘大小,有如下, pagefile.sys 是我修改后变为1G, 前 ...