Question

我需要为其中一个网络表单提供JSONP自动填充功能，与此相同：http://jqueryui.com/autocomplete/#remote-jsonp。

基本上，我想动态填充一个下拉列表，其中包含从我的WCF服务返回的值，该值与用户输入的搜索词匹配。

成功点击WCF服务，文本框的内容成功传入搜索参数。 webservice返回，但我总是陷入jQuery中的“error：”块。

这是重组的jQuery（取自上面链接的AutoComplete示例），它调用我自己的WCF服务：

$("#txtModels").autocomplete({
    source: function (request, response) {
        $.ajax({
            url: "http://localhost:12345/webapi/models",
            dataType: "jsonp",
            data: {
                search: request.term
            },
            success: function (data) {
                alert("Success");  //never reach here
                //response($.map(data.models, function (item) {
                //   return {
                //        label: item.model,
                //        value: item.model
                //    }
                //}));
            },
            error: function() {
                alert("Error");  //always an error
            }
        });
    },
    minLength: 2,
    select: function (event, ui) {
        //log(ui.item ?
        //    "Selected: " + ui.item.label :
        //    "Nothing selected, input was " + this.value);
    },
    open: function () {
        //$(this).removeClass("ui-corner-all").addClass("ui-corner-top");
    },
    close: function () {
        //$(this).removeClass("ui-corner-top").addClass("ui-corner-all");
    }
});

这是WCF服务。它确实会被击中并且没有错误地返回。

[OperationContract]
[WebInvoke(Method = "GET",
            BodyStyle = WebMessageBodyStyle.Wrapped,  //tried ".Bare" also
            ResponseFormat = WebMessageFormat.Json,
            UriTemplate = "models?search={search}")]
public string[] GetBoxSerialNums(string search)
{
    string[] models = new string[]{"Ford", "Chevy", "Honda"};
    return models;
}

WCF项目是使用内置的WCF模板创建的，所以我的web.config没有端点配置，但无论如何它都在这里：

<?xml version="1.0"?>
<configuration>
  <connectionStrings>
    <!--removed-->
  </connectionStrings>

  <system.web>
    <compilation debug="true" targetFramework="4.0" />
  </system.web>

  <system.webServer>
    <modules runAllManagedModulesForAllRequests="true">
      <add name="UrlRoutingModule" type="System.Web.Routing.UrlRoutingModule, System.Web, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a" />
    </modules>
  </system.webServer>

  <system.serviceModel>
    <serviceHostingEnvironment aspNetCompatibilityEnabled="true" multipleSiteBindingsEnabled="true"/>
    <standardEndpoints>
      <webHttpEndpoint>
        <!-- 
            Configure the WCF REST service base address via the global.asax.cs file and the default endpoint 
                        via the attributes on the <standardEndpoint> element below
        -->
        <standardEndpoint name="" helpEnabled="true" automaticFormatSelectionEnabled="false" maxReceivedMessageSize="10240000" maxBufferSize="10240000" />
      </webHttpEndpoint>
    </standardEndpoints>
  </system.serviceModel>

  <appSettings>
    <!--removed-->
  </appSettings>

</configuration>

我对jQuery / JSON很新，特别是JSONP，但很明显，web服务并不是以jQuery调用所期望的格式返回数据。为了使这项工作，我需要做些什么？

Answer 1

通过在bindings内添加system.serviceModel来更改您的web.config：

<bindings>
  <webHttpBinding>
    <binding name="webHttpBindingWithJsonP" crossDomainScriptAccessEnabled="true" />
  </webHttpBinding>
</bindings>

并将bindingConfiguration="webHttpBindingWithJsonP"添加到您的<endpoint>代码中。

然后通过删除BodyStyle和UriTemplate：

来最终更改您的网络方法

[WebInvoke(Method = "GET",
           //BodyStyle = WebMessageBodyStyle.Wrapped,  //tried ".Bare" also
           ResponseFormat = WebMessageFormat.Json
           //UriTemplate = "models?search={search}"
           )]
public string[] GetBoxSerialNums(string search)

现在，WCF服务的响应应该是这样的：

jQuery16409075580490753055_1354078880656(["Ford","Chevy","Honda"]);

哪个符合JSONP要求并且应该有效。

调用WCF服务时JSONP自动完成失败

1 个答案: