使用jQuery的load方法實現div區域性重新整理

言曌發表於2018-03-17
jQuery

在使用 ajax 進行刪除使用者操作的時候，可以在 success 裡寫一個

window.location.reload();

讓頁面重新整理。

但是，我不想那樣，我只想區域性重新整理

使用jQuery的load方法實現div區域性重新整理

比如，我刪除幾個使用者後，頁面只會重新整理上面的表格，該怎麼做呢？

 

傳統的做法

傳統的純 js 做法可以使用

var content = document.getElementById("content");

content.innerHTML("一大坨HTML程式碼")

就是重新繪製那部分DIV，當然往往我們的需要寫很多標籤，很不爽。

而如果我們使用 jQuery 的 load 方法就可以幫我們獲得那一大坨HTML程式碼了

 

jQuery的load()方法

HTML

  1. <div id="content">
  2.           <div class="table-responsive">
  3.                <!-- do something-->
  4.            </div>
  5. </div>

 

JavaScript

  1. $.ajax({
  2.     async: false,
  3.     type: "POST",
  4.     url: '/admin/user/deleteMore',
  5.     data: {"ids": str},
  6.     dataType: "json",
  7.     success: function () { },
  8.     error: function () { },
  9.     complete: function () {
  10.         $("#content").load("http://localhost:8090/admin/user/list .table-responsive");
  11.         //window.location.reload();
  12.     }
  13. })

 

load方法使用很簡單

$("#id").load("param") 這個 param 可以直接指定某個 url ，必須在是本伺服器可以請求的頁面哦

如 http://localhost:8090/admin/user/add

也可以填 div

如 http://localhost:8090/admin/user/add #main

 

注意一點是，我上面的例子中，是用 #content 來"包裹"著 .table-responsive 的

所以 $("#content").load("http://localhost:8090/admin/user/list .table-responsive"); 的作用是

先通過ajax去請求 http://localhost:8090/admin/user/list .table-responsive 獲得裡面的 HTML 內容

然後裝到 本頁面的 #content 中。

 

本文地址：https://liuyanzhao.com/6856.html

相關文章