今天我們說一下在實現簡單的登錄實現功能。我預想的功能很簡單，但是在實際的操作中遇到了很多問題，嘗試了很多次還是沒成，功能很好實現，但是就是沒有達到我所預想的效果，使用不同的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