页面局部刷新三种方法

2021-7-28    前端达人 前端及开发文章及欣赏

页面局部刷新

1.使用ajax实现小部分的内容局部刷新
$.ajax({
url:“http://localhost:8080/intoHomepage.do”,
type:“post”,
data:{name:“mydata”},
success:function (result) {
if(result){ //对后端返回的数据result进行处理
$(".testchange").html(“将对应的class=testchange的标签内容进行修改。还可以通过一些父类和子类选择函数进行操作更新数据如:find()、chidren()、parent()等”);
}
},
error:function () {
alert(“出现错误!”);
}
}
);

  1. 如果要对大部分内容进行刷新建议使用iframe标签进行整体刷新。
  2. 对于点击不同的按钮(或其他的标签)局部刷新可以使用" 隐藏方式",比如事先准备好几种不同的内容,
    < button id=“b1”>按钮1< /button>
    < button id=“b2”>按钮2< /button>
    < button id=“b3”>按钮3< /button>
    < div >
    < di v class=“test01”>
    < p> this is test01 < /p>
    < /div>
    < di v class=“test02” style="display:none ">
    < p> this is test02 < /p>
    < /div>
    < di v class=“test03” style="display:none ">
    < p> this is test03 < /p>
    < /div>
    < /div>

点击按钮触发事件(onclick()或其他事件)对需要刷新的部分内容进行css属性display:none(/block)设置只显示一个div的内容



蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码ben_lanlan,报下信息,会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

文章来源:csdn

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

存档