0

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

该网络服务工作正常，因为我在其他地方使用它很好（使用类似的代码来执行自动完成）它以 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 服务返回的数据，因此我试图对自动完成代码进行逆向工程以帮助自己理解它。

4

4 回答 4

2

对于初学者，您需要通过使用[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正在使用的回调中，data.d这对于启用 JSON 的 Web 服务来说很好，因为它们使用该.d属性，但是您似乎response在您的内部调用了一些 javascript 函数$.map，因为您在上下文中显然不存在于您的上下文中AJAX 请求成功回调。我想这是一些非常糟糕的复制粘贴，没有理解代码意味着什么，来自一些使用此功能但在您的场景中没有任何意义的 jQuery UI 自动完成插件示例。

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

如果你想使用 jQuery 自动完成插件，那不是正确的使用方式。您不应该订阅任何模糊事件。您应该阅读文档以获取示例。但我什至不确定你想要达到什么目的。

因此，如果您想将此插件与您的 Web 服务连接，可以尝试以下方法：

$(document).ready(function () {
    $('[id$=txtSupplier]').autocomplete({
        source: function(request, response) {
            $.ajax({
                url: 'http://localhost:52350/FabRouting/Webservice/SupplierList.asmx/GetSuppliers',
                data: JSON.stringify({ supplierSearch: request.term },
                contentType: 'application/json; charset=utf-8',
                success: function(data) {
                    response($.map(data.d, function(item) {
                        return {
                            label: item.SupplierID,
                            value: item.SupplierName
                        }
                    }));
                }
            });
        },
        minLength: 2
    });
});
于 2012-07-02T21:59:56.627 回答
0

就像在这里完成一样：

var SupplierID = $(data).find("SupplierID").text();
于 2012-07-02T21:58:22.580 回答
0

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

于 2012-07-02T21:58:28.033 回答
0

好吧，我终于想通了。我很确定我走错了路，但我不知道自己做错了什么，也不知道如何访问从 Web 服务返回的数据。Darin 很有帮助，它让我更加努力地编写代码而不是放弃。我认为他没有完全理解我想要做什么，但确实理解我正在尝试使用我不理解的代码:) 我确实在我的最终结果中使用了他的 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 查询不一定是错误，只是我需要处理的事情。如果有人有更好（或正确）的方法来处理这个问题，请告诉我。

于 2012-07-03T01:42:33.850 回答