1

我在 stackoverflow 上看到了一堆类似的帖子，但对我都没有用。我有简单的 AJAX ENABLED WCF 服务，它根据输入返回城市

 [OperationContract]
    public IEnumerable<string> GetCities(string prefix)
    {
        string[] cities = new[] { "New York", "Atlanta", "Los Angeles", "Las Vegas", "Arizona", "New Hampshire", "New England" };

        if(!String.IsNullOrEmpty(prefix))
        {
            cities = cities.Where(a => a.ToLower().StartsWith(prefix.ToLower())).ToArray();
        }

        return cities;
    }

现在我正在尝试使用 jquery ui 的自动完成来调用此方法。问题是我必须将前缀参数传递给方法调用，但是无论我尝试什么，前缀参数都会作为查询字符串附加到 url。这是我拥有的 jQuery 代码

$("input[type=text][id*=autocompleteBox]").autocomplete({
    source: function (request, response) {
        var dataCity = {'prefix': request.term};
        $.ajax({
            url: "http://localhost:1939/Cities.svc/GetCities",
            dataType: "json",
            contentType: "application/json; charset=utf-8",
            data: JSON.stringify(dataCity),
            success: function (data) {
                response($.map(data, function (item) {
                    return {
                        label: data
                    }
                }));
            }
        });
    },
    minLength: 0
});

我知道我有 3 个选项可以调用远程数据源。第一个选项是上面的代码，但是这样我将字符串化的 json 结果附加到 url。

然后我尝试简单地将服务的 url 传递给源选项，但我得到了相同的结果（ term=myinput 附加到 url ）。

我不能使用第三个选项（带有本地数据的数组），因为我有很多条目，我不想将它们全部保留在客户端上。

那么如何将前缀参数传递给 Service Method 呢？这是否可能，或者如果我选择使用 jquery ui 的自动完成小部件，我必须坚持使用 url 附加参数？

4

2 回答 2

2

我没有在您的 ajax 调用（type参数）中看到指定的 HTTP 方法，因此它默认为 GET 并且 GET 不能包含内容。使用 GET 时传递数据的唯一方法是通过 URL 参数。顺便提一句。因为你的方法只是获取数据，它应该使用 GET 请求。

因此，而不是 JSON，只发送：

var dataCity = "prefix=" +  encodeURIComponent(request.term);
于 2012-04-12T10:31:09.027 回答
1

实际上，我在代码中犯了一些错误。我应该映射返回的结果，在这种情况下是 data.d。这是工作代码。

$("input[type=text][id*=autocompleteBox]").autocomplete({

        source: function (request, response) {

            var data = { 'prefix': request.term};

            $.ajax({
                type: "POST",
                url: "http://localhost:1939/Cities.svc/GetCities",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                data: JSON.stringify(data),
                processdata: true,
                success: function (result) {
                    response($.map(result.d, function (item) {
                        return {
                            label: item
                        };
                    }));
                },
                error: function (er) {
                    alert(er);
                }
            });
        },
        minLength: 1,
        open: function () {
            $(this).removeClass("ui-corner-all").addClass("ui-corner-top");
        },
        close: function () {
            $(this).removeClass("ui-corner-top").addClass("ui-corner-all");
        }
    });
于 2012-04-12T19:07:28.167 回答