在单击按钮时进行2次AJAX调用

我正在从事ASP.NETMVC项目。在我的主页上，我有一个带有搜索按钮的搜索框

当用户键入关键字并单击“搜索”时，我需要执行两个独立的搜索操作（我使用的是Elasticseach，因此需要调用两个Elasticsearch）

调用SearchItems操作方法，该方法将从Elasticsearch获取项目并返回ItemsParatialView

调用SearchCategory操作方法，该方法从Elasticsearch获取类别并返回CategoryPartialView

在我的主页中，我想使用ajax对这些操作方法进行两个ajax调用，以显示结果

---

问题：是否可以使用AJAX在一个事件上对两个动作方法进行两次调用

这是可能的。唯一真正的问题是您是否希望ajax请求按特定顺序发送（以及避免重复的代码效率、返回的数据格式等常见问题）。其中一种方法（在第一次调用成功完成后进行ajax第二次调用）如下所示：

<input type="text" id="search-query" value="" />
<button id="test-button">Test Ajax</button>
<div id="ajax-one-result"></div>
<div id="ajax-two-result"></div>

<script>
    $(function(){
        $(document).on("click", "#test-button", function(){
            var qry = $("#search-query").val();
            func1(qry);

            function func1(queryString) {
                var urlOne = "/Path/To/AjaxOne";
                return $.ajax({
                    type: "GET",
                    url: urlOne,
                    timeout: 30000,
                    data: { query: queryString },
                    dataType: "json",
                    beforeSend: function () {
                    },
                    success: function (transport) {
                        $("#ajax-one-result").html(transport);

                        func2(transport);
                        console.log("AjaxOne success");
                    },
                    error: function (xhr, text, error) {
                        console.log("ERROR AjaxOne");
                    },
                    complete: function () {
                    }
                });

            }

            function func2 (ajaxOneResult) {
                var urlTwo = "/Path/To/AjaxTwo";
                $.ajax({
                    type: "GET",
                    url: urlTwo,
                    timeout: 30000,
                    data: { query: ajaxOneResult },
                    dataType: "json",
                    beforeSend: function () {
                    },
                    success: function (transport) {
                        $("#ajax-two-result").html(transport);
                        console.log("AjaxTwo success");
                    },
                    error: function (xhr, text, error) {
                        console.log("ERROR AjaxTwo");
                    },
                    complete: function () {
                    }
                });

            }
        });
    });
</script>

测试Ajax
$（函数（）{
$（文档）。在（“单击”，“测试按钮”，函数（）上）{
var qry=$（“#搜索查询”）.val（）；
功能1（qry）；
函数func1（查询字符串）{
var urlOne=“/Path/To/AjaxOne”；
返回$.ajax({
键入：“获取”，
网址：urlOne，
超时：30000，
数据：{query:queryString}，
数据类型：“json”，
beforeSend:函数（）{
},
成功：功能（运输）{
$（“#ajax one result”）.html（传输）；
职能2（运输）；
console.log（“AjaxOne成功”）；
},
错误：函数（xhr、文本、错误）{
日志（“错误AjaxOne”）；
},
完成：函数（）{
}
});
}
函数func2（ajaxOneResult）{
var urltow2=“/Path/To/ajaxtow2”；
$.ajax({
键入：“获取”，
url:URL2，
超时：30000，
数据：{query:ajaxOneResult}，
数据类型：“json”，
beforeSend:函数（）{
},
成功：功能（运输）{
$（“#ajax两个结果”）.html（传输）；
console.log（“AjaxTwo成功”）；
},
错误：函数（xhr、文本、错误）{
log（“错误AjaxTwo”）；
},
完成：函数（）{
}
});
}
});
});

控制器动作：

public async Task<JsonResult> AjaxOne(string query)
{
    // For testing only
    System.Threading.Thread.Sleep(5000);

    var result = "AjaxOne Result: " + query;
    return Json(result, JsonRequestBehavior.AllowGet);
}

public async Task<JsonResult> AjaxTwo(string query)
{
    // For testing only
    System.Threading.Thread.Sleep(2000);
    var result = "AjaxTwo Result: " + query;
    return Json(result, JsonRequestBehavior.AllowGet);
}

公共异步任务AjaxOne（字符串查询）
{
//仅供测试
系统线程线程睡眠（5000）；
var result=“AjaxOne result:”+查询；
返回Json（结果，JsonRequestBehavior.AllowGet）；
}
公共异步任务AjaxTwo（字符串查询）
{
//仅供测试
系统线程线程睡眠（2000）；
var result=“AjaxTwo result:”+查询；
返回Json（结果，JsonRequestBehavior.AllowGet）；
}

是的，您可以先试用它。谢谢Asif，这样我就可以独立地进行两次Ajax调用并处理它们的响应。。。这没什么特别的…很高兴。您可以调用同步或异步。我认为Ajax只是异步的，这取决于您的需要，快乐的编码。