javascript - MVC调用控制器方法而不打开新页面？

Question

我的控制器类中有一个名为 output 的方法。当我更改下拉列表中的选定项目时，我想向它发送一个参数，然后让它根据该参数运行某个 SQL 查询，并让它返回结果。问题是，我不想在返回结果时打开一个新页面，我只想在警报中显示该查询的结果，而不是打开一个 URL 来运行该方法。这是我当前的 javascript，该方法是一个名为 output 的 ActionResult，并有一个名为 test 的参数，它是一个字符串。

    <script src="../../Content/jquery.js"></script>
<script type="text/javascript">
    jQuery(function () {

        jQuery("#SelectedCentre").change(function () {
            var _this = jQuery(this);
            var selectedCentre = _this.val();
            window.location.href = "/Centres/output?test=" + selectedCentre;
        });
    });
</script>

Answer 1

您应该为此进行 ajax 调用：

jQuery（函数（）{

    jQuery("#SelectedCentre").change(function () {
        var _this = jQuery(this);
        var selectedCentre = _this.val();
        jQuery.get("/Centres/output?test=" + selectedCentre, function(results){
         // do something with results here
        });
    });
});

编辑以在评论中回答您的问题：

在您的控制器中返回一个 json 类型的对象，如下所示：

 var data = new List<SelectListItem>
                           {
                               new SelectListItem
                                   {
                                       Text = "Test1",
                                       Value = "1"
                                   },
                                new SelectListItem
                                   {
                                       Text = "Test2",
                                       Value = "2"
                                   }
                           };
            return Json(data, JsonRequestBehavior.AllowGet);

并更新您的 jQuery 代码以处理 json 对象并创建选项：

$.getJSON("/Centres/output?test=" + selectedCentre, function (results) {
    $.each(results, function (i, item) {
        $("<option>", { text: item.Text, value: item.Value }).appendTo("#mySelect");
    });
});

Answer 2

你想使用 JQuery 的 get 方法。

 jQuery.get('Centres/output?test=' + selectedCentre, function (result) {
     alert(result);
 });

只要它是 JSON，您就可以对您想要的结果做任何事情。如果是 HTML，您可以将其推送到页面上的现有元素中。

另外你为什么不使用 jquery 给你的 $ 呢？

Answer 3

jQuery.get("/Centres/output?test=" + selectedCentre, function(results){
         // do something with results here
console.log(results);
        });