-
Notifications
You must be signed in to change notification settings - Fork 327
/
ajax.html
142 lines (119 loc) · 7.78 KB
/
ajax.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
<meta name="description" content="Mobilebone.js 使用教程-中文版-请求" />
<meta name="keywords" content="Mobilebone.js, Mobilebone, javascript, 使用教程, 请求" />
<meta name="author" content="张鑫旭, zhangxinxu" />
<link rel="icon" href="../assets/favicon.ico">
<title>Mobilebone.js使用教程-请求</title>
<link rel="stylesheet" href="../../src/mobilebone.css">
<link rel="stylesheet" href="../assets/docs.css">
</head>
<body>
<header id="header"></header>
<aside id="aside"></aside>
<div class="page out">
<div class="content">
<h2>请求</h2>
<p>介绍下 Mobilebone 的请求处理逻辑。</p>
<h3>方法</h3>
<p>在 Mobilebone 中，触发页面的请求与加载有两种方式：</p>
<ul>
<li>基于 <code><a></code> 元素或者 <code><form></code> 元素；</li>
<li>调用 <code>Mobilebone.ajax()</code> 方法。</li>
</ul>
<p>其中，<code>Mobilebone.ajax()</code> 方法通过传递 Object 类型参数触发请求的执行，示意：</p>
<pre>Mobilebone.ajax({
url: "",
type: "",
dataType: "",
data: {},
timeout: 10000,
success: function() {},
error: function() {},
complete: function() {}
})</pre>
<p>参数的命名均源自 jQuery 的 <code>$.ajax()</code> 方法。</p>
<p>如果是通过点击 <code><a></code> 元素触发请求的执行，则所有的参数需要使用 HTML 属性进行传递。</p>
<p>其中的 <code>data</code> 参数本身就是个 Object 纯对象，因此，这个参数的传递稍微特别了一点，通常使用下面两种方法：</p>
<ul>
<li><p>支持通过 <code>href</code> 原地址进行简单的请求参数传递，例如：</p>
<pre><a href="detail.html<span class="mark">?id=1&type=0</span>">加载</a></pre></li>
<li>
<p>通过 <code>data-formdata</code> 进行请求参数设置，例如：</p>
<pre><a href="detail.html" <span class="mark">data-formdata="id=1&type=0"</span>>加载</a></pre>
</li>
</ul>
<p>而其他的参数，则可以通过下面两种方法进行设置：</p>
<ul>
<li>分别设置，包括：<code>data-url</code>、<code>data-datatype</code>、<code>data-success</code>等，详见对应的 API 文档：<a href="../api/#&data-ajaxKeys.html" class="link" data-ajax="false" target="_api">data-ajaxKeys.html</a></li>
<li>批量设置，使用 <code>data-params</code> 属性进行参数设置，例如：
<pre><a href="ajax.html" data-params="datatype=json&amp;success=succ_callback>点击我</a></pre>
</li>
</ul>
<h3>参数</h3>
<p>各个参数函数和对应的 HTML 属性如下：</p>
<dl>
<dt>url</dt>
<dd>请求地址。对应 <code><a></code> 元素的 <code>href</code>属性或者 <code><form></code> 元素的 <code>action</code> 属性，如果这些属性值都缺失，则尝试使用 <code>data-url</code> 的属性值作为请求地址，如果还是缺失，则尝试从 <code>data-params</code> 属性中匹配 <code>url</code> 字段值。</dd>
<dt>type</dt>
<dd>请求的类型。默认是 <code>'get'</code>。可以使用 <code><form></code> 元素的 <code>method</code> 属性进行设置。如果缺失，则尝试使用 <code>data-type</code> 属性。如果还是缺失，则尝试从 <code>data-params</code> 属性中匹配 <code>type</code> 字段值。</dd>
<dt>dataType</dt>
<dd>请求数据类型。默认类型是文本类型，支持 <code>'json'</code> 数据类型，Mobilebone 会对返回的数据进行 JSON 解析并处理。可以通过 <code>data-datatype</code> 或匹配 <code>data-params</code> 属性值获取。</dd>
<dt>data</dt>
<dd>请求参数。默认为空。可以设置在 <code>url</code> 参数中，也可以使用 <code>data-formdata</code> 或匹配 <code>data-params</code> 属性值获取。</dd>
<dt>timeout</dt>
<dd>超时时间。可以使用 <code>data-timeout</code> 或匹配 <code>data-params</code> 属性值获取。</dd>
<dt>success</dt>
<dd>请求成功回调方法。可以使用 <code>data-success</code> 或匹配 <code>data-params</code> 属性值获取。</dd>
<dt>error</dt>
<dd>请求失败回调方法。可以使用 <code>data-error</code> 或匹配 <code>data-params</code> 属性值获取。</dd>
<dt>complete</dt>
<dd>请求完成回调方法。可以使用 <code>data-complete</code> 或匹配 <code>data-params</code> 属性值获取。</dd>
</dl>
<p>其中几个回调方法需要专门说下。</p>
<p>首先，各个回调方法使用和生命周期事件函数同样的装载器，默认是 <code>window</code> 对象，当通过 Mobilebone.rootTransition 改变函数的装载器的时候，这里的请求方法的装载器也会同步变化。</p>
<p>如果不希望这种变化发生，则可以使用 <code>data-root</code> 指定几个函数的调用上级，例如：</p>
<pre><a href="ajax.html" data-params="datatype=json&amp;success=succ_callback <span class="mark">data-root="myVue"</span>>点击我</a></pre>
<p>则请求成功后就会执行 <code>myVue.succ_callback()</code> 这个方法。</p>
<p>然后，讲下各个回调方法的语法：</p>
<pre>success(response, status);
error(xhr, status);
complete(xhr, status);</pre>
<p>其中 <code>response</code> 指返回的数据，<code>xhr</code> 指 XMLHttpRequest 请求对象，<code>status</code> 是请求返回的原始状态码。</p>
<h3>JSON处理</h3>
<p>如果请求的数据类型是 <code>'json'</code>，则请求成功后，Mobilebone 会调用名为 <code>Mobilebone.jsonHandle()</code> 的方法，如果有安装有 Mobilebone 官方的模板渲染插件，则会自动执行 JSON 数据的渲染，否则，需要开发者自己设置 Mobilebone.jsonHandle 的处理逻辑：</p>
<pre>Mobilebone.jsonHandle = function (json) {
// 根据 json 数据渲染页面
// 可以使用 Mobilebone.createPage() 方法创建页面
};</pre>
<p>上面提到的 <code>Mobilebone.createPage()</code> 方法是 Mobilebone 底层的创建页面方法，详见对应的 API 文档：<a href="../api/#Mobilebone.createPage.html" class="link" data-ajax="false" target="_api">Mobilebone.createPage.html</a>。</p>
<hr>
<p>发现错误？想参与编辑？在 <a href="https://github.com/zhangxinxu/mobilebone/blob/master/docs/guide/ajax.html" class="link" target="_github" rel="nooppener">GitHub 上编辑此页</a>！</p>
</div>
</div>
<script src="nav.js"></script>
<script src="../../src/mobilebone.js"></script>
<script>
Mobilebone.captureLink = false;
window.navKey = "install";
</script>
<script src="../assets/docs.js"></script>
<!-- ga统计 -->
<script>
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-11205167-1']);
_gaq.push(['_trackPageview']);
(function() {
if (location.host == 'www.zhangxinxu.com') {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
}
})();
</script>
</body>
</html>