Spring MVC框架中使用AJAX

依賴jar包

fastjson

非複雜數據類型的處理(用戶名是否存在驗證):

Controller編寫處理方法:

	/**
	 * AJAX判斷用戶名是否存在
	 * @param userCode
	 * @return
	 */
	@RequestMapping(value="userCodeExit",method=RequestMethod.GET)
	@ResponseBody//將此方法的返回結果直接寫入HTTP ResponseBody(Response對象的body數據區)中,也就是響應流中
	public Object userCodeExit(@RequestParam String userCode){
		HashMap<String, String> result=new HashMap<String, String>();
		if(StringUtils.isNullOrEmpty(userCode)){
			result.put("userCode", "exist");
		}else{
			try {
				if(userService.findUserByUserCodePassword(userCode, null)!=null){
					result.put("userCode", "exist");
				}else{
					result.put("userCode", "noexist");
				}
			} catch (Exception e) {
				e.printStackTrace();
			}
		}
		return JSONArray.toJSONString(result);
	}

js編寫:

	/*
	 * 驗證
	 * 失焦\獲焦
	 * jquery的方法傳遞
	 */
	userCode.bind("blur",function(){
		//ajax後臺驗證--userCode是否已存在
		//user.do?method=ucexist&userCode=**
		$.ajax({
			type:"GET",//請求類型
			url:path+"/userController/userCodeExit",//請求的url
			data:{userCode:userCode.val()},//請求參數
			dataType:"json",//ajax接口(請求url)返回的數據類型
			success:function(data){//data:返回數據(json對象)
				if(data.userCode == "exist"){//賬號已存在,錯誤提示
					validateTip(userCode.next(),{"color":"red"},imgNo+ " 該用戶賬號已存在",false);
				}else{//賬號可用,正確提示
					validateTip(userCode.next(),{"color":"green"},imgYes+" 該賬號可以使用",true);
				}
			},
			error:function(data){//當訪問時候,404,500 等非200的錯誤狀態碼
				validateTip(userCode.next(),{"color":"red"},imgNo+" 您訪問的頁面不存在",false);
			}
		});
		
		
	}).bind("focus",function(){
		//顯示友情提示
		validateTip(userCode.next(),{"color":"#666666"},"* 用戶編碼是您登錄系統的賬號",false);
	}).focus();
	
	userName.bind("focus",function(){
		validateTip(userName.next(),{"color":"#666666"},"* 用戶名長度必須是大於1小於10的字符",false);
	}).bind("blur",function(){
		if(userName.val() != null && userName.val().length > 1
				&& userName.val().length < 10){
			validateTip(userName.next(),{"color":"green"},imgYes,true);
		}else{
			validateTip(userName.next(),{"color":"red"},imgNo+" 用戶名輸入的不符合規範,請重新輸入",false);
		}
		
	});


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章