今天我們說一下在實現簡單的登錄實現功能。我預想的功能很簡單，但是在實際的操作中遇到了很多問題，嘗試了很多次還是沒成，功能很好實現，但是就是沒有達到我所預想的效果，使用不同的juery事件，但是沒有達到跳轉，稍后會說一下。這里會涉及到一些JavaScript語言。以前還做過一段時間的前端，現在一直做后臺服務，現在有點手生了。

好了廢話不說了，先說下我想要實現的效果：

1、登錄界面，form表單，點擊登錄后，后臺返回數據如果成功則直接跳轉到相應的頁面，如果后臺驗證失敗，那么添加提示到頁面，并且顯示醒目標記為紅色。

???? 效果是：

如果有錯誤信息，就要讓錯誤信息按如圖顯示；

心路歷程：：：：：

首先我們編輯實現頁面，添加form表，然后點擊登錄按鈕實現發送請求，這時，我想到的是兩個方法；

1、使用form表格的action 功能submit();

2、點擊按鈕發送ajax請求，自己編輯請求信息。

一開始我使用的ajax的請求，并發送一個json格式的數據，如下：

var name=$("input[name='logname']").val();----獲取姓名 console.log(name); var pass=$("input[name='logpass']").val();----獲取密碼 var datas={"name":name,"pass":pass } console.log(pass); $.ajax( { url: "<%=path%>/login.do",type: "POST",data:datas,dataType:"json",----數據類型是json格式timeout: 1000,success: function (data, status) {console.log(data);},error: function (err, status) {console.log(err);} });這樣當我發送請求的時候，在后臺的處理原先是這樣的：

當我如果是正確的時候，卻無法跳轉。頁面沒有任何效果，我用頁面解釋器，對js打斷點debug,發現返回的data確實整個index.jsp的內容。但是就是不跳轉。后臺我用

$(document).write(data)；頁面時顯示了我想要的效果，貌似是跳轉過去了，但是當去點擊index頁面的一些按鈕的時候，卻沒有響應。這時候才明白，write(),只是將index頁面的HTML元素渲染上了，但是并沒有將里面的資源加載進來，相當于直接是拼接上的，并不是跳轉加載過去的。所以就很納悶。

又以為是前端不能使用ajax請求，應該直接請求觸發一下，后臺跳轉，沒必要返回data處理，可不可以是用$.post或者$.get()等方法，后來測試還是不行。最后使用submit();

之后可以實現跳轉，submit觸發有兩種方法：

1、$("form").submit();觸發過濾的form表單提交 ---我這里用的是<a>/<button> 標簽做了一個onclick屬性事件=login()的js函數處理

2、直接在form表單里使用<input? type="submit"/> 這樣js就不用寫了

------------------------------------------------------------------------------------可以實現正常跳轉了--------------------------------------------------------------------------------------------------------------

但是問題又來了，我想如果名稱或密碼錯誤，返回失敗，應該在頁面上有提示，彈框提示或者頁面輸入框下側顯示。這樣我必然想要使用juery的ajax請求，請求成功success之后將獲取到的data，解析并處理。但是，卻又實現不了跳轉，所以我就又把苗頭放到了后臺，是不是后臺返回的數據方式不對。然后我就改成了一下方式：

原先是一個簡單的字符串，導致前臺怎么都獲取不到返回的數據，在頁面的解析器里（F12）查看請求響應，可以看到返回了這個字符串，但是我們的js怎么都獲取不到，甚至使用ajax返回的都是error。走的是error的回調函數。后來查出來了是-----------我們發送請求要求的格式是json，我們在返回響應的時候，也設置了內容類型是json，所以必須將格式字符串為json格式，否則即接收不到返回消息也沒任何報錯，很尷尬的，

但是ajax這種，如果成功的話，我們有不能實現跳轉，所以不能用ajax這用請求，只能用submit方式，

所以我們只能修改后臺方式，還是按return modelAndView(“view”，“模型名”，“模型數據”)\return ModelAndView("view","Model")；

首先可以實現跳轉，返回的數據放到模型中，在JSP頁面時用${message}等方式取到。

一開始我用js來控制，將獲取到的數據放到相應的位置：如：

當密碼錯誤時在返回登錄界面，會從新加載頁面，上面代碼就會執行，但是報錯了，我打開頁面解析器看到：

點擊沒有任何反應，控制面板報錯，source面板里面標識的這個出現這個問題，。我們解釋下，點擊沒有反應是下面面板的js有問題，因為我們返回的并不是一個對象，我們返回的是字符串，${message} 如果沒有值，那么就直接是上面的樣子，如果有值，將會是var b=密碼錯?? 這樣不是對象，如果是一個字符串對象，應該有一個雙引號，但是沒有，這說明不對，如果我們返回的是一個json字符串，那么就不會有這個問題了，我們也能取到，但是問題又來了，但我們第一次加載登錄界面的時候，$(message)是一定沒有值得，那咋辦。也許我們可以傳一個空的json串，但是必須是json格式，但是我們這個項目設置首頁時并無法添加空的json字符串，所以這個就不行。

------------------------------------------------------------------------------------------------------------------------------------------

最后我們還是用到了在前面文章中說到的，如何在JSP頁面中應用Model中的數據。用這種格式，如果沒有那么直接就是空字符串，如果有，那么直接取值，雖然同樣是$(message)但是，用的地方不一樣。

這時就實現登錄跳轉和錯誤信息返回；

我相信還有其他方式處理，我這里只不過是一種，但是這個過程中我遇到的問題，通過解決問題，也理解了很多，以前只會用，有時候也不一定理解。

1、ajax請求時我們需要根據請求數據類型來設定響應數據類型，如果是json，那么返回數據就必須是json格式，因為在返回的時候，ajax請求獲取到響應后，會做預先的處理將數據轉換成預先設定的類型格式，這時如果不是json格式，肯定報錯，或出問題。

2、如果是用${key}在js中。必須保證${key}有值，那怕是一個空的對象值也行。要不然整個js頁面都會報錯。

3、form表單一般使用submit()，登錄的時候使用，也可以使用ajax請求，但是ajax無法實現跳轉，他只會將數據放到data中。（這里哪位大佬有辦法或者案例請指點一二）

4、還是要多復習點juery、JavaScript、的知識，css樣式需要知道點，這里用到了，感覺特別生澀，不過我的重點不是在css.

jueryAPI地址：http://jquery.cuishifeng.cn/index.html

總結

以上是生活随笔為你收集整理的SpringMVC添加登录页面以及首页实现跳转的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。