springMVC与jquery结合使用完整例子

最新推荐文章于 2024-05-01 22:10:31 发布

cpf2016

最新推荐文章于 2024-05-01 22:10:31 发布

阅读量3.1k

点赞数

分类专栏： springMVC 文章标签： java javascript 测试 ViewUI

springMVC 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1.依赖

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
	<modelVersion>4.0.0</modelVersion>
	<groupId>com.mycompany.app</groupId>
	<artifactId>my-mvc</artifactId>
	<packaging>war</packaging>
	<version>1.0-SNAPSHOT</version>
	<name>my-mvc Maven Webapp</name>
	<url>http://maven.apache.org</url>

	<properties>
		<spring-version>3.2.13.RELEASE</spring-version>
		<org.slf4j-version>1.7.7</org.slf4j-version>
	</properties>

	<dependencies>
		<dependency>
			<groupId>junit</groupId>
			<artifactId>junit</artifactId>
			<version>4.10</version>
			<scope>test</scope>
		</dependency>

		<dependency>
			<groupId>org.springframework</groupId>
			<artifactId>spring-context</artifactId>
			<version>${spring-version}</version>
		</dependency>
		<dependency>
			<groupId>org.springframework</groupId>
			<artifactId>spring-core</artifactId>
			<version>${spring-version}</version>
		</dependency>
		<dependency>
			<groupId>org.springframework</groupId>
			<artifactId>spring-context-support</artifactId>
			<version>${spring-version}</version>
		</dependency>
		<dependency>
			<groupId>org.springframework</groupId>
			<artifactId>spring-aop</artifactId>
			<version>${spring-version}</version>
		</dependency>
		<dependency>
			<groupId>org.springframework</groupId>
			<artifactId>spring-tx</artifactId>
			<version>${spring-version}</version>
		</dependency>
		<!-- <dependency> <groupId>org.springframework</groupId> <artifactId>spring-asm</artifactId> 
			<version>${spring-version}</version> </dependency> -->

		<dependency>
			<groupId>org.springframework</groupId>
			<artifactId>spring-beans</artifactId>
			<version>${spring-version}</version>
		</dependency>
		<!-- end spring 核心依赖包 -->


		<!-- start spring mvc -->
		<dependency>
			<groupId>org.springframework</groupId>
			<artifactId>spring-web</artifactId>
			<version>${spring-version}</version>
		</dependency>
		<dependency>
			<groupId>org.springframework</groupId>
			<artifactId>spring-webmvc</artifactId>
			<version>${spring-version}</version>
		</dependency>

		<dependency>
			<groupId>javax.servlet</groupId>
			<artifactId>jstl</artifactId>
			<version>1.2</version>
		</dependency>

		<!-- START SERVLET -->
		<dependency>
			<groupId>javax.servlet</groupId>
			<artifactId>servlet-api</artifactId>
			<version>2.5</version>
			<scope>provided</scope>
		</dependency>
		<dependency>
			<groupId>javax.servlet.jsp</groupId>
			<artifactId>jsp-api</artifactId>
			<version>2.1</version>
			<scope>provided</scope>
		</dependency>

		<dependency>
			<groupId>org.codehaus.jackson</groupId>
			<artifactId>jackson-core-lgpl</artifactId>
			<version>1.9.13</version>
		</dependency>

		<dependency>
			<groupId>org.codehaus.jackson</groupId>
			<artifactId>jackson-mapper-lgpl</artifactId>
			<version>1.9.13</version>
		</dependency>
	</dependencies>
	<build>
		<finalName>my-mvc</finalName>
		<plugins>
			<plugin>
				<groupId>org.mortbay.jetty</groupId>
				<artifactId>maven-jetty-plugin</artifactId>
			</plugin>
			<plugin>
				<artifactId>maven-war-plugin</artifactId>
				<version>2.1-alpha-1</version>
				<executions>
					<execution>
						<id>default-war</id>
						<phase>package</phase>
						<goals>
							<goal>war</goal>
						</goals>
					</execution>
				</executions>
			</plugin>
		</plugins>
	</build>
</project>

注意：上面必须添加jackson框架的依赖，否则springmvc就无法解析json，会报406错误

2.配置文件

（1）web.xml

<?xml version="1.0" encoding="UTF-8"?> 
<web-app version="3.0" xmlns="http://java.sun.com/xml/ns/javaee"  
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"  
    xsi:schemaLocation="http://java.sun.com/xml/ns/javaee   
    http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd">  
    <display-name></display-name>  
    <welcome-file-list>  
        <welcome-file>index.jsp</welcome-file>  
    </welcome-file-list>  
      
    <!-- 核心控制器 -->  
    <servlet>  
        <servlet-name>my</servlet-name>  
        <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>  
        <load-on-startup>1</load-on-startup>  
    </servlet>  
      
    <servlet-mapping>  
        <servlet-name>my</servlet-name>  
        <url-pattern>*.do</url-pattern>  
    </servlet-mapping> 
  
</web-app>

（2）springMVC配置文件my-servlet.xml

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans" 
	   xmlns:aop="http://www.springframework.org/schema/aop" 
	   xmlns:context="http://www.springframework.org/schema/context"
	   xmlns:mvc="http://www.springframework.org/schema/mvc" 
	   xmlns:tx="http://www.springframework.org/schema/tx" 
	   xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	   xsi:schemaLocation="http://www.springframework.org/schema/aop 
		http://www.springframework.org/schema/aop/spring-aop-3.0.xsd 
		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 
		http://www.springframework.org/schema/mvc 
		http://www.springframework.org/schema/mvc/spring-mvc-3.0.xsd 
		http://www.springframework.org/schema/tx 
		http://www.springframework.org/schema/tx/spring-tx-3.0.xsd">

	<!-- 声明mvc注解驱动 -->
	<mvc:annotation-driven />
	<!-- 扫描bean -->
	<context:component-scan base-package="my.mvn.*" />
	
	<bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
	    <!-- 前缀，这里写了ModelAndView就不用写全路径了 -->
		<property name="prefix" value="/view/" />
	    <!-- 后缀，这里写了ModelAndView就不用写view的类型了 -->
		<property name="suffix" value=".html" />
	</bean>

</beans>

3.Get方式

（1）Controller

package my.mvn.controller;



import java.text.SimpleDateFormat;
import java.util.ArrayList;
import java.util.Date;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import org.springframework.beans.propertyeditors.CustomDateEditor;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.ServletRequestDataBinder;
import org.springframework.web.bind.annotation.InitBinder;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;

@Controller
public class HelloWorldController 
{
	@RequestMapping(value="/ajax.do" ,method=RequestMethod.GET)
	@ResponseBody
	public Map<String, Object> say(Model model)
	{

		List<String> list = new ArrayList<String>();
		list.add("test");
		list.add("jquery");
	        Map<String, Object> modelMap = new HashMap<String, Object>(3);  
	        modelMap.put("total", "3");  
	        modelMap.put("data", list);  
	        modelMap.put("success", "true");  
	        return modelMap;  

	}
	@RequestMapping(value="/cpf.do")
	public String yemian(Model model)
	{
		System.out.println("enter");
		model.addAttribute("username", "lucy");
		
		return "cpf";
	}
}

（2）页面

<html>
<head>  
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<script type="text/javascript" src="js/jquery-2.1.4.min.js">
</script>
<script>
$().ready(function(){
  $("#btn-get").click(function(){
    jQuery.ajax({
		type:'GET',
		contentType:'application/json',
		url:'/my-mvc/ajax.do',
		dataType:'json',
		success:function(data)
		{
			if(data && data.success=="true")
			{
				$("#test-ajax").val(data.total);
				var str =""; 
				$.each(data.data,function(i,e)
						{
							str = str+e;
						});
				alert(str);
			}
		},
		error:function()
		{
			alert("eror");
		}
	});
  }); 
});
</script>
</head>
<body>
<input type="text" name="birthday" id="test-ajax"><br/>
<input type="submit" value="submit" id="btn-get">
</body>
</html>

4.Post方式

（1）Controller

package my.mvn.controller;



import java.text.SimpleDateFormat;
import java.util.ArrayList;
import java.util.Date;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import org.springframework.beans.propertyeditors.CustomDateEditor;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.ServletRequestDataBinder;
import org.springframework.web.bind.annotation.InitBinder;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;

@Controller
public class HelloWorldController 
{	
    @RequestMapping(value = "/ajax_post.do", method = RequestMethod.POST)  
    public @ResponseBody  
    User login(@RequestBody User user) {  
        return user;  
    }  
	
    @RequestMapping(value="/cpf.do")
    public String yemian(Model model)
    {
	System.out.println("enter");
	model.addAttribute("username", "lucy");
	
	return "cpf";
     }
	
}

（2）页面

<html>
<head>  
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<script type="text/javascript" src="js/jquery-2.1.4.min.js">
</script>
<script>
$().ready(function(){
  $("#btn-post").click(function()
  {
	  var mydata = '{"username":"' + $('#username').val() + '","password":"'+ $('#password').val() + '"}';  
	  alert(mydata);  
	  $.ajax(
		{  
  			type : 'POST',  
  			contentType : 'application/json',  
  			url : '/my-mvc/ajax_post.do',  
  			processData : false,  
  			dataType : 'json',  
  			data : mydata,  
  			success : function(data) 
  			{  
      			alert("username: " + data.username + "\npassword: " + data.password);  
  			},  
  			error : function() 
  			{  
      			alert('Err...');  
  			}  
	 	});  
  }); 
});
</script>
</head>
<body>
<input type="text" name="username" id="username"><br/>
<input type="text" name="password" id="password"><br/>
<!-- <input type="submit" value="submit" id="btn-get"> -->
<input type="submit" value="submit" id="btn-post">
</body>
</html>

测试：

另：项目结构为：

cpf2016

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
springMVC与jquery结合使用完整例子

1.依赖<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0
复制链接

扫一扫