Content

SpringMVC+Jquery实现Ajax功能(springmvc框架)干货分享

文章摘要

这篇文章介绍了使用SpringMVC框架的SpringMVC核心控制器配置和使用,结合JQuery技术实现表单提交功能。文章详细说明了如何在SpringMVC核心控制器中配置编码过滤器以解决乱码问题,并展示了通过DispatcherServlet处理POST请求以及通过JQuery实现表单的AJAX提交。文章还描述了两种表单提交方式:一种是通过DispatcherServlet处理,另一种是通过直接点击按钮提交,展示了前后端数据的交互过程。

 <?xml version=”1.0″ encoding=”UTF-8″?> <web-app xmlns:xsi=”http://www.w3.org/2001/XMLSchema-instance” xmlns=”http://xmlns.jcp.org/xml/ns/javaee” xsi:schemaLocation=”http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/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>classpath:applicationContext-mvc.xml</param-value> </init-param> <!–即SpringMVC跟着服务器(tomcat)的启动而启动 –> <load-on-startup>1</load-on-startup> </servlet> <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> //serialize():表单序列化 var params=$(“#loginForm”).serialize(); //post请求,params:请求参数,将数据传到后端,function(result){}:回调函数,接收后端返回的数据,参数名(result)可随便取      $.post(“/Jquery/login”,params,function(result){ //因为SpringMVC框架和Jquery框架的联合作用,使得传回来的result保留了原有数据类型 if(result){//登录成功 window.location.href=”http://www.baidu.com” rel=”external nofollow” rel=”external nofollow” ; }else{ //完全等于 document.getElementById(“erSpan”).innerHTML=result+”:”+”登录失败!”; $(“#erSpan”).html(result+”:”+”登录失败!”); } }) } function login2(){ //以下两句相当于 document.getElementById(“userName”).value; var userName=$(“#userName”).val(); var pwd=$(“#pwd”).val(); //写法一:key值必须要加””; //var params= </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>