ajax實現模糊查詢完成列表信息顯示

時間 2019-11-17

標籤 ajax 實現模糊查詢完成列表信息顯示欄目 Ajax 简体版

原文原文鏈接

以前遺留一個老問題：列表模糊查詢，用的直接是form提交，點擊搜索按扭後，頁面刷新，搜索框中關鍵詞就沒了，這雞肋的體驗，我發誓必定要搞定它javascript

可是鑑於本身寫代碼是純粹玩票，我寫代碼沒有目標，只有在當前工做中找不到自信的時候，我會經過寫代碼來鼓勵本身更加自信html

寫了這麼久，一個系統也是要寫好久的，這其中不少細節點，都得一步步的搞定，並且中間可能調試時候遇到不少問題，也得慢慢查java

這個功能是很早以前欠下本身的，搞了3天，終於出來了。涉及的點，我準備用一長篇來說述清楚jquery

老習慣，先看下效果：ajax

下面講一下思路：sql

一、首先訪問servlet出全列表內容json

二、查詢爲空判斷，跳轉默認首頁出列表全內容數組

三、查詢條件傳入servlet，根據查詢條件出內容app

帖總體代碼：jsp

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行，數據都沒有問題，可是最後一條覆蓋了第一條。才發現有些地方寫的不對，而後我就改啊改，越改越亂。越測越有問題。愈來愈以爲，寫代碼以前若是沒有清晰的設計思路，根本作很差，中間會返不少遍。