第三课,接收处理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在手机上测试。

课程完整代码下载:http://www.zhmykj.com/03.zip