既然要做APP，與介面互動式少不了的，除非只是想做一個純靜態的APP。所以html5+的環境準備好後，我最先開始研究的就是如何與介面互動。 使用HBuilder新建示例教程後，裡面會有一個ajax(網路請求)的列子，檔案目錄是examples/ajax.html。看了下這個檔案的代 碼，它的功能就是點選“提交”按鈕後提交引數給介面，然後根據選擇的返回資料格式，將一段字串打印出來。我準備改造下這段程式碼，改由頁面載入時呼叫列表 介面，並在APP裡顯示這段列表，畢竟這種情況應該經常會用到。 1。在list.html裡增加一個訪問這段列表的連結

<li class="mui-table-view-cell mui-plus-visible">
	<a class="mui-navigate-right" href="examples/ajaxlist.html">
		ajax載入介面列表資料
	</a>
</li>
 

2。在examples目錄新建檔案ajaxlist.html 3。在這個檔案裡先寫上展示列表的HTML框架。我是這麼寫的

<div id="records_count">
	//顯示介面列表裡的記錄總數				
</div>
<table id="list" border="1" width="100%" style="padding: 5px 10px;text-align: center;" >
	//顯示列表資料
</table>

4。碼一段JS程式碼，用於在頁面載入時ajax呼叫介面

var network = true;
if(mui.os.plus){
	mui.plusReady(function () {
		if(plus.networkinfo.getCurrentType()==plus.networkinfo.CONNECTION_NONE){
			network = false;
		} else {
		    //呼叫介面資料的入口方法
			getList();
		}
	});

}
 

其中，getList就是呼叫介面資料的入口方法。下面來編寫getList方法

var ajax = function() {
	//利用askh5的演示介面資料
	var url = "http://askh5.com/try/data/starJson";
	//傳送資料，隨便填，反正返回的資料都是那個樣
	var data = {
		name: "askh5.com",
		author: "gzdayou",
		description: "最好的HTML5社群..."
	};
	respnoseEl.innerHTML = '正在請求中...';
	$.post(url, data, success, 'json');
};

//載入時呼叫介面資料，載入列表
function getList()
{
	if(network){
		ajax();
	}else{
		mui.toast("當前網路不給力，請稍後再試");
	}
}
 

這裡面呼叫的介面是在askh5的angularjs入門教程裡看到的，是一段演示json資料。

$.post(url, data, success, 'json');

上面這個程式碼片段裡的success就是post方法的回撥方法，下面來編寫success方法，來處理返回的資料

var respnoseEl = document.getElementById("records_count");
var list = document.getElementById("list");
//成功響應的回撥函式
var success = function(response) {
	var str = JSON.stringify(response);
	console.log(str);
	//str = JSON.stringify(response);
	respnoseEl.innerHTML = "總記錄：" + response.count; 
	list.innerHTML = "<tr class='title'><td>欄位1</td><td>欄位2</td></tr>";
	mui.each(response.records, function(key, elem) {
		console.log("elem.name:" + elem.Name );
		var li = document.createElement("tr");
		//li.setAttribute("id", key);
		var col1 = document.createElement("td");
		col1.className = "col1"
		col1.innerHTML = elem.Name; 
		li.appendChild(col1);
		var col2 = document.createElement("td");
		col2.className = "col2"
		col2.innerHTML = elem.Club;
		li.appendChild(col2);
		list.appendChild(li);
	});
	console.log("list" + list.innerHTML );
};

好大一坨程式碼用來生成一段列表，要是用angularjs會少些好多程式碼。。。 最後的效果就是：