m.lom599.com_手机版乐白家网址_乐百家手机首页登录

ajax方法进行异步请求导致页面闪烁的解决办法,

作者: 手机版乐白家网址  发布:2019-07-10

backbone必须依赖underscore.js才能够使用,它必须通过underscore中的函数来完成访问页面元素、处理元素的基本操作。
注:backbone可以很好的与其它js库一起工作,所以说它是一个库,而不是框架。
Underscore并没有对原生对象进行扩展,而是调用_()方法进行封装,一旦封装完成,js对象就变为Underscore对象,也可以通过Underscore对象的Value()方法获取原生js对象中的数据。(jquery通过$()方法得到Jquery对象)
Underscore总共有60多个函数,按照处理对象的不同,可以分为集合类、数组类、功能函数类、对象类、工具函数类五大类模块。

先给大家展示下实现效果图,如果亲感觉是您想要的效果,请参考本代码。

情景

underscore template()函数说明:

图片 1

图片 2

该函数包含三种模板:

实现代码如下所示:

目前有个需求是在文本框填入内容,自动触发keyup事件,下拉列表会自动过滤相应的选项,但是使用了$,ajax后发现,每次触发事件时,都导致整个网页闪烁,触发了全局ajax事件

(1)<% %>:包含逻辑代码,渲染后不会展现。
(2)<%= %>:数据类型,渲染后展示数据。
(3)<%- %>:将HTML标记转换为常用字符串,以避免代码攻击。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript菜单侧边展开(改良版)</title>
</head>
<body>
<ul id="navigation">
<li><a href="#">系统管理</a>
<ul>
<li><a href="#">地区设置</a></li>
<li><a href="#">分行设置</a></li>
<li><a href="#">银行操作用户设置</a></li>
<li><a href="#">密码修改</a></li>
</ul>
</li>
<li><a href="#">学校管理</a>
<ul>
<li><a href="#">学校设置</a></li>
<li><a href="#">学校查询</a></li>
</ul>
</li>
<li><a href="#">基础信息管理</a></li>
<li><a href="#">统计系统查询</a></li>
</ul>
<script src="jquery-1.11.1.js"></script>
<script>
var $j = jQuery.noConflict();
$j(function(){
var lis = document.getElementById("navigation").getElementsByTagName("li");
for (var i=0; i<lis.length; i  ) {
lis[i].onmouseover=function() {
var subMenu = this.getElementsByTagName("ul")[0];
subMenu.style.display = "block";
var subcolor = this.getElementsByTagName("a")[0];
subcolor.style.background = "lightblue";
}
lis[i].onmouseout=function() {
var subMenu = this.getElementsByTagName("ul")[0];
subMenu.style.display = "none";
var subcolor = this.getElementsByTagName("a")[0];
subcolor.style.background = "";
}
}
});
</script>
<script src="jquery-1.11.1.js"></script>
</body>
</html>

代码片段

调用格式:

以上是本文给大家介绍的jquery侧边栏代码,希望对大家有所帮助!同时也非常感谢大家对脚本之家网站的支持!

$.ajax({ 
type: "POST", 
url: root   "/xxx, 
data: requestData, 
dataType: "json", 
success: function(data){ 
// 清空列表 
$("#formOpinion #listLeft").empty(); 
$.each(data, 
function(i, $data) { 
var $option = $("<option name='opinion.tag' value=" 
  $data.code   $data.name   ">"   $data.code 
  $data.name   "</option>"); 
// 绑定数据到listLeft 
$("#formOpinion #listLeft").append($option); 
}); 
} 
}); 
_.template(templateString, [data], [setting])

您可能感兴趣的文章:

  • jquery scrollTop方法根据滚动像素显示隐藏顶部导航条
  • jquery简单实现鼠标经过导航条改变背景图
  • jQuery关于导航条背景切换效果实现示例
  • 基于jquery的一个OutlookBar类,动态创建导航条
  • jquery 导航条的效果(css选择器控制)
  • jquery实现的蓝色二级导航条效果代码
  • jQuery固定浮动侧边栏实现思路及代码
  • Jquery实现侧边栏跟随滚动条固定(兼容IE6)
  • 博客侧边栏模块跟随滚动条滑动固定效果的实现方法(js jquery等)
  • jQuery实现智能判断固定导航条或侧边栏的方法

解决方案

没有实现双向数据绑定。

查看JQuery API文档发现,$.ajax里面有个Global属性可以设置是否全局范围ajax事件,默认为true,改为false即可

1、Underscore对象封装 Underscore并没有在原生的JavaScript对象原型中进行扩展,而是像jQuery一样,将数据封装在一个自定义对象中(下文中称“Underscore对象”)。
你可以通过调用一个Underscore对象的value()方法来获取原生的JavaScript数据,例如:

图片 3

// 定义一个JavaScript内置对象 
var jsData = { 
 name : 'data' 
} 

// 通过_()方法将对象创建为一个Underscore对象 
// underscoreData对象的原型中包含了Underscore中定义的所有方法,你可以任意使用 
var underscoreData = _(jsData); 

// 通过value方法获取原生数据, 即jsData 
underscoreData.value();

图片 4

 2、优先调用JavaScript 1.6内置方法 Underscore中有许多方法在JavaScript1.6中已经被纳入规范,因此在Underscore对象内部,会优先调用宿主环境提供的内置方法(如果宿主环境已经实现了这些方法),以此提高函数的执行效率。
而对于不支持JavaScript 1.6的宿主环境,Underscore会通过自己的方式实现,而对开发者来说,这些完全是透明的。
这里所说的宿主环境,可能是Node.js运行环境,或客户端浏览器。

以上内容是小编给大家介绍的基于JQuery的$.ajax方法进行异步请求导致页面闪烁的解决办法,希望对大家所有帮助!

3、改变命名空间 Underscore默认使用_(下划线)来访问和创建对象,但这个名字可能不符合我们的命名规范,或容易引起命名冲突。
我们可以通过noConflict()方法来改变Underscore的命名,并恢复_(下划线)变量之前的值,例如:

您可能感兴趣的文章:

  • Vue form 表单提交 ajax异步请求 分页效果
  • 使用bootstrap-paginator.js 分页来进行ajax 异步分页请求示例
  • ajax异步请求详解
  • 浅谈js的ajax的异步和同步请求的问题
  • SpringMVC环境下实现的Ajax异步请求JSON格式数据
  • DataTables BootStrap组合使用Ajax来获取数据并且动态加载dom的方法(排序,过滤,分页等)
  • Bootstrap Paginator分页插件与ajax相结合实现动态无刷新分页效果
  • 详解ajax jtemplate实现动态分页
  • 关于Ajax异步请求后台数据进行动态分页功能
<script type="text/javascript"> 
 var _ = '自定义变量'; 
</script> 
<script type="text/javascript" src="underscore/underscore-min.js"></script> 
<script type="text/javascript"> 
 // Underscore对象 
 console.dir(_); 
 // 将Underscore对象重命名为us, 后面都通过us来访问和创建Underscore对象 
 var us = _.noConflict(); 
 // 输出"自定义变量" 
 console.dir(_); 
</script> 

4、链式操作 还记得我们在jQuery中是如何进行链接操作吗?例如:

$('a') 
 .css('position', 'relative') 
 .attr('href', '#') 
 .show(); 

本文由m.lom599.com发布于手机版乐白家网址,转载请注明出处:ajax方法进行异步请求导致页面闪烁的解决办法,

关键词: m.lom599.com