使用jQuery的load方法实现div局部刷新

在使用 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

  • 6
    点赞
  • 33
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

半缘修道半缘君丶

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值