利用Spring MVC + Ajax实现模糊查询。
Spring用的是3.0。
工程结构图:
Web.xml配置:
<?xml version="1.0" encoding="UTF-8"?> <web-app id="WebApp_ID" version="2.4" xmlns="http://java.sun.com/xml/ns/j2ee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd"> <display-name>Spring MVC</display-name> <servlet> <servlet-name>springmvc</servlet-name> <servlet-class> org.springframework.web.servlet.DispatcherServlet </servlet-class> <load-on-startup>1</load-on-startup> </servlet> <servlet-mapping> <servlet-name>springmvc</servlet-name> <url-pattern>*.htm</url-pattern> </servlet-mapping> <welcome-file-list> <welcome-file>index.jsp</welcome-file> </welcome-file-list> </web-app>
springmvc-servlet.xml配置:
<?xml version="1.0" encoding="UTF-8"?> <!-- Copyright : adobocode.com , 2010 --> <beans xmlns="http://www.springframework.org/schema/beans" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:p="http://www.springframework.org/schema/p" xmlns:context="http://www.springframework.org/schema/context" xsi:schemaLocation=" http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-3.0.xsd http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-3.0.xsd"> <bean class="org.springframework.web.servlet.mvc.annotation.DefaultAnnotationHandlerMapping" /> <bean class="org.springframework.web.servlet.mvc.annotation.AnnotationMethodHandlerAdapter" /> <context:component-scan base-package="com.springmvc" /> <!-- 该 BeanPostProcessor 将自动对标注 @Autowired 的 Bean 进行注入 --> <bean class="org.springframework.beans.factory.annotation.AutowiredAnnotationBeanPostProcessor"/> <bean id="studentService" class="com.springmvc.service.StudentService"></bean> <bean id="personService" class="com.springmvc.service.PersonService"></bean> <bean id="viewResolver" class="org.springframework.web.servlet.view.InternalResourceViewResolver"> <property name="viewClass"> <value>org.springframework.web.servlet.view.JstlView</value> </property> <property name="prefix"> <value>/WEB-INF/jsp/</value> </property> <property name="suffix"> <value>.jsp</value> </property> </bean> </beans>
StudentIndexController.java:
/** * 文件:StudentIndexController.java * 描述:TODO * 作者:luckystar2008
* 日期:2011-9-30 */ package com.springmvc.controller; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; /** * @author luckystar2008
* */ @Controller public class StudentIndexController { @RequestMapping("/student/ajax.htm") public String handle() { return "studentAjax"; } }
StudentController.java:
/** * 文件:StudentController.java * 描述:TODO * 作者:luckystar2008
* 日期:2011-9-29 */ package com.springmvc.controller; import java.io.IOException; import java.io.PrintWriter; import java.util.List; import javax.servlet.http.HttpServletResponse; import org.apache.commons.logging.Log; import org.apache.commons.logging.LogFactory; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RequestParam; import com.springmvc.bean.Student; import com.springmvc.service.StudentService; /** * @author luckystar2008
* */ @Controller public class StudentController { private Log log = LogFactory.getLog(StudentController.class); @Autowired private StudentService studentService; @RequestMapping("/student/fuzzy.htm") public void fuzzy(@RequestParam(value="name") String name,HttpServletResponse res) { List<Student> studentList = studentService.getFuzzyList(name); log.info("查找的字符串:" + name); log.info("查找到的符合条件的记录:" + studentList.size()); if (studentList.size() > 0 ) { StringBuffer sbf = new StringBuffer(); for (Student s : studentList) { String sname = s.getName(); if (sname != null && !"".equals(sname)) { sbf.append(sname).append("|"); } } String outer = sbf.substring(0, sbf.toString().lastIndexOf("|")); log.info(outer); try { log.info("res==null?" + res); PrintWriter out = res.getWriter(); out.print(outer); out.flush(); out.close(); } catch (IOException e) { // TODO Auto-generated catch block e.printStackTrace(); } } } }
StudentService.java:
/** * 文件:StudentService.java * 描述:TODO * 作者:luckystar2008
* 日期:2011-9-29 */ package com.springmvc.service; import java.util.ArrayList; import java.util.List; import com.springmvc.bean.Student; /** * @author luckystar2008
* */ public class StudentService { public List<Student> list = new ArrayList<Student>(); public StudentService() { System.out.println("开始初始化List。。。"); for (int i=0;i<100;i++) { Student s = new Student(); s.setId(i); s.setName("Student__" + i); s.setAge(i); list.add(s); } System.out.println("共放入"+list.size()+"个对象到List。"); } /** * 模糊查询。 * @param name:要查询的名字 * @return 匹配此名字的Student List。 */ public List<Student> getFuzzyList(String name) { List<Student> tmpList = new ArrayList<Student>(); if (name != null && !"".equals(name)) { for (Student s : list) { if (s != null) { if (s.getName().indexOf(name) != -1) { tmpList.add(s); } } } } return tmpList; } }
studentAjax.jsp:
<%@ page language="java" session="false" contentType="text/html; charset=UTF-8"%> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> <html> <head> <title>Ajax模糊查询</title> <script type="text/javascript"> // 记录上一次查询的内容 var lastValue = ""; var timeout = 0; function doAjax() { // 1.5s请求一次,因为是onkeyup事件,每输入一个字符就会请求,所以改成从输入开始到1.5s后才提交查询。 timeout = setTimeout('searchIt()',1500); } function searchIt() { var obj = document.getElementById('name'); if (lastValue == obj.value ) return; // 2次的内容一样不查询。 var quzzyUrl = "/springmvc/student/fuzzy.htm"; quzzyUrl += "?name=" + obj.value + "&time=" + (new Date()).toLocaleString() + ""; var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); xmlhttp.open("post",quzzyUrl,true); xmlhttp.onreadystatechange = function() { if (xmlhttp.readyState == 4) { if (xmlhttp.status == 200) { var data = xmlhttp.responseText; var div = document.getElementsByTagName("div")[0]; if (data.length > 0) { var arr = data.split('|'); div.innerHTML = "<span style='color:red;'>找到记录:"+arr.length+"条</span><br>"; for (var i=0;i<arr.length;i++) { div.innerHTML += "<span style='position:absolute;width:220px;'>" + arr[i] + "</span><br>"; } div.style.display = "block"; var spans = div.document.getElementsByTagName('span'); for (var i=1;i<spans.length;i++) { spans[i].onmouseover = function() { this.style.background = 'blue'; this.style.color = 'red'; } spans[i].onmouseout = function() { this.style.background = 'white'; this.style.color = 'black'; } spans[i].onclick = function() { obj.value = this.innerText; div.innerHTML = ""; div.style.display = 'none'; } } } } else { alert("Problem retrieving data"); } } } xmlhttp.send(null); clearTimeout(timeout); lastValue = obj.value; } </script> </head> <body> <label>姓名:</label> <input type="text" id="name" name="name" onkeyup="doAjax();" style="position:absolute;left:100px;width:150px;"><br> <div style="position:absolute;border:1px dotted blue;left:100px;display:none;width:220px;height:150px;overflow:scroll;"></div> </body> </html>
相关推荐
将Spring MVC与Ajax结合使用,可以实现页面的异步更新,提升用户体验,同时保持服务器负载均衡。 首先,我们需要理解Spring MVC的基本工作流程。当用户发起请求时,Spring MVC的DispatcherServlet会拦截这个请求,...
Spring、Hibernate、Spring MVC 和 Ajax 是四个在Java Web开发中广泛应用的技术框架,它们共同构建了一个高效、灵活且功能丰富的后端系统。以下是对这些技术及其整合应用的详细说明: Spring框架是一个全面的企业级...
**Spring MVC + Ajax 用户登录增删改查功能详解** 在Web开发中,Spring MVC和Ajax是两种非常重要的技术。Spring MVC作为Spring框架的一部分,提供了一种模型-视图-控制器的架构模式,使得开发者能够更好地组织和...
01. 采用后台及前台的 Spring + Spring mvc + Hibernate + Bootstrap 02. 后台全注解式的开发(除了必要的spring和hibernate的xml配置以外) 03. 后台通过自定义注解结合一个访问拦截器实现整个系统的权限控制 04...
本示例探讨的是如何利用Spring MVC后端框架与前端的Ajax技术来实现高效的文件上传,相较于传统的表单提交方式,这种方法具有无刷新、用户体验更佳的优势。以下是关于这个主题的详细讲解。 首先,我们需要理解Spring...
【项目原型】spring+spring mvc+mybatis+shiro+maven+bootstrap+ajax+json+分页+逆向工程 包含现在最流行的技术框架,快速部署各种应用,加入shiro权限框架,安全,美观,你值得拥有
在本篇文档中,我们主要探讨了使用Spring MVC和Ajax技术实现导出和导入XML文件的功能。这一技术在Web开发中十分常见,用于在客户端与服务器之间传输数据,且常常用于文件操作场景。 首先,我们来看文档中提及的导入...
项目描述 它是一个针对汽车销售有关的后台管理...spring+spring mvc+mybatis+bootstrap+jquery 数据库文件 链接:https://pan.baidu.com/s/1qWF4Nx3xGjjtW3fW-pjRDg 提取码:nfwj jar包文件 压缩包WEB-INF/lib下
在本项目中,"Spring+SpringMVC+Mybatis+Maven+bootstrap+ajax+jQuery整合开发简单的员工后台管理系统",我们看到一个基于Java技术栈的Web应用开发实例。这个系统利用了多个核心技术来构建一个功能完备的员工管理...
在本项目中,我们探讨的是如何使用Spring MVC、iBatis、Oracle数据库以及Ajax技术构建一个轻量级的Web应用程序架构。Spring MVC是Spring框架的一部分,主要负责处理HTTP请求和控制应用程序的流程;iBatis则是一个SQL...
**Spring3 MVC与Ajax整合详解** 在Web应用开发中,Spring3 MVC框架和Ajax技术的结合使用能够极大地提升用户体验,实现页面的无刷新更新。本文将深入探讨如何在Spring3 MVC项目中集成Ajax,以便更好地理解这两者的...
**Spring MVC + Mybatis + Maven 整合应用详解** 在现代Java Web开发中,Spring MVC、Mybatis和Maven是三个非常重要的工具。Spring MVC作为Spring框架的一部分,提供了强大的MVC设计模式支持,用于构建优雅的Web...
Spring MVC 是一个基于Java的轻量级Web应用框架,它为构建模型-视图-控制器(MVC)架构的应用程序提供了强大的支持。DWZ,全称为“Dynamic Web Zone”,是一个前端开发框架,专为中国的Web开发者设计,尤其适用于...
整个项目结构可能是这样的:ExtJS MVC负责前端交互,通过Ajax与Spring MVC控制器通信,控制器再调用Activiti引擎处理请假流程,并利用MyBatis与数据库进行数据交换。这种集成方案提供了从前端到后端的完整解决方案,...
【标题】"Spring MVC + MyBatis + DWZ" 是一个常见的企业级Web开发框架组合,主要用于构建高效、可扩展的Web应用。Spring MVC作为Spring框架的一部分,是用于处理HTTP请求和响应的强大MVC(Model-View-Controller)...
包含源码、数据库文件、演示视频、相关参考论文。 由SpringMVC+MyBatis为主要框架,前端主要由bootstrap完成。数据库交互查询用到分页。...spring+spring mvc+mybatis+JavaScript、jQuery、bootstrap4、particles.js
EasyUI与Spring MVC结合,前端页面使用EasyUI组件,通过Ajax向后端发送请求。Spring MVC的Controller接收到请求后,调用Service层处理业务,再由Service层调用MyBatis的Mapper接口操作数据库。完成后,Controller将...