时间戳

首页 > 解决方案 > 即使数据变量显示正确的值，jQuery Ajax GET 调用在成功后也不会刷新 html 页面上的数据

jquery - 即使数据变量显示正确的值，jQuery Ajax GET 调用在成功后也不会刷新 html 页面上的数据

问题描述

我使用与下拉项对应的值，并根据该值在控制器中执行特定操作。使用 jQuery ajax GET 调用来调用控制器函数。控制器函数正确计算并填充列表，然后在视图中检索该列表。我已经验证，根据参数值（0、1 或 2），控制器会正确填充 vm.SomeList 中的数据。然而，非常令人费解的是，一旦控制器调用了 View，代码 Model.SomeList 的值是绝对正确的。但是，显示的数据永远不会改变，即使我不需要刷新页面来显示数据，我也尝试调用 location.reload(true)。我可能不理解 jQuery 调用是如何工作的。我对此进行了广泛的研究，但仍然无法弄清楚这个问题。尤其，viewmodel 列表参数始终具有正确的数据，具体取决于我选择的选项。我绝对可以在没有 ajax 的情况下完成这项工作，但现在我很好奇。任何指针（包括不理解基本 jQuery 的告诫）都将受到欢迎

控制器：

 public ActionResult FuncA(string param)
 {
        var vm = new SomeViewModel();
        ....
        ....

        try
        {
          
            // update a variable in view model...
            vm.someList = GetList(param);
          
            return View(vm);
        }
        catch (Exception e)
        {
              // no exception thrown (I verified this)
        }
 }

查看 (.cshtml) @Html.EnumDropDownListFor(m => m.routed, "路由到", new { @class = "col-sm-2 form-control"})

... 
    @if (Model.SomeList.Any())
    {

        foreach (var item in Model.SomeList)
        {
            <tr>
            <!-- display the list items -->
            ...
            </tr>
        }
    }

</tbody>

jQuery 调用：

<script type="text/javascript">
    $(document).ready(function () {
        ...

        $('#filter').click(

            function () {
                alert("Reached 1");

                $.ajax({
                    url: '@Url.Action("FuncA", "Home")',
                    type: 'GET',
                    data: {             
                            param: $('#routed').val()
                          },
                    dataType: 'text',
                    cache: false,
                    success: function (response) {
                        alert("Reached 2");
                        if (response != null) {
                            alert("Reached 3");
                            location.reload(true);

                        }
                        else {
                            alert("null response");
                        }
                        return false;
                    },
                    error: function () {
                        alert("Error!")
                    }
                })
            }
        )

    });

标签： jqueryajaxmodel-view-controller

解决方案

考虑以下。

$(function() {
  $('#filter').click(function(e) {
    e.preventDefault();
    console.log("Filter Click - Event Triggered.");
    $.ajax({
      url: '@Url.Action("FuncA", "Home")',
      type: 'GET',
      data: {
        param: $('#routed').val()
      },
      dataType: 'text',
      cache: false,
      success: function(response) {
        console.log("AJAX Success", response);
        if (response != null) {
          console.log("AJAX Payload Not NULL");
          location.href = location.href + "?" + Date.now();
        } else {
          console.log("AJAX Payload is empty.");
        }
      },
      error: function(x, e, t) {
        console.log("AJAX Error", e, t);
      }
    });
  });
});

这有点清理干净，应该在控制台中提供更多详细信息以进行测试。

使用click事件，我们可以使用.preventDefault(). 如果失败了，什么都不会发生。如果成功，无论如何都会刷新页面。

location.reload(true);

这应该可以重新加载页面而不是缓存。如果没有，请尝试使用一些额外的查询将位置设置回自身。

location.href = location.href + "?" + Date.now();

这应该确保浏览器不会加载缓存版本。

推荐阅读