`

Spring MVC + Ajax

阅读更多

利用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与Ajax结合使用,可以实现页面的异步更新,提升用户体验,同时保持服务器负载均衡。 首先,我们需要理解Spring MVC的基本工作流程。当用户发起请求时,Spring MVC的DispatcherServlet会拦截这个请求,...

    Spring + Hibernate + Spring mvc +Ajax 整合

    Spring、Hibernate、Spring MVC 和 Ajax 是四个在Java Web开发中广泛应用的技术框架,它们共同构建了一个高效、灵活且功能丰富的后端系统。以下是对这些技术及其整合应用的详细说明: Spring框架是一个全面的企业级...

    Spring mvc+Ajax用户登录增删改查功能

    **Spring MVC + Ajax 用户登录增删改查功能详解** 在Web开发中,Spring MVC和Ajax是两种非常重要的技术。Spring MVC作为Spring框架的一部分,提供了一种模型-视图-控制器的架构模式,使得开发者能够更好地组织和...

    Spring+Spring mvc+Hibernate+Bootstrap、企业级员工信息管理系统

    01. 采用后台及前台的 Spring + Spring mvc + Hibernate + Bootstrap 02. 后台全注解式的开发(除了必要的spring和hibernate的xml配置以外) 03. 后台通过自定义注解结合一个访问拦截器实现整个系统的权限控制 04...

    spring mvc+ajax 文件上传

    本示例探讨的是如何利用Spring MVC后端框架与前端的Ajax技术来实现高效的文件上传,相较于传统的表单提交方式,这种方法具有无刷新、用户体验更佳的优势。以下是关于这个主题的详细讲解。 首先,我们需要理解Spring...

    【项目原型】spring+spring mvc+mybatis+shiro+maven+bootstrap+ajax+json+分页+逆向工程

    【项目原型】spring+spring mvc+mybatis+shiro+maven+bootstrap+ajax+json+分页+逆向工程 包含现在最流行的技术框架,快速部署各种应用,加入shiro权限框架,安全,美观,你值得拥有

    spring mvc+ajax 导出导入xml文件功能实现和整理

    在本篇文档中,我们主要探讨了使用Spring MVC和Ajax技术实现导出和导入XML文件的功能。这一技术在Web开发中十分常见,用于在客户端与服务器之间传输数据,且常常用于文件操作场景。 首先,我们来看文档中提及的导入...

    Spring MVC+Spring+MyBatis+BootsStrap+Ajax+JQuery整合开发汽车销售管理平台

    项目描述 它是一个针对汽车销售有关的后台管理...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整合开发简单的员工后台管理系统

    在本项目中,"Spring+SpringMVC+Mybatis+Maven+bootstrap+ajax+jQuery整合开发简单的员工后台管理系统",我们看到一个基于Java技术栈的Web应用开发实例。这个系统利用了多个核心技术来构建一个功能完备的员工管理...

    spring mvc + ibatis + Oracle + ajax 轻量级架构搭建及详解

    在本项目中,我们探讨的是如何使用Spring MVC、iBatis、Oracle数据库以及Ajax技术构建一个轻量级的Web应用程序架构。Spring MVC是Spring框架的一部分,主要负责处理HTTP请求和控制应用程序的流程;iBatis则是一个SQL...

    Spring3MVC+ajax

    **Spring3 MVC与Ajax整合详解** 在Web应用开发中,Spring3 MVC框架和Ajax技术的结合使用能够极大地提升用户体验,实现页面的无刷新更新。本文将深入探讨如何在Spring3 MVC项目中集成Ajax,以便更好地理解这两者的...

    Spring MVC + Mybatis +Maven demo

    **Spring MVC + Mybatis + Maven 整合应用详解** 在现代Java Web开发中,Spring MVC、Mybatis和Maven是三个非常重要的工具。Spring MVC作为Spring框架的一部分,提供了强大的MVC设计模式支持,用于构建优雅的Web...

    spring mvc+dwz

    Spring MVC 是一个基于Java的轻量级Web应用框架,它为构建模型-视图-控制器(MVC)架构的应用程序提供了强大的支持。DWZ,全称为“Dynamic Web Zone”,是一个前端开发框架,专为中国的Web开发者设计,尤其适用于...

    activiti+spring mvc+maven+extjs mvc+mybatis一个简单的请假工作流

    整个项目结构可能是这样的:ExtJS MVC负责前端交互,通过Ajax与Spring MVC控制器通信,控制器再调用Activiti引擎处理请假流程,并利用MyBatis与数据库进行数据交换。这种集成方案提供了从前端到后端的完整解决方案,...

    spring mvc+my batis+dwz

    【标题】"Spring MVC + MyBatis + DWZ" 是一个常见的企业级Web开发框架组合,主要用于构建高效、可扩展的Web应用。Spring MVC作为Spring框架的一部分,是用于处理HTTP请求和响应的强大MVC(Model-View-Controller)...

    ssm(spring mvc+mybatis)+jsp开发javaWeb学生信息与选课系统

    包含源码、数据库文件、演示视频、相关参考论文。 由SpringMVC+MyBatis为主要框架,前端主要由bootstrap完成。数据库交互查询用到分页。...spring+spring mvc+mybatis+JavaScript、jQuery、bootstrap4、particles.js

    spring mvc+mybatis+easyui

    EasyUI与Spring MVC结合,前端页面使用EasyUI组件,通过Ajax向后端发送请求。Spring MVC的Controller接收到请求后,调用Service层处理业务,再由Service层调用MyBatis的Mapper接口操作数据库。完成后,Controller将...

Global site tag (gtag.js) - Google Analytics