後端給前端傳送資訊的格式

前端只能接收json物件型別的資料，使用之前先匯入阿里巴巴的json的jar包。名字如下圖所示，去白百度下載會即可。 阿里巴巴的jar包能把所有型別的資料轉換成json物件，但是前端如果想要顯示資料，只能接收陣列型別的資料。這裡我們把資料放在hashmap中，以鍵值對的形式儲存資料。然後把hashmap放在arraylist中，下面是我判斷登入的資訊的程式碼。

   String msg ="驗證碼不正確";
        String c ="";
        //處理資料
        ArrayList<HashMap<String,String>> list = new ArrayList();
        HashMap<String,String> map = new HashMap();
        //查詢資料庫裡面的資料跟前端傳送過來的資料是否相同
        User us= new UserImp().queryUser(username);
        //System.out.println(us);
        //登入不成功
        if(us==null){
            c="1002";
             msg="賬號不存在";
        }
        if(us!=null){
            if(!us.getPassWord().equals(password)){
                c="1003";
                msg="密碼不正確";
            }
        }
        HttpSession session = request.getSession(true);
        String vacode = (String) session.getAttribute("vacode");
        if(vacode.equalsIgnoreCase(code)){
            //跳到主頁
            session.setAttribute("User",us);
            c="1001";
        }
        map.put(c,msg);
         list.add(map);
        return JSON.toJSONString(list);
    }
 

這樣後端就把資訊傳送給了錢端。

前端接收資料

前端接收的資料，打印出來是這樣的型別，[{},{}].當然，我這裡的程式碼返回去顯示的樣式是[{}]的，因為我只會返回一個數據。 這裡[]代表陣列，裡面的一個{}代表一個物件。如果用js接收，我們需要先解析json物件。

function onLogin() {
	var span = document.getElementsByClassName("msg")[0];
	var username = document.getElementsByClassName("username")[0].value;
	var password = document.getElementsByClassName("password")[0].value;
	var passcode = document.getElementsByClassName("code")[0].value;
	//console.log(username+" "+password);
	//2.請求
	//建立一個xmlhttprequest物件
	var req = new XMLHttpRequest();
	//設定請求方法 主機地址，是否非同步
	req.open("get","login.do?username="+username+"&password="+password+"&passcode="+passcode,true);
	req.send();
	//傳送請求
	//req.setRequestHeader("content-type", "application/x-www-form-urlencoded");
	//3.監聽狀態
	req.onreadystatechange = function() {
		//console.log(req.readyState + " " + req.status);
		if (req.readyState == 4 && req.status == 200) {
			//響應成功
			//console.log(req.responseText); //伺服器響應回來的string資料
			//將接收json字元創轉成Json物件(只能轉陣列[])
			var data = req.responseText;
			//console.log(data);
			var obj = eval(data);
			//前端頁面跳轉到登入頁面
				//span.innerHTML=data;
				//console.log(obj[0].code);	
				//console.log(obj[0].msg);
			if(obj[0].code!=1000){
				alert(obj[0].msg);
				return;
}	
				window.location.href = "index.html";
			}
		}
	}
 

這裡eval(data)把它解析成obj物件。obj物件是數組裡面加上一個物件，所以取出數組裡面的第一個物件，使用物件.屬性名取出它們的資料。

使用jquary取出資料

function onLogin() {
    //console.log( $(".username").val());
    $.post("login.do",{"username": $(".username").val(),"password":$(".password").val(),"code":$(".code").val()},function (data){
       for (var key in data[0]){
           if(key=="1001"){
               window.location.href = "index.html";
           }else {
               //alert(data[0][key]);
               $("#msg").html(data[0][key]);
           }
       }
    },"json");
 

可以使用for in 遍歷陣列，data[0]是數組裡面的第一個物件。取出物件裡面的所有key，通過key獲取value。 當然，這裡面也可以用物件.屬性名來取出資料。 比如我有多個物件，由於ArrayList是存取有序的，這樣我們可以選取哪個物件，data[i].該物件的屬性名，也可以取出值。