javascript模拟达成ajax加载框实例,模拟完成ajax加

2019-09-08 05:05 来源:未知

本文实例讲述了javascript模拟实现ajax加载框的方法,分享给大家供大家参考。具体方法如下:

模拟实现ajax加载框,模拟ajax加载

function loading(p_value,str)
{
if (p_value)
{
if (!document.getElementById("load_area"))
{
var para1 = document.createElement("span");
var node=document.createTextNode(str);
para1.appendChild(node);
var para=document.createElement("div");
para.id="load_area";
var top=document.body.scrollTop+document.documentElement.scrollTop;//获取页面中的实际高度
top_position = top+157 + "px";
para.style.top =top_position;
icon.style.cssText += ";vertical-align:middle;padding-right:4px;margin-top:-2px;"
para.style.cssText +=
";position:absolute;left:50%;width:140px;margin-left:-70px;height:50px;line-height:50px;font-size:18px;text-overflow:ellipsis;overflow:hidden; white-space:nowrap;text-align:center;background-color: #000;border-radius:2px;-webkit-box-shadow:0 2px 2px rgba(0,0,0,0.5);color:#eee;";

var icon = new Image();
icon.src="images/loading1.gif";//这里用实际路径替换
document.body.appendChild(para);

para.appendChild(icon);

**para.appendChild(para1);

}
else
{
document.getElementById("load_area").style.display="block";
}
}
else
{
document.getElementById("load_area").style.display="none";
}
}
**

 

 

调用方法:loading(true,"加载中...");  loading(false)

复制代码 代码如下:

jquery ajax 怎实现动态加载数据

上边的代码也是对的,但是不够简洁,可能你看不太懂,我给你写个简洁的:
index.php页面这么写(首先引入jquery的js文件):
<script>
$(function(){
$.post(
'ajax.php',
null,//如果你需要传参数的话,可以写在这里,格式为:{参数名:值,参数名:值...}
function(data){//执行成功之后的回调函数
$('#info').html(data);
}
);
})
</script>
<div id="info"></div>  

function loading(p_value,str)
{
if (p_value)
{
if (!document.getElementById("load_area"))
{
var para1 = document.createElement("span");
var node=document.createTextNode(str);
para1.appendChild(node);
var para=document.createElement("div");
para.id="load_area"; 
var top=document.body.scrollTop+document.documentElement.scrollTop;//获取页面中的实际高度
top_position = top+157 + "px";
para.style.top =top_position;
icon.style.cssText += ";vertical-align:middle;padding-right:4px;margin-top:-2px;"
para.style.cssText +=
";position:absolute;left:50%;width:140px;margin-left:-70px;height:50px;line-height:50px;font-size:18px;text-overflow:ellipsis;overflow:hidden; white-space:nowrap;text-align:center;background-color: #000;border-radius:2px;-webkit-box-shadow:0 2px 2px rgba(0,0,0,0.5);color:#eee;";

页面中的数据分几个部分,在页面加载时怎通过AJAX来实现数据的加载?

AJAX通过异步提交,根据返回值运行回调函数,在函数里面动态更新DOM树实现局部刷新效果。

可以试试JQuery的ajax函数,或者使用一些ajax组件,例如Java用的DWR  

function loading(p_value,str) { if (p_value) { if (!document.getElementById("load_area")) { var para1 = document.createElement("span");...

var icon = new Image();
icon.src="images/loading1.gif";//这里用实际路径替换
document.body.appendChild(para);

para.appendChild(icon);

para.appendChild(para1);

}
else
{
document.getElementById("load_area").style.display="block";
}
}
else
{
document.getElementById("load_area").style.display="none";
}
}

调用方法如下:

复制代码 代码如下:

loading(true,"加载中...");  loading(false)

希望本文所述对大家的web前端程序设计有所帮助。

您可能感兴趣的文章:

  • JS基于Ajax实现的网页Loading效果代码
  • Ajax风格的一款网页Loading效果
  • dwz 如何去掉ajaxloading具体代码
  • Ajax loading gif generator
  • Ajax全局加载框(Loading效果)的配置
TAG标签:
版权声明:本文由990888藏宝阁发布于计算机网络,转载请注明出处:javascript模拟达成ajax加载框实例,模拟完成ajax加