对按钮点击进行 2 AJAX 次调用

Question

我正在处理 ASP.NET MVC 项目。在我的主页上，我有一个带有搜索按钮的搜索框。

当用户键入关键字并单击搜索时，我需要执行 2 个独立的搜索操作（我使用的是 Elasticseach，所以两次调用 Elasticsearch）。

调用 SearchItems 操作方法，该方法将从 Elasticsearch 和 returns ItemsPartialView 获取项目。
调用 SearchCategory 操作方法，该方法从 Elasticsearch 和 returns CategoryPartialView 获取类别。

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

This Image explains what I want to achieve

问题：是否可以使用AJAX对一个事件调用2个动作方法2次？

Answer 1

有可能。唯一真正的问题是您是否希望 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>

控制器动作：

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);
}

对按钮点击进行 2 AJAX 次调用

Make 2 AJAX calls on button Click

ajax

asp.net-mvc

asp.net-ajax