1. 程式人生 > >前後端資料互動之前端傳值到後臺

前後端資料互動之前端傳值到後臺

在實際的專案開發中,經常要求前後端傳值。今天,主要介紹前端向後臺傳值的幾種方法。

第一種:ajax

傳給後臺的資料通過json封裝起來,再用ajax將json傳到後臺,需要新增jquery庫

window.onload = function(){
			//生成json
			var json = [];
			//實際情況中,json物件的值可通過document.getElementByName()來獲取使用者輸入
			for (var i = 1; i < 5; i++){
				var j = {};
				j.name = "name";
				j.cars = "22";
				j.obj = i;
				json.push(j);
			}
			var a = JSON.stringify(json);
			alert(a);//json
			
			//傳遞到後臺
			$.ajax({
				type:'POST',
				data:a,//json
				contentType = 'application/json',
				dataType:'json',
				url:'user/saveJsonUser.do',
				success:function(data){
					alert("傳送成功");
				},
				error:function(e){
					alert("傳送失敗");
				}
			});
		}

2、通過form表單的action傳值

一般情況下數值在傳給後臺之前需要校驗,可以在form中的onsubmit呼叫js方法進行校驗,當js方法返回值為true時,觸發action,當js方法返回值為false時,action不觸發。這樣處理的好處在於當用戶輸入不正確時,不會重新整理頁面,表單仍然會保留使用者之前的輸入

3、通過dom獲取標籤,觸發標籤的submit方法,直接提交資料到後臺

function query(){
			var inputs = document.getElementsByName("sex");
			for(var i = 0; i < inputs.length; i++){
				if(inputs[i].checked){
					//判斷是否選中
					var sex = inputs[i].value;
					document.getElementById("query").action = projectName+"query.do?currentPage=1&stsex="+sex;
					break;
				} else{
					document.getElementById("query").action = projectName+"query.do?currentPage=1";
				}
			}
			document.getElementById("query").submit();
		}

以上!