mobilebone

<!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>  <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>