用Js实现懒加载和跨域的实现步骤
- php中世界最好的语言原创
- 2017-12-02 10:04:121859浏览
今天教大家怎样用javascript来实现懒加载和跨域，懒加载和跨域是什么？实现懒加载和跨域有什么要注意的？接下来就给大家介绍用Js实现懒加载和跨域的实现步骤
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>跨域</title>
<script src="ajax.js"></script>
<script>
getAJAX(function(data){
console.log(data);
},"http://10.9.156.51:8086/API/article/add.aspx");
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>查询数据</title>
<style>
#container{
width: 992px;
margin: 20px auto;
}
th,td{
background:#fff;
font-size:14px;
height: 30px;
text-align: center;
"微软雅黑";
}
a{
color:#00468C;
text-decoration: none;
}
a:hover{
color:#00468C;
text-decoration: underline;
}
.even{
background:#ff6600;
}
#cover{
position: absolute;
left: 0;
top: 0;
width:100%;
height: 100%;
background: #000;
opacity:0.6;
filter:alpha(opacity=60);
display: none;
}
#updateform{
width:300px;
height: 300px;
border:solid 1px #CCC;
position: absolute;
left:50%;
margin-left: -150px;
top:50%;
margin-top: -200px;
display: none;
background: #fff;
}
#updateform h3{
display: block;
border-bottom:solid 1px #CCC;
border-bottom:solid 1px #CCC;
height: 38px;
line-height: 38px;
background: #ff6600;
margin: 0;
"">微软雅黑;
color:#fff;
font-size: 16px;
}
#updateform form div{
padding-top: 10px;
}
</style>
<script src="ajax.js"></script>
<script>
function createData(b){
var str = "";
for(var i = 2; i < b.length; i++){
var css = "";
if(i % 2 == 0){
css = "even"
}
str += "<tr>"
+ "<td class='"+css+"'>"+b[i].ID+"</td>"
+ "<td class='"+css+"'>"+b[i].ATitle+"</td>"
+ "<td class='"+css+"'>"+b[i].AClickCount+"</td>"
+ "<td class='"+css+"'>"+b[i].ATime+"</td>"
+ "<td class='"+css+"'>"
+ "<a href=\"javascript:;\" onclick='updateData(this)'>修改</a> | <a href=\"javascript:;\" onclick='delDOM(this)'>删除</a>"
+ "</td>"
+ "</tr>";
}
var html = "<table id=\"tb1\" cellspacing=\"1\" style=\"width:990px; background:#000;\">"
+ "<tr>"
+ "<th>编号</th>"
+ "<th>标题</th>"
+ "<th>点击量</th>"
+ "<th>发布时间</th>"
+ "<th>操作</th>"
+ "</tr>"
+ str
+ "</table>";
container.innerHTML = html;
}
window.onload = function(){
var url = "../../API/article/get.aspx";
getAJAX(function(data){
createData(data);
},url);
}
function delDOM(obj){
var tb1 = document.getElementById("tb1");
var id = obj.parentNode.parentNode.children[0].innerHTML;
getAJAX(function(data){
if(data.result == "ok"){
tb1.children[0].removeChild(obj.parentNode.parentNode);
}
},"../../API/article/del.aspx?id="+id+"");
}
function updateData(obj){
var cover = document.getElementById("cover");
var updateform = document.getElementById("updateform");
console.log(cover);
cover.style.display = "block";
updateform.style.display = "block";
var atitle = obj.parentNode.parentNode.children[1].innerHTML;
var clickcount = obj.parentNode.parentNode.children[2].innerHTML;
var id = obj.parentNode.parentNode.children[0].innerHTML;
var form = document.forms[0];
form.elements[0].value = atitle;
form.elements[1].value = clickcount;
form.elements[2].onclick = function(){
var xhr = createXHR();
xhr.open("POST","../../API/article/update.aspx",true);
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
if(xhr.status == 200){
var data = eval("("+xhr.responseText+")");
if(data.result == "ok"){
updateform.style.display = "none";
cover.style.display = "none";
obj.parentNode.parentNode.children[1].innerHTML = form.elements[0].value;
obj.parentNode.parentNode.children[2].innerHTML = form.elements[1].value;
// var url = "../../API/article/get.aspx";
// getAJAX(function(data){
// createData(data);
// },url);
}
}
}
}
xhr.send("atitle="+form.elements[0].value+"&aclickcount="+form.elements[1].value+"&id="+id+"");
}
}
</script>
</head>
<body>
<div id="cover"></div>
<div id="updateform">
<h3>修改数据</h3>
<form>
<div>标 题：<input type="text"></div>
<div>点击量：<input type="text"></div>
<div><input type="button" value="保存数据"></div>
</form>
</div>
<div id="container">
</div>
</body>
</html>相信看了这些案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
相关阅读：
以上是用Js实现懒加载和跨域的实现步骤的详细内容。更多信息请关注PHP中文网其他相关文章！
声明：
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn