asp.net WebService实现跨域js调用功能实现

简介: 1、Web.Config中增加如下红色标记部分配置:                                                              2、增加一...

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>


相关文章
|
3月前
|
前端开发 JavaScript 开发工具
跨域联姻:React.NET——.NET应用与React的完美融合,解锁前后端高效协作新姿势。
【8月更文挑战第28天】探索React.NET,这是将热门前端框架React与强大的.NET后端无缝集成的创新方案。React以其组件化和虚拟DOM技术著称,能构建高性能、可维护的用户界面;.NET则擅长企业级应用开发。React.NET作为桥梁,使.NET应用轻松采用React构建前端,并优化开发流程与性能。通过直接托管React组件,.NET应用简化了部署流程,同时支持服务器端渲染(SSR),提升首屏加载速度与SEO优化。
82 1
|
3月前
|
开发框架 前端开发 JavaScript
前后端分离,Asp.net core webapi 如何配置跨域
前后端分离,Asp.net core webapi 如何配置跨域
|
3月前
Net Core 跨域
Net Core 跨域
29 0
|
6月前
|
XML 开发框架 .NET
C# .NET面试系列八:ADO.NET、XML、HTTP、AJAX、WebService
## 第二部分:ADO.NET、XML、HTTP、AJAX、WebService #### 1. .NET 和 C# 有什么区别? .NET(通用语言运行时): ```c# 定义:.NET 是一个软件开发框架,提供了一个通用的运行时环境,用于在不同的编程语言中执行代码。 作用:它为多语言支持提供了一个统一的平台,允许不同的语言共享类库和其他资源。.NET 包括 Common Language Runtime (CLR)、基础类库(BCL)和其他工具。 ``` C#(C Sharp): ```c# 定义: C# 是一种由微软设计的面向对象的编程语言,专门为.NET 平台开发而创建。 作
310 2
|
XML API 数据格式
十九、.net core使用SoapCore开发webservice接口,以及使用HttpClientFactory动态访问webservice接口
使用SoapCore实现在.net core平台下开发webservice;以及使用HttpClientFactory动态访问webservice。首先,需要在包项目下面引用SoapCore:
1062 0
十九、.net core使用SoapCore开发webservice接口,以及使用HttpClientFactory动态访问webservice接口
|
XML 开发框架 JSON
.NET MVC第八章、Web Api 跨域接口
.NET MVC第八章、Web Api 跨域接口
178 0
.NET MVC第八章、Web Api 跨域接口
|
存储 前端开发 JavaScript
.net core实践系列之SSO-跨域实现
.net core实践系列之SSO-跨域实现
248 0
.net core实践系列之SSO-跨域实现
|
开发框架 前端开发 .NET
ASP.NET MVC (四、ASP.NET Web API应用程序与跨域操作)(7)
ASP.NET MVC (四、ASP.NET Web API应用程序与跨域操作)(7)
153 0
ASP.NET MVC (四、ASP.NET Web API应用程序与跨域操作)(7)
|
开发框架 前端开发 .NET
ASP.NET MVC (四、ASP.NET Web API应用程序与跨域操作)(6)
ASP.NET MVC (四、ASP.NET Web API应用程序与跨域操作)(6)
148 0
ASP.NET MVC (四、ASP.NET Web API应用程序与跨域操作)(6)