用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服務

回答

相關問題