您好,登錄后才能下訂單哦!
小編給大家分享一下如何使用SpringMVC+Jquery實(shí)現(xiàn)Ajax功能,希望大家閱讀完這篇文章之后都有所收獲,下面讓我們一起去探討吧!
一、什么是Ajax?
Ajax:異步的JavaScript和Json(這里XML改為了Json);
作用:用于完成網(wǎng)頁局部刷新功能(修改少量數(shù)據(jù)只用局部刷新,不用再整個(gè)網(wǎng)頁重新加載);
二、SpringMVC和Jquery的簡單介紹
SpringMVC:是基于Spring的一個(gè)子框架(MVC框架),功能強(qiáng)于Spring,這個(gè)框架主要是解決咱們Controller這一層的問題。
M:model-模型User
V:view-視圖jsp
C:Controller-控制器servlet
jQuery框架:是一個(gè)程序員使用比較多的JS框架,功能較為強(qiáng)大。
理念:寫的更少,做的更多
優(yōu)點(diǎn):1.兼容各種瀏覽器
2.操作Ajax很簡單
版本:1.x 版本兼容IE瀏覽器
2.x,3.x....及之后的不兼容IE
jQuery的更新主要有兩個(gè)路線:
路線一:1.3,1.4,1.x.........這個(gè)路線主要是堅(jiān)持于兼容IE瀏覽器
路線二:2.x,3.x.......這個(gè)路線不再兼容IE瀏覽器
兩路線并沒有版本前后的關(guān)系
三、SpringMVC的配置
1、導(dǎo)入Jar包
2、配置核心控制器web.xml
< ?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-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跟著服務(wù)器(tomcat)的啟動(dòng)而啟動(dòng) -->
< load-on-startup>1< /load-on-startup>
< /servlet>
< servlet-mapping>
< servlet-name>dispatcher< /servlet-name>
< !--使用杠(/)更加符合咱們的RESTful風(fēng)格 -->
< url-pattern>/< /url-pattern>
< /servlet-mapping>
< !-- 配置相應(yīng)的過濾器:角色SpringMVC 的POST請求的亂碼問題 -->
< !-- 配置編碼方式過濾器,注意一點(diǎn):要配置在所有過濾器的前面 -->
< filter>
< filter-name>CharacterEncodingFilter
< 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、配置 applicationContext.xml
< ?xml version="1.0" encoding="UTF-8"?>
< beans xmlns="http://www.springframework.org/schema/beans" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:context="http://www.springframework.org/schema/context" xmlns:mvc="http://www.springframework.org/schema/mvc" xsi:schemaLocation=" http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context.xsd http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc.xsd " >
< !-- 掃描包:controller所在位置 -->
< context:component-scan base-package="controller" />
< !--支持SpringMVC特有的注解 -->
< mvc:annotation-driven />
< !-- 對靜態(tài)資源放行 -->
< mvc:default-servlet-handler />
< !-- 視圖解析器:自動(dòng)為咱們添加前綴與后綴 -->
< 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.multipart.commons.CommonsMultipartResolver">
< property name="maxUploadSize">
< !-- 上傳文件大小的上限 -->
< value>2000000000< /value>
< /property>
< /bean>
< /beans>
4、Controller層注解
@Controller
@RequestMapping("/Jquery")
四、Jquery框架配置
1、導(dǎo)包(因?yàn)樵谇岸诵枰玫絁son,所以需要導(dǎo)入Json的包)
2、項(xiàng)目中引入Jquery
3、html中引入Jquery
< !-- 導(dǎo)入jquery,jquery共有兩個(gè)版本,jquery-1.11.2.js:有完整的源代碼,比較占空間,jquery-1.11.2.min.js:是壓縮版,比較節(jié)約空間 -->
< script type="text/javascript" src="/jquery/jquery-1.11.2.min.js">
五、前端代碼展示:
< !DOCTYPE html>
< html>
< head>
< meta charset="UTF-8">
< title>Insert title here< /title>
< !-- 導(dǎo)入jquery,jquery共有兩個(gè)版本,jquery-1.11.2.js:有完整的源代碼,比較占空間,jquery-1.11.2.min.js:是壓縮版,比較節(jié)約空間 -->
< script type="text/javascript" src="/jquery/jquery-1.11.2.min.js">< /script>
< script type="text/javascript">
function login(){
/**
* 提交方式一:整個(gè)表單的數(shù)據(jù)提交方式
*/
//serialize():表單序列化
var params = $("#loginForm").serialize();
//post請求,params:請求參數(shù),將數(shù)據(jù)傳到后端,function(result){}:回調(diào)函數(shù),接收后端返回的數(shù)據(jù),參數(shù)名(result)可隨便取
$.post("/Jquery/login",params,function(result){
//因?yàn)镾pringMVC框架和Jquery框架的聯(lián)合作用,使得傳回來的result保留了原有數(shù)據(jù)類型
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(){
/**
*提交方式二:一個(gè)個(gè)數(shù)據(jù)上傳的方式
*/
//以下兩句相當(dāng)于 document.getElementById("userName").value;
var userName = $("#userName").val();
var pwd = $("#pwd").val();
//寫法一:key值必須要加"";
//var params = {"userName":userName,"pwd":pwd};
//寫法二:
var params = "userName="+userName+"&pwd="+pwd;
//發(fā)送請求到后臺(tái)
//如果要傳參,直接在第二個(gè)參數(shù)中傳就可以了
$.post("/Jquery/login",params,function(result){
//因?yàn)镾pringMVC框架和Jquery框架的聯(lián)合作用,使得傳回來的result保留了原有數(shù)據(jù)類型
if(result){
window.location.href="http://www.baidu.com" rel="external nofollow" rel="external nofollow"
}else{
//完全等于document.getElementById("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" />
< input type="button" value="ajax表單提交" onclick="login()" />
< input type="button" value="ajax單獨(dú)提交" 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"),則會(huì)出現(xiàn)406錯(cuò)誤
*/
@RequestMapping("/login")
@ResponseBody//加上這個(gè)注解,return 就不會(huì)再跳轉(zhuǎn)頁面,只是返回?cái)?shù)據(jù)(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實(shí)現(xiàn)Ajax功能”有了一定的了解,如果想了解更多相關(guān)知識,歡迎關(guān)注億速云行業(yè)資訊頻道,感謝各位的閱讀!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。