对WCF服务的JQuery ajax调用不起作用

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>

但是，当我在文本框中键入内容时，看不到该列表。我只看到一个警告，上面有文本" error“，没有错误详细信息。我还在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

在您的操作契约(接口IService1中的方法)上提供WebInvoke属性。也可以尝试设置UriTemplate属性。理想情况下，这应该是一个GET请求，而不是POST。

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

修改服务层后，更新查询以使用GET作为类型/使用$.get()，并将参数作为名为" query“的查询字符串进行传递。

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});
            }
        });
    }

我还没有测试过$.get方法，看看这里有什么问题-- https://api.jquery.com/jquery.get/