在web开发中,页面响应速度是非常重要的,而经常需要进行异步数据请求操作,这时就需要一种良好的用户体验方式来提示操作正在进行中,同时增强用户体验。这时候就需要用到Jquery ajax loading效果。
// 加载用户列表 function loadUserList(){ // 开始加载数据时,显示loading提示 $('#loading').show(); $.ajax({ url: 'userList.do', type: 'get', success: function(data){ // 成功加载数据后,隐藏loading提示 $('#loading').hide(); // 处理返回的数据 if(data.success){ // ... }else{ // ... } }, error: function(err){ // 加载数据失败后,隐藏loading提示 $('#loading').hide(); // 处理错误信息 console.log(err); } }); }
在上面的代码中,我们通过jQuery封装的ajax方法进行数据请求,同时我们通过一个div元素来实现一个loading的效果,当请求数据的时候,就将该div元素的display属性设置为block,表示显示loading效果,当数据加载完成后,我们将该div元素的display属性设置为none,表示隐藏loading效果。通过这种方式,可以较好地增强用户体验和页面交互效果。