SpringMVC+Jquery实现Ajax功能
⼀、什么是Ajax?
Ajax：异步的JavaScript和Json（这⾥XML改为了Json)；
作⽤：⽤于完成⽹页局部刷新功能（修改少量数据只⽤局部刷新，不⽤再整个⽹页重新加载）；
⼆、SpringMVC和Jquery的简单介绍
SpringMVC：是基于Spring的⼀个⼦框架(MVC框架)，功能强于Spring，这个框架主要是解决咱们Controller这⼀层的问题。M：model-模型User
V：view-视图jsp
C：Controller-控制器servlet
jQuery框架：是⼀个程序员使⽤⽐较多的JS框架，功能较为强⼤。
理念：写的更少，做的更多
优点：1.兼容各种浏览器
2.操作Ajax很简单
版本：1.x 版本兼容IE浏览器
2.x，
<及之后的不兼容IE
jQuery的更新主要有两个路线：
路线⼀：1.3,1.这个路线主要是坚持于兼容IE浏览器
路线⼆：2.x，这个路线不再兼容IE浏览器
两路线并没有版本前后的关系
三、SpringMVC的配置
1、导⼊Jar包
2、配置核⼼控制器l
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="/2001/XMLSchema-instance"
xmlns="/xml/ns/javaee"
xsi:schemaLocation="/xml/ns/javaee /xml/ns/javaee/web-app_3_1.xsd" id="WebApp_ID" version="3.1">
<!-- 核⼼控制器 -->
<servlet>
<servlet-name>dispatcher</servlet-name>
<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
<init-param>
<!-- SpringMVC的配置⽂件的位置 -->
<param-name>contextConfigLocation</param-name>
<param-value>l</param-value>
</init-param>
<!--即SpringMVC跟着服务器(tomcat)的启动⽽启动 -->
<load-on-startup>1</load-on-startup>
</servlet>
jquery源码在线<servlet-mapping>
<servlet-name>dispatcher</servlet-name>
<!--使⽤杠（/）更加符合咱们的RESTful风格 -->
<url-pattern>/</url-pattern>
</servlet-mapping>
<!-- 配置相应的过滤器:⾓⾊SpringMVC 的POST请求的乱码问题 -->
<!-- 配置编码⽅式过滤器，注意⼀点：要配置在所有过滤器的前⾯ -->
<filter>
<filter-name>CharacterEncodingFilter</filter-name>
<filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
<init-param>
<param-name>encoding</param-name>
<param-value>utf-8</param-value>
</init-param>
</filter>
<filter-mapping>
<filter-name>CharacterEncodingFilter</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
</web-app>
3、配置 l
<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="/schema/beans"
xmlns:xsi="/2001/XMLSchema-instance"
xmlns:context="/schema/context"
xmlns:mvc="/schema/mvc"
xsi:schemaLocation="
/schema/beans
/schema/beans/spring-beans.xsd
/schema/context
/schema/context/spring-context.xsd
/schema/mvc
/schema/mvc/spring-mvc.xsd
" >
<!-- 扫描包:controller所在位置 -->
<context:component-scan base-package="controller" />
<!--⽀持SpringMVC特有的注解 -->
<mvc:annotation-driven />
<!-- 对静态资源放⾏ -->
<mvc:default-servlet-handler />
<!-- 视图解析器：⾃动为咱们添加前缀与后缀 -->
<bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
<property name="prefix" value="/WEB-INF/views/" />
<property name="suffix" value=".jsp" />
</bean>
<!-- 上传解析器 -->
<bean id="multipartResolver"
class="org.springframework.web.multipartmons.CommonsMultipartResolver">
<property name="maxUploadSize">
<!-- 上传⽂件⼤⼩的上限 -->
<value>2000000000</value>
</property>
</bean>
</beans>
4、Controller层注解
@Controller
@RequestMapping("/Jquery")
四、Jquery框架配置
1、导包（因为在前端需要⽤到Json，所以需要导⼊Json的包）
2、项⽬中引⼊Jquery
3、html中引⼊Jquery
<!-- 导⼊jquery,jquery共有两个版本，jquery-1.11.2.js：有完整的源代码，⽐较占空间，jquery-1.11.2.min.js：是压缩版，⽐较节约空间 --> <script type="text/javascript" src="/jquery/jquery-1.11.2.min.js"></script>
五、前端代码展⽰：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 导⼊jquery,jquery共有两个版本，jquery-1.11.2.js：有完整的源代码，⽐较占空间，jquery-1.11.2.min.js：是压缩版，⽐较节约空间 --> <script type="text/javascript" src="/jquery/jquery-1.11.2.min.js"></script>
<script type="text/javascript">
function login(){
/**
* 提交⽅式⼀：整个表单的数据提交⽅式
*/
//serialize()：表单序列化
var params = $("#loginForm").serialize();
//post请求，params：请求参数，将数据传到后端，function(result){}：回调函数，接收后端返回的数
据，参数名（result）可随便取
$.post("/Jquery/login",params,function(result){
//因为SpringMVC框架和Jquery框架的联合作⽤，使得传回来的result保留了原有数据类型
if(result){//登录成功
window.location.href="www.baidu" rel="external nofollow" rel="external nofollow" ;
}else{
//完全等于 ElementById("erSpan").innerHTML = result+":"+"登录失败！";
$("#erSpan").html(result+":"+"登录失败！");
}
})
}
function login2(){
/**
*提交⽅式⼆：⼀个个数据上传的⽅式
*/
//以下两句相当于 ElementById("userName").value;
var userName = $("#userName").val();
var pwd = $("#pwd").val();
//写法⼀：key值必须要加"";
//var params = {"userName":userName,"pwd":pwd};
//写法⼆：
var params = "userName="+userName+"&pwd="+pwd;
/
/发送请求到后台
//如果要传参，直接在第⼆个参数中传就可以了
$.post("/Jquery/login",params,function(result){
//因为SpringMVC框架和Jquery框架的联合作⽤，使得传回来的result保留了原有数据类型
if(result){
window.location.href="www.baidu" rel="external nofollow" rel="external nofollow"
}else{
//完全等于ElementById("erSpan").innerHTML = result+":"+"登录失败！";
$("#erSpan").html(result+":"+"登录失败！");
}
})
}
</script>
</head>
<body>
<span id="erSpan"></span>
<form id="loginForm" action="/Jquery/login" method="post">
⽤户名：<input type="text" name="userName" id="userName" /> <br />
密码<input type="text" name="pwd" id="pwd" /><br />
<input type="button" value="ajax表单提交" onclick="login()" />
<input type="button" value="ajax单独提交" onclick="login2()" />
</form>
</body>
</html>
六、Controller层代码展⽰：
package controller;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
@Controller
@RequestMapping("/Jquery")
public class JqueryController {
/*
* 注意：如果在浏览器上访问login.html的路径为：IP：端⼝号/login.html,⽽这⾥访问login⽅法的路径直接为：
/login，前⾯没有任何路径，如@RequestMapping("/Jquery")，则会出现406错误
*/
@RequestMapping("/login")
@ResponseBody//加上这个注解，return 就不会再跳转页⾯，只是返回数据（json）
public Boolean login(String userName,String pwd){
System.out.println(userName+":"+pwd);
if("流星".equals(userName) && "456".equals(pwd)){
return true;
}
return false;
}
}
总结
以上所述是⼩编给⼤家介绍的SpringMVC+Jquery实现Ajax功能 ，希望对⼤家有所帮助，如果⼤家有任何疑问请给我留⾔，⼩编会及时回复⼤家的。在此也⾮常感谢⼤家对⽹站的⽀持！
如果你觉得本⽂对你有帮助，欢迎转载，烦请注明出处，谢谢！
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论