HTML5 Web應用之HTML5+javascript調用WebAPI

HTML5 Web應用之HTML5+javascript調用WebAPI

準備工作

Visual Studio Code.
jQuery
bootstrap中文網
下載用於生產環境的 Bootstrap後,解壓,並將剛才下載的jquery-3.1.0.min.js放在解壓後的js文件夾內(當然也可以不這麼做)

動手啦: 新建一個文件夾h5webapp,將我們剛才整理後的三個文件夾放進去

用 vs code 打開文件夾h5webapp,並新建一個空白文檔,命名為:index.html,並敲入以下代碼:


這個是套路!

用chrome或者任意瀏覽器打開index.html,是不是什麼都沒有?

首先, 我們在

標簽裡面加一個容器,參考bootstrap文檔佈局容器就像下面那樣:

    這裡有一行小字

然後,我們再在標簽裡加一個可以輸入文本的控件,可以點擊的按鈕和一個用來存放數據的列表控件,參考bootstrap文檔表單就像下面那樣:

        
        

    刷新看下你剛才打開的頁面,是不是有點意思瞭?

    在vs目錄下新建一個空白文檔取個名字叫myscript.js,並在2的套路中,添加一行代碼

     

    編寫myscript.js文件:(混寫的因為我就搜到這些,據說純用jQuery會更簡潔,那就靠你自己瞭!)

    window.onload=init;//頁面加載時加載
    function init(){
    var btn=document.getElementById("manquery");//獲取按鈕
    btn.onclick=Getmanlist;//為該按鈕添加onclik事件的回調函數
    }
    function Getmanlist(){//獲取api的數據
    $.ajax({
    type: 'GET',//表示獲取
    url: '/api/man',//api地址,這裡我們把網站和api放在一個服務器上,為瞭防止跨域訪問的問題
    data:{manname:$("#manname").val()},//參數,jquery獲取manname文本框裡的值
    dataType: 'JSON',//返回格式,跟蹤發現返回的是array???
    success: function (mannames, textStatus) {//mannames就是返回的數據
        Displaymanname(mannames);//外部處理返回數據
    },
    error: function (xmlHttpRequest, textStatus, errorThrown) {
    }
    });
    }
    function Displaymanname(data){//處理返回結果並控制dom顯示
    var ul=document.getElementById("manlist");//獲取定義好的ul
    for(var i=0;i

    這個時候,你的網頁還是沒有什麼異常,下一步我們將h5webapp掛到IIS上

    發佈網站

    在你上一節發佈的webapi的目錄上,為h5webapp添加一個虛擬目錄,然後將它轉換為應用程序,不知道是不是直接添加一個應用程序就好瞭沒試過!

    用瀏覽器打開你的網站吧,localhost/h5webapp,在文本框裡輸入內容後,點查詢是不是就是webapi裡查詢到的數據?

    You May Also Like