在网页开发中,数据修改(删除/添加)后,怎么实现立即刷新呢?
在JS中,刷新有两种方式:页面整体刷新和数据的局部刷新。
页面整体刷新:
location.reload(true);
每次运行到此命令,都会刷新整个页面,当然也会实现数据的刷新。但是采用页面刷新,会出现一下几个问题:
首先,屏幕会出现短暂的白屏,也就是会闪一下。
其次,如果网页需要拉动滚动条,用户是在页面底端修改数据,整体刷新后屏幕又回到了页面顶端,查看修改后的效果需要再次拉动滚动条。影响用户体验。
数据的局部刷新可以帮我们解决以上两个问题。
refresh_sign_up = function(){
var refresh_page = document.getElementById('activity_sign_up_page');
if(refresh_page){
var scope = angular.element(refresh_page).scope();
scope.$apply(function () {
//在这里写你的刷新函数
});
}
};
document.getElementById()是获取页面的id,当然首先要在你刷新页面的html代码上设置你的页面id:
<div id="activity_sign_up_page">...<div>
此时refresh_page就是获取到的页面id。如果id存在的话,就会执行:
var scope = angular.element(refresh_page).scope();
这句话的意思是使用scope变量代替原js文件的$scope。比如:原JS文件里的 $scope.name = "mary" 在刷新函数里面就可以直接用 scope.name = "mary";
接下来我们就可以在
scope.$apply(function(){})里面写你的刷新函数了。比如,我要将页面的名字"mary"改成"lucy":
scope.$apply(function () {
scope.name = "lucy";
});
当在js文件中调用refresh_sign_up()这个刷新函数,页面显示的名字就改成了lucy。
当然,在刷新函数里面只能获取到原js文件$scope,可以使用$scope间接的获取到绑定的变量。但是该怎么获取到$routeParams 和 $location 呢?
我们可以把$routeParams 和 $location 绑定到$scope上。即:
$scope.routeParams = $routeParams;
$scope.location = $location;
这样就可以啦!
分享到:
相关推荐
vue列表数据删除后主动刷新页面及刷新方法详解 前端删除一条数据或者新增数据后,后端操作成功,但前端不会自动刷新,需要重新刷新当前页面 (用vue-router重新路由到当前页面,页面是不进行刷新的 ,采用window....
本文给大家分享一段js代码利用利用localStorage防止页面动态添加数据刷新后数据丢失问题,代码简单易懂,非常不错,具有参考借鉴价值,需要的朋友参考下
本文为大家详细介绍下如何使用js来刷新当前页面保留参数,下面有个不错的实现大家可以看看
我这个是一个完整案例,index页面查询输出首批数据,result页面接收js传达过去的请求,查询输出数据为json格式传递回去给index页面。无刷新加载数据。小白可以拿去直接使用,只需要修改两个页面sql查询语句和输出...
使用websocket+mysql+java8+Tomcat8技术,管理端动态添加数据到数据库,用户端实时刷新新添加的数据。
js 实现 无刷新定时取数据! 值得下载看看!资源免费,大家分享!!
创建XMLHttpRequest对象var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); xmlhttp.open("get", "GetDate.ashx?id=" + encodeURI("中国") + "&ts;", false); xmlhttp.onreadystatechange = function () { ...
利用AJAX技术轻松实现页面无刷新自动更新!
Echarts 柱状图自动刷新数据,前台js的写法,不涉及到后台,下载打开即可查看效果
js 页面离开,关闭,刷新时提醒保存 简单代码.
AJAX实现页面表格的添删改查操作,异步刷新,有温馨手册,直接部署到项目即可使用,数据库已备,非常方便的代码。
js页面跳转,不同的方法会有不同的效果,刷新可用ajax,但是同页面跳转也可达到刷新效果。
JS省市二级联动 JavaScript 页面无刷新
a页面跳转到b页面,b页面点击浏览器回退,回退到a页面,a页面的数据都是跳转前的数据,数据没有发生变化
(2)刷新页面,以前申请的内存被释放,重新加载脚本代码,变量要重新赋值。 (3)要想刷新后数据不丢失就必须把数据存储在外部,例如:Local Storage、Session Storage、Index DB等。这些都是浏览器提供的API,让你...
jquery .ajax 局部刷新之后 刷新内容无法调用js.
采用Jquery无刷新分页插件jquery.pagination.js 实现无刷新分页效果 页面内容: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> ...
NULL 博文链接:https://heisetoufa.iteye.com/blog/356950