Question

使用ajax加载另一个页面而不刷新页面，首先加载图像（加载gif）然后加载视图。

<a id="id1" class="list-group-item"  data-target="@Url.Action("LiveMatches", "home")">
    <span class="badge" style="font-size:10px;color:#fff" id="LiveMatchesNumber">0</span>
    <span style="font-size:10px;font-weight: 900;">@index.Index.livematches</span>
</a>

   $(function () {
   $(".list-group-item").on("click", function () {
   var thebutton = $(this);
   var url = thebutton.attr("data-target");
   var target1 = $("#mainInfo");
   target1.empty().addClass("backgrounLoadinImage").addClass("backgrounLoadinImageSmall");
   $.ajax({
   type: "post",
   url: url,
   success: function (data, text) {
   target1.empty().html(data);
   target1.removeClass("backgrounLoadinImage").removeClass("backgrounLoadinImageSmall");
   },
   error: function (request, status, error) {
          alert(request + error);
         target1.removeClass("backgrounLoadinImage").removeClass("backgrounLoadinImageSmall");
          }
      });
   });
});

Answer 1

您应该在回调函数签名中使用event事件的click参数，然后调用event.preventDefault();来停止重定向。

＆＃13;

$(".list-group-item").on("click", function (e) {
  e.preventDefault();
  console.log('not redirected');
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <a href="https://google.com" class="list-group-item">click me</a>
</div>

＆＃13;

Answer 2

这就是我所做的并且它有效，但我的问题是我有一个链接列表，我想通过使用相同的脚本打开多个链接

 $(function(){
       // don't cache ajax or content won't be fresh
       $.ajaxSetup ({
           cache: false
       });
       var ajax_load = "<img src='http://automobiles.honda.com/images/current-offers/small-loading.gif' alt='loading...' />";

       // load() functions
       var loadUrl = '@Url.Action("Index","Home")';
       $("#id1").click(function(){
           $("#mainInfo").html(ajax_load).load(loadUrl);
       });
   });

使用mvc中的ajax加载另一个页面（数据目标）

2 个答案: