Question

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

当用户键入关键字并单击搜索时，我需要执行2次独立搜索操作（我正在使用Elasticseach，因此两次调用Elasticsearch）。

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

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

This Image explains what I want to achieve

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

Answer 1

这是可能的。唯一真正的问题是你是否希望以某种顺序发送ajax请求（以及通常的代码效率问题，以避免重复，返回的数据格式等）。这样做的一种方法（在第一次成功完成后进行ajax第二次调用）将勾勒出来：

$form->add('userDetails', UserDetailsFormType::class);

使用控制器操作：

<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>

在按钮上进行2次AJAX调用

1 个答案: