mobilebone
Version:
Bone main for mobile web APP with a sigle page mode by using HTML5 history API router.
77 lines (68 loc) • 2.38 kB
HTML
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
<title>ajax请求JSON</title>
<link rel="stylesheet" href="../../src/mobilebone.css">
<link rel="stylesheet" href="../test.css">
</head>
<body>
<div id="pageHome" class="page out" data-title="ajax请求JSON">
<ul>
<li><a href="json-success.html" data-dataType="json" data-ajax="true" data-error="requestError">点击加载JSON数据 - Mobilebone.jsonHandle</a></li>
<li><a href="json-data.json" data-dataType="json" data-ajax="true" data-template="myTemplate">加载JSON数据模板解析渲染示意</a></li>
</ul>
<ul>
<li><a href="json-error.txt" data-datatype="json" data-error="requestError">加载JSON失败，404, 可回调</a></li>
<li><a href="json-error.html" data-datatype="json" data-error="requestError">加载JSON失败，解析错误</a></li>
</ul>
<ul>
<li><a href="../index.html" data-ajax="false">« 返回测试引导首页</a></li>
</ul>
</div>
<template id="myTemplate">
<ul>
${data.map((obj, index) => {
return `<li>
<a href="#pageHome" data-rel="back">${obj.content} - 返回</a>
</li>`;
}).join('')}
</ul>
</template>
<script src="../../src/mobilebone.js"></script>
<script>
Mobilebone.jsonHandle = function(json, params) {
if (/json-success/.test(params.url)) {
var page = document.createElement("div");
page.className = "page out";
page.setAttribute("data-title", json.title);
page.innerHTML = json.html;
return page;
} else {
return myTemplate.innerHTML.interpolate(json);
}
};
// HTML字符反转义 < => <
function escape2Html(str) {
var arrEntities = { 'lt': '<', 'gt': '>', 'nbsp': ' ', 'amp': '&', 'quot': '"' };
return str.replace(/&(lt|gt|nbsp|amp|quot);/ig, function (all, t) {
return arrEntities[t];
});
}
String.prototype.interpolate = function (params) {
const names = Object.keys(params);
const vals = Object.values(params);
return new Function(...names, `return \`${escape2Html(this)}\`;`)(...vals);
};
var requestError = function(xhr, status) {
var obj = {
404: "请求的是火星地址",
500: "服务器嗝屁"
}
if (this.message) alert(this.message);
obj[status] && alert("状态码是" + status + ", 表示：" + obj[status]);
};
</script>
</body>
</html>