PhoneGap下纯HTML5与服务器交互，基于jQuery

zxcstc1256

于 2012-10-25 11:29:21 发布

阅读量2.5k

点赞数

本文链接：https://blog.csdn.net/zxcstc1256/article/details/8109904

版权

第一次使用PhoneGap，想到的与服务器交互有两种方案，一种是使用默认的本地HTML方式（当然也可以把HTML放在服务器端，但是这样还不如使用第二种方案），一种是全程使用服务器脚本，比如JSP页面，当然这些页面肯定是放在服务器端，客户端只需要在初始化的时候引用这个页面即可，Android客户端，代码如下：

public class MyActivity extends DroidGap {

	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
                //super.loadUrl("file:///android_asset/login.html");
		super.loadUrl("http://220.166.32.204:8080/test/login.jsp");
		super.setIntegerProperty("loadUrlTimeoutValue", 15000);
	}
}

注释掉的代码为PhoneGap默认的本地HTML方案，下面的http请求即为服务器脚本解决方案

各有各的好处，本地HTML方案可以把代码和服务器端的代码隔离开，维护只需要维护客户端，无需修改服务器端，并且因为是本地读取，可以在无网络情况下使用应用程序（可以把资源保存在本地sqlLite数据库中）；服务器脚本解决方案好处是代码简单，和开发普通web页面几乎无差别，甚至可以直接使用之前针对PC写好的web页面，JS识别设备动态更换一下CSS样式即可。

我使用的是本地HTML5解决方案，在数据交互上，使用的是ajax，因为jQuery Mobile库为基础，所以使用jQuery的ajax方法，JS代码如下：

function pullNoticeList(){
	$.ajax({
		url:addr+"notice_list.action",
		type:"POST",
		dataType:"jsonp",
		data:{"start":"0","limit":"8","sort":"effectiveDate","dir":"DESC"},
		beforeSend: function(){
			$("#content").html("<p>数据拉取中，请稍后...</p>").trigger("create");
		},
		success:function(response){
			var startHtml = '<ul id="listview" data-role="listview" data-theme="c">';
			var endHtml = "<li id='more'><p style='text-align:center' onClick='pullMoreNoticeList(9,8)'>查看更多</p></li></ul>";
			$.each(response.noticeList,function(index,item){
				startHtml+="<li><a href='javascript:showDetail("+item.noticeId+");'><p>"+item.noticeTitle+"<span class='ui-li-aside'>"+item.effectiveDate+"</span></p></a></li>";
			});
			$("#content").html(startHtml+endHtml).trigger("create");
		},
		error:function(){
			showReConnConfirm();
		}
	});
}

HTML代码：

<body>
　<div id="notice" data-role="page" data-theme="b">
   <div data-id="myheader" data-role="header" data-theme="b" data-position="fixed">
	   	<img src="css/images/logo.jpg" alt="logo">
	   	<a href="index.html" rel="external" class="ui-btn-right">返回首页</a>
   </div>
   <!-- header end -->
   <div id="content" data-role="content"> 
   </div>	
   <!-- content end -->
   <div data-id="myfooter"  data-role="footer" data-position="fixed" data-theme="b">
		<h6>技术支持
			<a rel="external" href="http://www.scjx.com/">四川久信网络技术有限公司</a>
		</h6>
	</div>
	<!-- footer end -->
　</div>
  <!-- notice page -->
  <div id="noticeDetail" data-role="page" data-theme="b">
  	<div data-id="myheader" data-role="header" data-theme="b" data-position="fixed">
	   	<img src="css/images/logo.jpg" alt="logo">
	   	<a href="#notice" data-rel="back" data-role="button" class="ui-btn-right">返回</a>
   </div>
   <!-- header end -->
   <div id="detail-content" data-role="content"> 
   	
   </div>	
   <!-- content end -->
   <div data-id="myfooter"  data-role="footer" data-position="fixed" data-theme="b">
		<h6>技术支持
			<a rel="external" href="http://www.scjx.com/">四川久信网络技术有限公司</a>
		</h6>
	</div>
	<!-- footer end -->
  </div>
</body>

简单说明一下数据交互流程：进入html触发页面事件->执行JS的ajax方法访问服务器的struts下的Action->Action中执行一系列操作然后得到数据库返回的值->struts的json插件封装并把对象数据以json格式返回到js的callback函数中->js的ajax获取callback的返回值，在success函数中获取到该值，处理到html页面->html页面显示数据

必须使用jsonp格式，不然无返回值，其次，注意返回的json格式，一定要符合jQuery的json格式，可以通过firedug查看调试json，服务器端使用的struts，可以使用struts的json插件，可以很智能把对象封装成json格式，具体参考struts api。