jQuery跨域調用Web API


我曾經發表了一篇關於如何開發Web API的博客,鏈接地址:http://www.cnblogs.com/guwei4037/p/3603818.html。有朋友說開發是會開發了,但不知道怎么調用啊?那么這里我就演示一下如何進行跨域調用Web API,算是對上面博客的補充。

因為在瀏覽器中是不允許跨域訪問Web API的(為了安全),所以必須要對我們開發的Web API添加跨域功能。在Web API中添加跨域功能非常簡單,只需要引入一個包Microsoft.AspNet.WebApi.Cors即可,直接通過Nuget安裝即可。

然后在WebApiConfig里面添加跨域支持代碼:

EnableCorsAttribute的構造函數指定的三個參數均為*,表示支持所有的訪問。第一個參數表示訪問的源;第二個參數表示訪問的頭信息;第三個參數表示允許的方法,比如:HEAD、OPTIONS、DELETE、GET、POST等等。

最后將Web API項目編譯發布到IIS,然后就可以通過jQuery調用Web API。

完整的HTML調用Web API的代碼如下:

<html>
<head>
    <script src="jquery-1.4.2.js"></script>
    <script type="text/javascript">
        $(function(){
            $.ajax({
                type:'get',
                async: false,
                url:'http://10.77.137.120:9876/Api/IPAddress',
                dataType:'JSON',
                data:{}, 
                success:function(result){
                    var json = JSON.parse(result);
                    for(var i = 0;i<json.length;i++){
                        $("#citys").append("<tr><td>"+(parseInt(i)+1)+"</td><td>"+json[i].IPAddress+"</td><td>"+json[i].Province+"</td><td>"+json[i].City+"</td></tr>");
                    }
                }
            });
        });
    </script>
</head>
<body>
    <table id="citys" cellspacing=0 cellpadding=0 border=1>
        <thead>
            <th>序號</th>
            <th>IP</th>
            <th>省份</th>
            <th>地市</th>
        </thead>
    </table>
</body>
</html>


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM