這個系列結束了，就兩篇，本來想詳細寫寫html標簽和javascript的編寫的，著實自己太菜也寫不出來，大家湊合看看！ 這篇主要寫html頁面基本格式與jquery調用webapi獲取數據的並展示在html頁面里方法！ ...
沒了，我會的就這麼多了！
**傳送門:裝逼是學習的動力1-HTML5 Web應用之WebAPI
設計是門玄學
溫馨提示：大神讀此文會有不適，請ctrl+w移步高階練級區
這個系列low炸了！
這次呢，我們寫一個頁面，準備調用我們上節寫的webapi！
準備工作
Visual Studio Code.
jQuery
bootstrap中文網
下載用於生產環境的 Bootstrap後，解壓，並將剛纔下載的jquery-3.1.0.min.js放在解壓後的js文件夾內（當然也可以不這麼做）
動手啦：
- 新建一個文件夾
h5webapp，將我們剛纔整理後的三個文件夾放進去 用 vs code 打開文件夾
h5webapp，並新建一個空白文檔，命名為：index.html，並敲入以下代碼:<!doctype html> <html> <head> <meta charset="utf-8"> <title>Hi,H5</title> <script src="js/jquery-3.1.0.min.js"></script> <link href="css/bootstrap.min.css" rel="stylesheet"> </head> <body> </body> </html>這個是套路！
用chrome或者任意瀏覽器打開
index.html，是不是什麼都沒有？首先， 我們在
<body>標簽裡面加一個容器，參考bootstrap文檔佈局容器就像下麵那樣：<div class="container"> <h2>這裡有一行小字</h2> </div>然後，我們再在
<div>標簽裡加一個可以輸入文本的控制項，可以點擊的按鈕和一個用來存放數據的列表控制項，參考bootstrap文檔表單就像下麵那樣：<form class="form-inline"> <div class="form-group"> <label for="manname">姓名：</label> <input type="text" class="form-control" id="manname" placeholder="例如：王小強"> </div> <button type="submit" class="btn btn-default" id="manquery">查詢</button> </form> <ul id="manlist"></ul>刷新看下你剛纔打開的頁面，是不是有點意思了？
在vs目錄下新建一個空白文檔取個名字叫
myscript.js，併在2的套路中，添加一行代碼<script src="js/myscript.js"></script>編寫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<data.length;i++){//迴圈array var li=document.createElement("li");//新建一個<li>標簽 li.innerHTML=data[i].manname;//manname為你model實體里成員的名字，將獲取的數據賦值給<li> ul.appendChild(li);//將<li>附加到<ul>中 } }這個時候，你的網頁還是沒有什麼異常，下一步我們將
h5webapp掛到IIS上發佈網站
在你上一節發佈的webapi的目錄上，為
h5webapp添加一個虛擬目錄，然後將它轉換為應用程式，不知道是不是直接添加一個應用程式就好了沒試過！用瀏覽器打開你的網站吧，localhost/h5webapp，在文本框里輸入內容後，點查詢是不是就是webapi里查詢到的數據？
