asp.net WebService實現跨域js呼叫功能實現
1、Web.Config中增加如下紅色標記部分配置:
<system.web>
<compilation debug="true" targetFramework="4.0" />
<!--提供Ajax呼叫開始 -->
<webServices>
<protocols>
<add name="HttpGet" />
<add name="HttpPost" />
</protocols>
</webServices>
<!--提供Ajax呼叫結束-->
</system.web>
2、增加一個Tools類,如下程式碼:
public class Tools
{
public static void WriteResult(string callback, string result)
{
HttpContext.Current.Response.HeaderEncoding = System.Text.Encoding.UTF8;
HttpContext.Current.Response.ContentEncoding = System.Text.Encoding.UTF8;
HttpContext.Current.Response.Write(callback + "(" + result + ")");
HttpContext.Current.Response.End();
}
}
3、WebService檔案增加頭屬性
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.ComponentModel.ToolboxItem(false)]
// 若要允許使用 ASP.NET AJAX 從指令碼中呼叫此 Web 服務,請取消註釋以下行。
[System.Web.Script.Services.ScriptService]
[SoapDocumentService(RoutingStyle = SoapServiceRoutingStyle.RequestElement)]
public class getData : System.Web.Services.WebService
{
#region 1、獲取裝置資訊
[WebMethod]
public void GetAllDeviceData()
{
string sql = @"select devid,jfid,devname from JfDevice";
DataTable dtTable = AosySql.ExecuteforDataSet(sql).Tables[0]; //獲取資料庫資料的方法,使用的資料庫訪問類,根據自身情況調整
StringBuilder sb = new StringBuilder();
if (dtTable.Rows.Count > 0)
{
foreach (DataRowView drv in dtTable.DefaultView)
{
sb.Append("{\"DevId\":\"" + drv["devid"].ToString() + "\",");
sb.Append("\"DevName\":\"" + drv["devname"].ToString() + "\",");
sb.Append("\"JfId\":\"" + drv["jfid"].ToString() + "\"},");
}
}
string result = "[" + sb.ToString().TrimEnd(',') + "]";
Tools.WriteResult(HttpContext.Current.Request["jsoncallback"], result);
}
}
4、將WebService釋出到IIS後,在其他系統中的html頁面中呼叫,如下程式碼所示:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="JS/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(function () {
getValueFromWebService();
});
//查詢webservice
function webservice(url, callback) {
$.ajax({
type: 'get',
url: url,
dataType: 'jsonp',
jsonp: 'jsoncallback',
success: function (result) {
callback(result);
}
});
};
function getValueFromWebService() {
webservice('http://192.168.33.158/XXXX/WebService/getData.asmx/GetAllDeviceData',
function (obj) {
var data = obj;
//成功
$.each(data, function (key, item) {
// 新增專案內容到ul列表中
$('<li>', { text: formatItem(item) }).appendTo($('#room'));
});
});
}
function formatItem(item) {
return item.DevId + ' / ' + item.DevName + ' / ' + item.JfId;
}
</script>
</head>
<body>
<ul id="room">
</ul>
</body>
</html>
相關文章
- 騰訊WebService Api 跨域呼叫WebAPI跨域
- 九種方式實現跨域跨域
- Nginx反向代理實現跨域Nginx跨域
- JSONP 跨域原理及實現JSON跨域
- 跨域方案總結與實現跨域
- 多種跨域方式實現原理跨域
- 九種跨域方式實現原理跨域
- Ajax 跨域難題 - 原生 JS 和 jQuery 的實現對比跨域JSjQuery
- Android Studio 呼叫Camera實現拍照功能Android
- ASP.NET MVC & WebApi 中實現Cors來讓Ajax可以跨域訪問ASP.NETMVCWebAPICORS跨域
- web api 、webservice 跨域等WebAPI跨域
- CORS方式實現ajax跨域 — nginx配置CORS跨域Nginx
- Ajax+SpringMVC實現跨域請求SpringMVC跨域
- Laravel + JWT 實現 API 跨域授權LaravelJWTAPI跨域
- Spring Boot 通過CORS實現跨域Spring BootCORS跨域
- jquery 之 jsonp 與 laravel 實現跨域jQueryJSONLaravel跨域
- jQuery Ajax 跨域前端實現登入jQuery跨域前端
- 什麼是瀏覽器跨域訪問操作?JS如何實現?瀏覽器跨域JS
- nuxt.js配置實現axios在開發時的跨域代理UXJSiOS跨域
- 用原生 JS 實現 innerHTML 功能JSHTML
- JS實現線上ps功能JS
- JS實現發郵件功能JS
- 簡單的實現jsonp跨域請求JSON跨域
- SpringBoot與WebService的簡單實現Spring BootWeb
- 原生js實現商品排序功能JS排序
- js實現電子簽名功能JS
- js 實現鏈式呼叫名稱空間JS
- 九種跨域方式實現原理(完整版)跨域
- zuul實現Cors跨域的兩種方式(https)ZuulCORS跨域HTTP
- springboot系列文章之實現跨域請求(CORS)Spring Boot跨域CORS
- JavaScript 跨域訪問(API介面)實現原理分析JavaScript跨域API
- Spring Cloud Gateway + oauth2 跨域配置實現SpringCloudGatewayOAuth跨域
- js實現網頁端錄音功能JS網頁
- JS實現前臺表格排序功能JS排序
- SpringMVC+RestFul詳細示例實戰教程(實現跨域訪問)SpringMVCREST跨域
- 實現呼叫API介面API
- JS 實現全屏預覽 F11功能JS
- python opencv如何實現目標區域裁剪功能PythonOpenCV
- [Hei.Captcha] Asp.Net Core 跨平臺驗證碼實現APTASP.NET