1. 程式人生 > >HBuilder開發APP(二)——網路請求

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>