AJAX (实时查询/即时查询) LIVE SEARCH

最新推荐文章于 2022-08-08 14:06:28 发布

qq_45902743

最新推荐文章于 2022-08-08 14:06:28 发布

阅读量801

点赞数 1

分类专栏： tomcat java 依赖注入文章标签： ajax java javascript spring intellij idea

本文链接：https://blog.csdn.net/qq_45902743/article/details/120195469

版权

tomcat 同时被 3 个专栏收录

2 篇文章 0 订阅

订阅专栏

java

2 篇文章 0 订阅

订阅专栏

依赖注入

2 篇文章 0 订阅

订阅专栏

本文介绍了一个实习开发者如何使用AJAX技术实现网页的实时查询功能。通过前端JavaScript监听用户输入并延迟发送请求，后端处理查询并返回数据，实现了在用户输入时动态更新表格内容的效果。涉及的技术包括jQuery、MyBatis和Spring MVC。

摘要由CSDN通过智能技术生成

AJAX (实时查询/即时查询) LIVE SEARCH

实时查询按我的理解就是在输入框里输入一个字符整个页面都会跟着变
先上几个效果图吧
Mysql数据库信息
请添加图片描述
输入前

输入后

这个功能我是用ajax实现的
前端

<body>

     <p>
     	 <div>
         <form action="${pageContext.request.contextPath}/excel.do" method="get" enctype="application/x-www-form-urlencoded">
			
				<label>类别名称：</label>
				<input id="searchName" type="text" />&nbsp;&nbsp;
				
		</form>
		</div>
     </p>

	 <table>
		<thead>
			<tr>
				<th>类别ID</th><th>类名名称</th><th>操作</th>
			</tr>
		</thead>
		
		<tbody id="select">
			
		</tbody>
     </table>
</body>

后端这个是用来加载到这个页面用的
http://xxxxxxxxx/xxxxxxxx/excel.do

@Controller
@RequestMapping
public class ExcelController {

	@Autowired
	private GoodsTypeService goodsTypeServiceImpl;
	
	@RequestMapping("/excel.do")
	public String list(){
			return "test/excel2";
	}

这样就进到页面里啦
这时候什么数据都没有只有前端的表头和输入框
先用AJAX技术把数据放到页面上
前端js

//一进网页就加载freshPage()
$(document).ready(function(){
			
			freshPage();
				
		});


function freshPage(){
			
			$.get(
				"${pageContext.request.contextPath }/ajaxGoodsType.do",
				function(data){
				//模拟一下get请求响应完的信息200
					if(data.code == 200){
					//麻烦的拼串环节
						var goodsTypesList = data.goodsTypesList;
						var text = "";
						for(var i = 0;i < goodsTypesList.length;i++){
							text += "<tr>"+
								"<td><input type='checkbox' name='checkedExport' value='"+goodsTypesList[i].typeId+"' /></td>"+
								"<td>"+ goodsTypesList[i].typeId +"</td>&nbsp; "+
								"<td>"+ goodsTypesList[i].typeName +"</td>&nbsp; "+
								"<td><button>修改</button>&nbsp; <button>删除</button></td></tr>" 							   
						}
						//把<tbody id="select"></tbody>里的数据清空
						$("#select").empty();
						//在<tbody id="select"></tbody>追加数据text
						$("#select").append(text);
						
					}

				}
			);
		}

后端

@RequestMapping("/ajaxGoodsType.do")
	@ResponseBody
	public Map ajaxGoodsType(){
		Map map = new HashMap<>();
		
		List<GoodsType> goodsTypesList = goodsTypeServiceImpl.getAllTypeList();
		map.put("goodsTypesList", goodsTypesList);
		map.put("code", 200);
		return map;
		
	}

Mybatis

<!-- 查询全部类别 -->
  <select id="getAllTypeList" resultMap="BaseResultMap">
  	select * from t_goodstype
  </select>

这样页面就有数据啦此时效果应该是这样的
但输入框还没有实时查询的功能
请添加图片描述
现在追加实时查询效果需要用的AJAX
前端js

var lastTimeStamp = 0;
		//手指离开键盘时触发 
		$(document).keyup('input',function(event){
			//标记当前事件函数的时间戳 
		    lastTimeStamp = event.timeStamp;
			//使输入框变成蓝色
			$("#searchName").css("background-color","#87CEFA");
			var selectName = $("#searchName").val();
			//300ms后比较二者是否还相同（因为只要还有事件触发，lastTimeStamp就会被改写，不再是当前事件函数的时间戳）
			//不写setTimeout这个的话它不会等你输入完再找 你输入啥它就找啥
			//输入法输入汉字之前输入框里是拼音 每输入一个字母就查一边
			setTimeout(function(){
		         if(lastTimeStamp == event.timeStamp){
		        	 liveFreshPage(selectName);
		         };
		     },300);
			
			
		});
		
		function liveFreshPage(selectName){
			
			$.get("${pageContext.request.contextPath }/ajaxSelect.do",
				//这里要往后端传数据 selectName 其他同上
				{selectName: selectName},
				function(data){
					if(data.code == 200){
						//这里的变量有变化 和上面不一样
						var getGoodsTypesList = data.getGoodsTypesList;
						var text = "";
						for(var i = 0;i < getGoodsTypesList.length;i++){
							text += "<tr>"+
								"<td><input type='checkbox' name='checkedExport' value='"+getGoodsTypesList[i].typeId+"' /></td>"+
								"<td>"+ getGoodsTypesList[i].typeId +"</td>&nbsp; "+
								"<td>"+ getGoodsTypesList[i].typeName +"</td>&nbsp; "+
								"<td><button>修改</button>&nbsp; <button>删除</button></td></tr>" 							   
						}
						$("#select").empty();
						$("#select").append(text);
					}

				}
				
			);
		}

后端

@RequestMapping("/ajaxSelect.do")
	@ResponseBody
	public Map ajaxSelect(String selectName){
		
		System.out.println(selectName);
		List<GoodsType> getGoodsTypesList = goodsTypeServiceImpl.getAjaxGoodsTypeList(selectName);
		for(int i = 0;i < getGoodsTypesList.size();i++ )
		{
			System.out.println(getGoodsTypesList.get(i).getTypeName());
		}
		Map map = new HashMap<>();
		map.put("getGoodsTypesList", getGoodsTypesList);
		map.put("code", 200);
		return map;
		
	}

Mybatis

<select id="getAjaxGoodsTypeList" parameterType="java.lang.String" resultType="com.ptt.entity.GoodsType">
  	select typeId, typeName from t_goodsType where 1=1
  	<if test="typeName != null and typeName != '' ">
  		and typeName like CONCAT('%',#{typeName,jdbcType=VARCHAR},'%')
  	</if>
  </select>

整个后端
emmmm 其实只是实时查询功能的话用不到这么多import

package com.ptt.controller;

import java.io.File;
import java.io.FileNotFoundException;
import java.io.FileOutputStream;
import java.io.IOException;
import java.net.URLEncoder;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import javax.servlet.ServletOutputStream;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;

import org.apache.poi.xssf.usermodel.XSSFWorkbook;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.jdbc.core.JdbcTemplate;
import org.springframework.stereotype.Controller;
import org.springframework.ui.ModelMap;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.bind.annotation.RestController;

import com.mysql.cj.x.protobuf.MysqlxCursor.Close;
import com.ptt.entity.GoodsType;
import com.ptt.entity.User;
import com.ptt.service.GoodsTypeService;
import com.ptt.utils.ExcelWriter;
import com.ptt.utils.PageHelper;

@Controller
@RequestMapping
public class ExcelController {

	@Autowired
	private GoodsTypeService goodsTypeServiceImpl;
	
	@RequestMapping("/excel.do")
	public String list(){
		return "test/excel2";
	}
	
	@RequestMapping("/ajaxGoodsType.do")
	@ResponseBody
	public Map ajaxGoodsType(){
		Map map = new HashMap<>();
		
		List<GoodsType> goodsTypesList = goodsTypeServiceImpl.getAllTypeList();
		map.put("goodsTypesList", goodsTypesList);
		map.put("code", 200);
		return map;
		
	}
	
	@RequestMapping("/ajaxSelect.do")
	@ResponseBody
	public Map ajaxSelect(String selectName){
		
		System.out.println(selectName);
		List<GoodsType> getGoodsTypesList = goodsTypeServiceImpl.getAjaxGoodsTypeList(selectName);
		for(int i = 0;i < getGoodsTypesList.size();i++ )
		{
			System.out.println(getGoodsTypesList.get(i).getTypeName());
		}
		Map map = new HashMap<>();
		map.put("getGoodsTypesList", getGoodsTypesList);
		map.put("code", 200);
		return map;
		
	}
	
	
	
}

效果图
请添加图片描述
这样一个实时查询的功能就写完啦
本人实习生一枚写法上肯定不能和正式的比
本人也是崩坏三忠实的铁粉宣传一波

qq_45902743

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
AJAX (实时查询/即时查询) LIVE SEARCH

AJAX (实时查询/即时查询) LIVE SEARCH实时查询按我的理解就是在输入框里输入一个字符整个页面都会跟着变先上几个效果图吧Mysql数据库信息输入前输入后这个功能我是用ajax实现的前端<body> <p> <div> <form action="${pageContext.request.contextPath}/excel.do" method="get" enctype="appl
复制链接

扫一扫

专栏目录