HBuilder开发APP（二）——网络请求

mui框架中给我们封装好了常用的Ajax函数，是基于XMLHttpRequest，支持GET、POST请求方式，支持返回json、xml、html、text、script数据类型。

mui常用的请求方法：

1、mui.ajax() ——最初的请求方法，可设置请求方式（GET、POST）、同步/异步、超时时间、请求头、返回数据类型、跨域等；

2、mui.get() ——直接使用GET请求方式向服务器发送数据，不处理超时和异常；

3、mui.post() ——直接使用POST请求方式向服务器发送数据，不处理超时和异常；

4、mui.getJSON() —— 在mui.get()方法上进行简化，限定返回json格式的数据，其用法和mui.get()相同。

不再BB，用代码说话。

<!DOCTYPE html>
<html>

   <head>
       <meta charset="utf-8">
       <title></title>
       <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
       <meta name="apple-mobile-web-app-capable" content="yes">
       <meta name="apple-mobile-web-app-status-bar-style" content="black">

       <script src="../js/mui.min.js"></script>
       <link rel="stylesheet" href="../css/mui.min.css">
   </head>

   <body>
       <header class="mui-bar mui-bar-nav">
           <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
           <h1 class="mui-title">网络请求</h1>
       </header>
       <div class="mui-content">
           <div class="mui-content-padded" style="padding-bottom: 50px;">

               <div class="mui-button-row">
                   <button type="button" id="send" class="mui-btn mui-btn-primary">发送请求</button>
               </div>
               <h5 class="mui-content-padded">响应结果：</h5>
               <code id="response"></code>
           </div>
       </div>
       <script>
           (function($) {
               $.init();

               var network = true;
               if($.os.plus){
                   $.plusReady(function () {
                       //判断网络是否连接
                       if(plus.networkinfo.getCurrentType()==plus.networkinfo.CONNECTION_NONE){
                           network = false;
                       }
                   });
               }
               var resp = document.getElementById("response");
               var ajax = function() {
                   $.ajax('http://api.juheapi.com/japi/toh',{
                       data:{//请求携带数据
                           key: '1234567890',
                           v: '1.0',
                           month:'11',
                           day:'1'
                       },
                       type:'get',//HTTP请求类型
                       dataType:'json',//返回数据类型
                       success:function(data){//请求成功回调函数
                           response = JSON.stringify(data);
                           resp.innerHTML = response;
                       }
                   })
                   resp.innerHTML = '正在请求中...';
               };
               //发送请求按钮添加点击事件
               document.getElementById("send").addEventListener('tap', function() {
                   if(network){
                       ajax();
                   }else{
                       mui.toast("当前网络不给力，请检查网络...");
                   }
               });
           })(mui);
       </script>
   </body>

</html>

HBuilder开发APP（二）——网络请求

猜你喜欢