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.οnlοad=init;//页面加载时加载
function init(){
var btn=document.getElementById("manquery");//获取按钮
btn.οnclick=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里查询到的数据？