1. 程式人生 > >ajax方式和springMVC資料互動

ajax方式和springMVC資料互動

使用jquery的ajax方式和後臺springmvc進行資料互動,主要部分程式碼案例作為備份。

功能主要為登入和登出,使用ajax方式和後臺互動

ajax請求方式:

<script type="text/javascript" >
$(document).ready(function() {

	//ajax登陸功能
	$("#login_button").click(function(){
			var loginName = $("#loginName").val();
			var password = $("#password").val();
			$.ajax({
				type:"get",
				cache:false,
				url:"login-login.json?loginName="+loginName+"&loginPasswd="+password,
				dataType:"json",
				success : function(msg) {
					if(msg.state == "0"){
						alert("登陸失敗");
					}else{
						window.location.reload();//重新整理當前頁面.
					}
				}
			});
	});
	//ajax使用者退出功能
	$("#logout").click(function(){
			$.ajax({
				type:"get",
				cache:false,
				url:"login-logout.json",
				dataType:"json",
				success:function(msg) {
					if(msg.state == "0"){
						alert("登出失敗");
					}else{
						window.location.reload();//重新整理當前頁面.
					}
				}
			});
	});
});

</script>

後臺controller方式:
@RequestMapping("ttjjlogin-login")
public void login(TtjjLogin ttjjLogin,ModelMap mm,HttpServletRequest request,HttpServletResponse response){
	//登入功能
	//
	//ajax使用json方式返回資料
	JSONObject js = new JSONObject();
	js.put("state", "0");
	response.getWriter().print(js.toString());
}
資料格式使用json方式。

ajax中:

type:"get",請求型別

cache:false,不使用快取 詳情檢視
url:"logout.json",請求地址 。後面也可以加入?之後新增資料。格式如下   url:"logout.json?name=132&pwd=abc",

dataType:"json", 資料型別是json

success:function(msg) {}  成功返回回撥函式 msg就是response.getWriter().print(js.toString());返回的內容,可以在回撥函式中新增自己的js操作。

其中注意ajax傳輸中中文亂碼問題。解決方式很多。請參考亂碼解決方案