JQuery ajax调用WCF JSON服务不起作用

Question

我有一个简单的WCF服务，它返回JSON格式的字符串列表。 WCF服务代码如下所示：

Web.config：

<system.serviceModel> 
    <services> 
     <service name="WcfServiceProto.Service1" 
       behaviorConfiguration="ServiceBehavior1"> 
      <endpoint 
       address="" 
       behaviorConfiguration="EndPointBehavior" 
       binding="webHttpBinding" 
       contract="WcfServiceProto.IService1" /> 
      <!--<endpoint address="mex" binding="mexHttpBinding" contract="IMetadataExchange"/>--> 
     </service> 
    </services> 
    <behaviors> 
     <serviceBehaviors> 
      <behavior name="ServiceBehavior1"> 
       <serviceMetadata httpGetEnabled="true"/> 
       <serviceDebug includeExceptionDetailInFaults="true"/> 
      </behavior> 
     </serviceBehaviors> 
     <endpointBehaviors> 
      <behavior name="EndPointBehavior"> 
       <webHttp /> 
      </behavior> 
     </endpointBehaviors> 
    </behaviors> 
    <serviceHostingEnvironment multipleSiteBindingsEnabled="true" /> 
</system.serviceModel> 

Service1.cs：

[AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]  
public class Service1 : IService1 
{ 
     [WebInvoke(Method = "POST", ResponseFormat = WebMessageFormat.Json, 
        BodyStyle = WebMessageBodyStyle.WrappedRequest)] 
     public List<string> AutoCompleteSearch(string query) 
     { 
      List<string> data = new List<string>(new string[] { "AB11", "AB12", "AB13", "BC11", "BC12", "BC13", "BC14", "CD11", "CD12", "CD13", "CD14", "CD15", "CD16", "CD17", "CD18", "CD19", "CD20", "CD21", "CD22", "CD23", "CD24", "CD25", "CD26", "CD27", "CD28", "CD29", "CD31", "CD32", "CD33", "CD34", "CD35", "CD36", "CD37", "CD38", "CD39", "CD41", "CD42", "CD43", "CD44", "CD45", "CD46", "CD47", "CD48", "CD49", "CD51", "CD52", "CD53", "CD54", "CD55", "CD56",}); 
      List<string> results = data.Where(item => item.ToUpper().StartsWith(query.ToUpper())).ToList(); 
      return results; 
     } 
    } 

我试图调用使用JQuery AJAX此服务下面给出：

<script>  
    $(document).ready(function() { 
     //alert("Hey"); 
     SearchText(); 
     function SearchText() { 
      $("#Tags").autocomplete({ 
       source: function (request, response) { 
        alert($('#Tags').val()); 
        $.ajax({ 
         type: "POST", 
         contentType: "application/json; charset=utf-8", 
         url: "http://localhost:59227/Service1.svc/AutoCompleteSearch", 
         data: JSON.stringify({ query: $('#Tags').val() }), 
         dataType: "json", 
         dataFilter: function (data) { return data; }, 
         success: function (data) { 
          alert("called"); 
          response($.map(data, function (item) { 
           return { value: item }; 
          })); 
         }, 
         error: function (XMLHttpRequest, textStatus, errorThrown) { 
          alert(textStatus); 
         } 
        }); 
       } 
      }); 
     } 
    }); 
</script> 

但是我没有看到列表我在文本框中输入。我只看到一个警告文字“错误”，并没有错误的细节。我也在WCF服务中插入了断点，但它永远不会被击中。请让我知道我在这里做错了什么。

浏览器控制台日志：

OPTIONS 
XHR 
http://localhost:59227/Service1.svc/AutoCompleteSearch 


Accept text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 
Accept-Encodingg zip, deflate 
Accept-Language en-US,en;q=0.5 
Access-Control-Request-Headers content-type 
Access-Control-Request-Method POST 
Connection keep-alive 
Host localhost:59227 
Origin http://localhost:49910 
User-Agent Mozilla/5.0 (Windows NT 6.1; WOW64; rv:48.0) Gecko/20100101 
Firefox/48.0 

Answer 1

提供的WebInvoke属性在你的工作合同（接口IService1方法）。也尝试设置UriTemplate propery。 IMO，这应该是一个GET请求，而不是POST。

[WebInvoke(Method=“GET”, ResponseFormat=WebMessageFormat.Json, BodyStyle=WebMessageBodyStyle.Wrapped, UriTemplate=“AutoCompleteSearch?query={query}”)] 

一旦你已经修改了你的服务层，更新您的$就使用GET类型/使用$获得（），并传递参数作为查询字符串名称“查询”。

function SearchText() { 
     $("#Tags").autocomplete({ 
      source: function (request, response) { 
       alert($('#Tags').val()); 
       var url = "http://localhost:59227/Service1.svc/AutoCompleteSearch?query="+$('#Tags').val(); 
       $.get(url) 
        .done(function(data){ // your success code goes here}) 
        .fail(function(ex){ // you failure code goes here}); 
      } 
     }); 
    } 

我还没有测试$不用彷徨法中，看看这里你有任何问题 - https://api.jquery.com/jquery.get/