Question

我有一个文本框，我是用户输入供应商名称的。关于模糊，我想检查一个Web服务以查看供应商是否存在，如果存在，我想从Web服务返回供应商ID并使用它来填充另一个文本框。

webservice工作正常，因为我在其他地方使用它很好（使用类似的代码进行自动完成）它返回JSON中的数据，如下所示：

<?xml version="1.0" encoding="UTF-8"?>
-<ArrayOfSuppliers xmlns="http://tempuri.org/" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"> 
  -<Suppliers> 
       <SupplierID>1</SupplierID> 
       <SupplierName>Supplier 1</SupplierName> 
   </Suppliers> 
 </ArrayOfSuppliers>

以下代码是混乱的，并不会按原样运行。我希望它有助于解释我想要做的事情，同时也可以帮助我理解我做错了什么以及如何返回和使用数据。

作为一个起点，我收到的错误是“响应”未定义。我明白为什么，但我不明白知道我需要做些什么来修复它。

   $(document).ready(function () {
    $("[id$=txtSupplier]").blur(function () {

        $.ajax({
             type: "POST",
             url: "http://localhost:52350/FabRouting/Webservice/SupplierList.asmx/GetSuppliers",
             data: "{ 'SupplierSearch': '" + $("[id$=txtSupplier]").val() + "' }",
             contentType: "application/json; charset=utf-8",
             dataType: "json",
             dataFilter: function (data) { return data; },
             success: function (data) {
                response($.map(data.d, function (item) {
                   return {
                   value: item.SupplierName,
                   id: item.SupplierID
                 }
                 }))
                 },
             error: function(e){
                 $("[id$=lblSupplier]").html("Unavailable");              
             }
         });
        }
        );
    });

在我完成这项工作之后，我仍然需要知道如何获取返回的内容并设置一个文本框，但是如果我可以使这段代码在某种程度上发挥作用，我可以通过这种方式。

修改

我有一些使用此代码的自动完成功能：

$(document).ready(function () {
$(".cRejectedOnSDRR").autocomplete({
    source: function (request, response) {
        $.ajax({
            url: "http://localhost:52350/FabRouting/Webservice/ReportList.asmx/GetReports",
            data: "{ 'ReportNumberSearch': '" + request.term + "' }",
            dataType: "json",
            type: "POST",
            contentType: "application/json; charset=utf-8",
            dataFilter: function (data) { return data; },
            success: function (data) {
                response($.map(data.d, function (item) {
                    return {
                        value: item.ReportNumber,
                        id: item.SDRRID
                    }
                }))
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                alert(textStatus);
            }
        });
    },
    minLength: 1,
    select: function (event, ui) {
        $("[id$=lblRejectedOnSDRRID]").html(ui.item.id);
    },
});

}）;

并试图用它作为基础来做我在顶部提到的模糊。我不太了解如何简单地获取和使用从Web服务返回的数据，因此我试图对自动完成代码进行反向工程以帮助自己理解它。

Answer 1

对于初学者，您需要通过使用[ScriptService]属性进行装饰来激活Web服务上的JSON，因为它现在返回XML而不是JSON：

[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[ScriptService]
public class SupplierList: System.Web.Services.WebService
{
    public Suppliers[] GetSuppliers(string supplierSearch)
    {
        ...
    }
}

然后你应该使用JSON.stringify方法代替在客户端上构建data参数时所做的字符串连接，这将确保对请求参数进行正确的JSON编码：

data: JSON.stringify({ supplierSearch: $("[id$=txtSupplier]").val() },

然后在您使用success的{{1}}回调中，这对于启用了JSON的Web服务很好，因为它们使用data.d属性，但是您似乎在调用一些{{1}你的.d中的javascript函数显然不存在于你的上下文中，因为你在AJAX请求成功回调的上下文中。我想这是一些非常糟糕的复制粘贴 - 没有理解你的代码意味着什么代码来自你的一些jQuery UI自动完成插件示例，该示例使用了这个函数但在你的场景中没有任何意义。

所以，是的，你现在收到的错误信息非常有意义。您尚未定义response函数，但您正在尝试调用它。

如果你想使用jQuery自动完成插件，那不是正确使用它的方法。您不应订阅任何模糊事件。您应该阅读documentation的示例。但我甚至不确定你想要达到的目标。

如果您想将此插件与您的Web服务连接起来，那么您可以尝试以下内容：

$.map

Answer 2

就像它完成了here：

var SupplierID = $(data).find("SupplierID").text();

Answer 3

Majid是对的，除非你将XML序列化为JSON这不起作用，但我不认为你的错误是因为这个。你有没有看过GenericHandlers？

Answer 4

好吧，我终于明白了。我很确定我走错了路，但我不知道我做错了什么，或者如何访问从Web服务返回的数据。达林很乐意让我用代码再打一些而不放弃。我不认为他完全理解我想做什么，但确实理解我正在尝试使用我不理解的代码:)我确实在我的最终结果中使用了他的stringify建议，但是它在没有它的情况下工作了嗯......他只是提到这个比我为此目的使用的代码更好的选择。

我终于开始找出正确的语法 - 又名：data.d.SupplierID，但即使这似乎适用于网络上的其他人，它仍然不会返回我想要的内容。我终于遇到了一个使用索引的人 - 又名：data.d [0] .SupplierID，它最终开始为我工作。我想了一段时间的索引，但不明白如何处理它。

这是最终的工作代码：

    $(document).ready(function () {
    $("[id$=txtSupplier]").blur(function () {

        $.ajax({
            type: "POST",
            url: "http://localhost:52350/FabRouting/Webservice/SupplierList.asmx/CheckSupplier",
            data: JSON.stringify({ SupplierSearch: $("[id$=txtSupplier]").val() }),
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function(data){
                if (data.d.length == 0) {
                    $("[id$=lblSupplierID]").html("0");
                }
                else {
                    $("[id$=lblSupplierID]").html(data.d[0].SupplierID);
                }
            },
             error: function(e){
                 $("[id$=lblSupplierID]").html("0");
             }
         });
        }
        );
    });

我添加了if语句来检查空值，因为当没有找到结果时它没有导致错误，所以我无法在错误函数中处理它。我假设这是设计的，因为返回null的SQL查询不一定是错误，只是我需要处理的事情。如果有人有更好（或更正确）的方式来处理这个问题，请告诉我。

jQuery模糊检查Web服务的匹配并返回数据以设置多个文本框

4 个答案: