Сделайте 2 AJAX звонка по кнопке Нажмите

Question

Я работаю над проектом ASP.NET MVC.На моей домашней странице у меня есть окно поиска с кнопкой поиска.

Когда пользователь вводит ключевое слово и нажимает кнопку «Поиск», мне необходимо выполнить 2 независимых операции поиска (я использую Elasticseach, поэтому два вызова Elasticsearch).

1. Вызовите метод действия SearchItems, который отправит и получит Items из Elasticsearch и вернет ItemsPartialView.

2. Выполните вызов SearchCategoryМетод действия, который получает и получает категории от Elasticsearch и возвращает CategoryPartialView.

На моей домашней странице я хочу сделать 2 вызова ajax для этих методов действия, использующих AJAX, для отображения результата.

Это изображение объясняет, чего я хочу достичь

Вопрос: Можно ли сделать 2 вызова для двух методов действия для одного события, используя AJAX?

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