第三課,接收處理json信息

通過前面兩節課的學習,我們學到了如何實現登錄保存Token?以及如何提交表單?對AQBox是如何工作的也有了一定的了解,如果說KMBox是把前端化繁為簡,那么AQBox則是把服務端化繁為簡。所以,這節課我們來結合下,用前面兩節課的知識和這節課的知識來實現一個完整的簡單的數據庫APP應用。

首先我們先來講下如何接收處理服務端返回的json信息,實現效果如下圖:

前端代碼:

success: function (data) {
	$.each(data.data,function(i,item){
	    $("#list").append("<li><h3>"+item[0]+"、"+item[1]+'</h3><p>咨詢內容:'+item[2]+'</p><div>Token:'+item[3]+"</div></li>");
	})
}

$.ajax向服務器提交請求后,會返回一串json信息,使用$.each循環把它輸出到li標簽,item[0]為id編號、item[1]為標題、item[2]為內容、item[3]為Token信息。

接著我們使用jquery mobile設計優化下登錄界面和提交表單頁面,目錄結構如下圖:

index.html為首頁,通過$.cookie('token_id')判斷用戶是否登陸,如果沒有登陸則跳轉login.html登錄頁面,如下圖:

通過判斷服務器端返回的message判斷如果成功登錄,則進入首頁,代碼:if (data.message == "ok") { window.location.href= "index.html";} 如下圖:

注意:Chrome瀏覽器不支持本地保存cookie,要綁定IP或域名。所以要用IE11或者生成APK在手機上測試。

課程完整代碼下載:03.zip