同一函数中的两个 ajax 调用答案

【问题标题】：Two ajax calls in same function同一函数中的两个 ajax 调用
【发布时间】：2014-10-23 04:19:09
【问题描述】：

我有一个允许用户输入客户名称的 Html.Textbox。一旦他们达到 3 个或更多字符，我就会调用一个自动完成函数，该函数会在下拉列表中返回客户列表。当他们做出选择时，我想进行另一个 ajax 调用，这将返回一个新视图。我的问题是当我添加第二个调用时，自动完成中的数据被删除。这是我目前所拥有的：

        $("#CustomerSearch_FullName").autocomplete({
            minLength: 3,
            fontSize: '10px',
            source: function (request, response) {
                $.ajax({
                    url: '@Url.Action("CustomerNameAutoComplete", "Customer")',
                    async: false,
                    data: { searchstring: $.trim(request.term) },
                    success: function (data) {
                        response($.map(data, function (item) {
                            $('#CustomerIdDisplay').val(item.id);
                            $('#customer-select').val(item.id);
                            $('#Order_Customer_FirstName').val(item.firstname);
                            $('#Order_Customer_Email').val(item.email);
                            return { label: item.choice, id: item.id };
                        }));
                    },

                });
            },
            select: function (event, ui) {
                 id = ui.item.id;
                 $.ajax ({
                    url: '@Url.Action("Create", "Order")',
                    data: { customerId: id }
                 });

【问题讨论】：

您在他们做出选择时提到您要触发第二个呼叫。为什么不将第二个 ajax 调用放在 jquery 更改事件中？

标签： ajax asp.net-mvc-4

【解决方案1】：

您只需要在您的选择语句中添加return false：

,
select: function (event, ui) {
id = ui.item.id;
$.ajax ({
         url: '@Url.Action("Create", "Order")',
         data: { customerId: id }
       });
return false;
}

“选择”自动完成的默认操作是使用您从自动完成框中选择的任何内容设置文本框值，如果您还没有准备好设置文本框，因为您想根据选择，您必须添加 return false 以防止默认行为。第二次通话结束后，您必须根据结果将文本框设置为您想要的任何内容。

【讨论】：