用HTML在HTML页面中调用Wcf服务

我在VSStudio2012中有一个WCF项目，我想从JavaScript函数中调用一个方法。用HTML在HTML页面中调用Wcf服务

JavaScript文件：

var url = 'http://localhost:52768/Service1.svc/' 

function test() { 

var response; 

$.ajax({ 
    type: 'Post', 
    url: url + 'GetTEST', 
    contentType: 'application/json; charset=utf-8', 
    dataType: 'json', 
    success: function (msg) { 
     alert(msg); 
    }, 

    error: function (e) { 
     alert("Error : " + e.statusText); 
    } 
});

}

HTML文件：

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<script Language="JavaScript" src="Scripts/JavaScript1.js"></script> 
<script Language="JavaScript" src="Scripts/jquery-1.10.2.min.js"></script> 
<script Language="JavaScript" src="Scripts/jquery-1.9.1.intellisense.js"></script> 
<script Language="JavaScript" src="Scripts/jquery-1.9.1.js"></script> 
<script Language="JavaScript" src="Scripts/jquery-1.9.1.min.js"></script> 
<script Language="JavaScript" src="Scripts/jquery.unobtrusive-ajax.js"></script> 
<script Language="JavaScript" src="Scripts/jquery.unobtrusive-ajax.min.js"></script> 
<script Language="JavaScript" src="Scripts/jquery.validate.js"></script> 
<script Language="JavaScript" src="Scripts/jquery.validate.min.js"></script> 
<title>TESTE</title> 
</head> 
<body> 
<input id="Button1" type="button" value="button" onclick="test()"/> 
</body> 

</html>

在我IService1.cs

[OperationContract] 
    [WebInvoke(Method = "GET",ResponseFormat = WebMessageFormat.Json)] 
    string GetTEST();

这里是一个警报显示

enter image description here

和错误：

enter image description here

本地主机：52768/Service1.svc显示

enter image description here

来源

2014-02-23 Jayce

__sidenote__：你为什么要加载的多个版本jQuery的？ – Satpal

什么是GetTEST（）实现？ – chridam

@chridam公共字符串GetTEST（） { return“OKKKKKKKK”; } – Jayce

在此基础上article，问题是，AJAX已经cross-site limitation这会阻止您调用远程服务。对于这种情况，一个简单的解决方法是在同一个应用程序中使用服务器端代码来调用远程WCF服务的服务器端page_method（脚本回调）或本地wcf服务。您的网页使用AJAX调用本地WCF服务（其工作方式类似于中介）。

另一种方法是将远程WCF服务定义为接受http GET请求的标准REST服务。因此，您的网页可以使用JQuery API通过JQuery脚本访问远程WCF服务操作。那么你的主机WCF服务作为控制台应用程序和使用JQuery在另一个Web应用程序来调用它：

[ServiceContract(Namespace="ConsoleAJAXWCF")] 
    public interface IService1 
    { 
    [OperationContract] 
    [WebInvoke(Method = "GET", ResponseFormat = WebMessageFormat.Json)] 
    string GetTEST(); 
    } 

    [AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)] 
    public class Service1 : IService1 
    { 

    public string GetTEST() 
    { 
     return "OKKKKKKKK"; 
    } 
    }

您在主机控制台应用程序：

// program.cs 
using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Text; 
using System.ServiceModel; 
using System.ServiceModel.Description; 
using ConsoleAJAXWCF;  

namespace ConsoleAJAXWCF 
{ 
    class Program 
    { 
     static void Main(string[] args) 
     { 

      // Step 1 Add a service endpoint. 
      using (WebServiceHost selfHost = new WebServiceHost(typeof(Service1))) 
      { 
       try 
       { 
        // Step 2 Start the service. 
        selfHost.Open(); 
        Console.WriteLine("The service is ready."); 
        Console.WriteLine("Press <ENTER> to terminate service."); 
        Console.WriteLine(); 
        Console.ReadLine(); 

        // Close the ServiceHostBase to shutdown the service. 
        selfHost.Close(); 
       } 
       catch (CommunicationException ce) 
       { 
        Console.WriteLine("An exception occurred: {0}", ce.Message); 
        selfHost.Abort(); 
       }     
      }    
     } 
    } 
} 
    // WCF Configuration  
    <endpointBehaviors> 
     <behavior name="AJAXEndpoint" > 
     <webHttp/> 
     </behavior> 
    </endpointBehaviors> 
    </behaviors> 
    <services> 
     <service name="ConsoleAJAXWCF.Service1"> 
     <endpoint 
     behaviorConfiguration="AJAXEndpoint" 
     address="" binding="webHttpBinding" contract="ConsoleAJAXWCF.IService1"> 
      <identity> 
      <dns value="localhost"/> 
      </identity> 
     </endpoint> 
     <host> 
      <baseAddresses> 
      <add baseAddress="http://localhost:52768/Service1/"/> 
      </baseAddresses> 
     </host> 
     </service> 
    </services>

验证服务工作：

从Visual Studio 2012内运行ConsoleAJAXWCF控制台应用程序。在Windows Vista和更高版本的操作系统上运行时，该服务必须以管理员权限运行。因为Visual Studio是以管理员权限运行的，所以GettingStartedHost也以管理员权限运行。您还可以启动一个以管理员权限运行的新命令提示符并在其中运行service.exe。
打开Internet Explorer并浏览到该服务的调试页面位于localhost：52768 /服务1/

这就要求服务代码在ASPX页面：

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
     <script Language="JavaScript" src="Scripts/jquery-1.10.2.min.js"></script> 
     <script Language="JavaScript" src="Scripts/jquery-1.9.1.intellisense.js"></script> 
     <script Language="JavaScript" src="Scripts/jquery.unobtrusive-ajax.js"></script> 
     <script Language="JavaScript" src="Scripts/jquery.unobtrusive-ajax.min.js"></script> 
     <script Language="JavaScript" src="Scripts/jquery.validate.js"></script> 
     <title>TESTE</title> 
    </head> 
    <body> 
     <input id="Button1" type="button" value="button" onclick="CallRESTWCFService()"/> 
    </body> 
    <script type="text/javascript"> 

    function CallRESTWCFService() { 
     $.getJSON("http://localhost:52768/Service1/GetTEST", {}, 
     function (data) { 
      alert(data); 
     });  
    } 
    </script> 
</html>

来源

2014-02-23 17:04:05 chridam

对不起，但我不明白当你谈论托管控制台应用程序。我应该在哪里放置这些代码？ – Jayce

如果您按照此[后]（http://msdn.microsoft.com/en-us/library/ms730935（v = vs.110）.aspx）应引导您 – chridam

我按照指南，我有这个错误： GET http：// localhost：52768/Service1/GetTEST 404（Not Found） – Jayce

用HTML在HTML页面中调用Wcf服务

回答

相关问题