SSM架構——Ajax向後臺傳遞數據的幾種方式

一、非Ajax傳遞參數

JSP頁面程序:

......
if(content!=null && content!=""){
	        //根據content和name查詢數據庫
	        	$.post("/user/search",{content:content, name:name}, function(json){
	        		$("#userList").datagrid('loadData',json);
	         	});
        	}
        	else{
            	$.messager.alert('提示','請輸入查詢信息!');
        	};
        }
......

後臺接收:

......
	@RequestMapping("/user/search")
	@ResponseBody
	public EUDataGridResult getUserByContent(String content,String name) {
		EUDataGridResult result = adminService.getUserByContent( content, name);
		return result;
	}
......

 

二、Ajax傳遞普通參數

1、無參數

JSP頁面程序:

......
//獲取用戶role
    	$.ajax({
    	       type : "get",
    	       url :"/user/checkRole",
    	       cache : false,
    	       contentType : false,
    	       processData : false,
    	       dataType : "json",
    	       success: function(data) {
    	    	   if(data.status !=200 ){
    	    		   $('#warehouse-add').removeAttr('onclick');
    	    		   $('#warehouse-edit').removeAttr('onclick');
    	    		   $('#warehouse-delete').removeAttr('onclick');
    	    	   };
    	       },	
    	       error:function(){
    	    	  $.messager.alert("提示","獲取用戶數據失敗");
    	       }
    	   });
......

後臺接收:

......
	//獲取用戶身份
	@RequestMapping("/user/checkRole")
	@ResponseBody
	public Warehouse checkRole(HttpServletRequest request){
		String role =(String)request.getSession().getAttribute("role");
		if (role != null){
			if(role.equals("管理員")){
				return Warehouse.build(200, role);
			}
		}
		return Warehouse.build(500, "非管理員");
	}
......

2、有參數(GET:參數附在URL中)

jsp頁面代碼:

......
$.ajax({
			       type : "get",
			       url : "/item/check?itemId="+itemId,
			       cache : false,
			       contentType : false,
			       processData : false,
			       dataType : "json",
			       success: function(data) {
			    	$('#orderObjname').textbox('setValue',"");
			    	$('#orderobjbarcode').textbox('setValue',"");
			    	$('#orderforWH').combobox('setValue',"");
			    	$('#orderObjname').textbox('setValue',data.title);
			    	$('#orderobjbarcode').textbox('setValue',data.barcode);
			    	$('#orderforWH').combobox('setValue',data.warehouseid);
			       },	
			       error:function(){
			    	  $.messager.alert("提示","庫中無ID爲"+itemId+"的貨物!");
			       }
			   });
......

後臺需用到“@RequestParam”,接收代碼:

......
	@RequestMapping("/item/check")
	@ResponseBody
	public TbItem getItemById(@RequestParam String itemId) {
		long id = Long.parseLong(itemId);
		TbItem result = itemService.getItemById(id);
		return result;
	}
......

3、有參數(POST:參數附在Ajax屬性中)

JSP頁面程序:

......
var ackPassword = $('#ackPassword').val();
	$.ajax({
		url :"/person/identify/password",
		type : "post",
		data : {password : ackPassword},
		dataType:"json",
        contentType : "application/x-www-form-urlencoded; charset=UTF-8", 
		success : function(data){
			if(data.status == 200){
				$("#passwordEditACKWindow").window({
			  	}).window("close");
				$("#passwordEditWindow").window({
			  	}).window("open");
			}
			else $.messager.alert('提示',data.msg);
		},
		error : function(e){
			$.messager.alert('提示','密碼更新失敗!');
		},
	});
......

後臺接收:

......
	//用戶修改密碼,原密碼確認
	@RequestMapping("/person/identify/password")
	@ResponseBody
	public Warehouse identifyPassword(HttpServletRequest request,String password){
		HttpSession session = request.getSession();
		String username = (String)session.getAttribute("username");
		TbUser user = adminService.getUserByName(username);
		if (password.equals(user.getPassword())) {
			return Warehouse.build(200, "原密碼正確!");
		}
		return Warehouse.build(400,"原密碼不正確,請重新輸入!");
	}
......

三、Ajax傳遞Json參數

1、直接以實體類對象接收

JSP頁面程序:

......
var order = {
			orderId : $("#orderId").val(),
			paymentType :  $("input[name='orderType']:checked").val(),
			objectId :  $("#orderObjid").val(),
			operObject :  $("#orderObjname").val(),
			barcode :  $("#orderobjbarcode").val(),
			objNum :  $("#orderobjnum").val(),
			source :  $("input[name='ordersource']:checked").val(),
			warehouseid :  $('#orderforWH').combobox('getValue'),
			warehousename :  $('#orderforWH').combobox('getText'),
			userId :  $("#orderoperid").val(),
			opername :  $("#orderopername").val(),
			orderDesc :  $("#orderdesc").val(),
		};
		//新增訂單記錄
		$.ajax({
			url :"/order/add",
    		type : "post",
    		data : order,
    		dataType:"json",
            contentType : "application/x-www-form-urlencoded; charset=UTF-8", 
    		success : function(data){
    			$.messager.alert('提示','成功登記新訂單,可到“訂單列表”查看訂單信息!');
    			clearForm();
    		},
    		error : function(e){
    			$.messager.alert('提示','表單填寫錯誤,訂單登記失敗!');
    		},
		});
......

後臺接收程序:

......
	@RequestMapping("/order/add")
	@ResponseBody
	public Warehouse addOrder(TbOrder order) {
		Warehouse result = orderService.addOrder(order);
		return result;
	}
......

2、以註解“@RequestBody”接收

JSP頁面程序:

......
var user = {
    			username : $("#add-username").val(),
    			password : $("#add-userpassword").val(),
    			roleid : $("input[name='add-role']:checked").val(),
    			name : $("#add-name").val(),
    			phone : $("#add-userphone").val(),
    			email : $("#add-useremail").val(),
    	};
    	$.ajax({
    		url :"/user/update/add",
    		type : "post",
    		data : JSON.stringify(user),
    		dataType:"json",
            contentType : "application/json; charset=utf-8", 
    		success : function(data){
    			if(data.status ==200 ){
	    			$("#userAddWindow").window({
	    	      	}).window("close");
	    			$("#userList").datagrid("reload");
	    			$.messager.alert('提示',data.msg);
		    	}
    			else 
    				$.messager.alert('提示',data.msg);
    		},
    		error : function(e){
    			$.messager.alert('提示','添加用戶失敗!');
    		},
    	});
......

後臺接收程序:

......
	@RequestMapping("/user/update/add")
	@ResponseBody
	public Warehouse AddUser(@RequestBody TbUser user){
		if ((!user.getUsername().equals("")) && (!user.getPassword().equals("")) && (!user.getRoleid().equals("")) && (!user.getName().equals("")) && (!user.getPhone().equals(""))) {
			TbUser user2 = adminService.getUserByName(user.getUsername());
			if (user2 == null) {//若用戶名不重複
				Warehouse result = adminService.addUser(user);
				return result;
			}
			else
				return Warehouse.build(400, "該用戶名已存在!");
		}
		return Warehouse.build(400, "請填寫完整信息!");
	}
......

關於“@RequestBody ”:

1、Ajax的contentType屬性值通常有三種,默認取第一種:

  • application/x-www-form-urlcoded
  • application/json
  • application/xml

      @requestBody註解常用來處理contentType非默認的編碼情況,即另外兩種取值:application/jsonapplication/xml。(除了常見的json、XML,還可以指定 html、jsonp、script或者text)一般情況下,常用其來處理application/json類型,這個時候,@RequestBody接收的是一個json格式的字符串。

2、通過@requestBody可以將請求體中的JSON字符串綁定到相應的bean上,當然,也可以將其分別綁定到對應的字符串上。

這種情況是將JSON字符串中的變量的值分別賦給了bean上的字符串,但是,假如我有一個User類,擁有如下字段:

String userName;

String pwd;

那麼接收函數的參數可以改爲以下形式:@requestBody User user ,這種形式會將JSON字符串中的值賦予user中對應的屬性上。

注:

1、JSON字符串中的key必須對應user中的屬性名,json中值的數據類型需要與屬性值的數據類型一致,否則是請求不過去的。

總結:

2、不要將JSON字符串和JSON對象混淆。

      Json字符串:user_str = '{"name":"張三","password":"123456"}'

      Json對象:user_obj = {"name":"張三","password":"123456"}

A、Json字符串轉換爲Json對象:

      Jobj = JSON.parse(user_str)

      Jobj =   user_str.parseJSON()

B、JSON對象轉換爲字符串形式:

      Jstr = user_obj.toJSONString()

      Jstr = JSON.stringify(user_obj)

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