欢迎来到酱油妹!织梦模板,dede模板下载,织梦cms模板,免费网站模板下载站

酱油妹

Js达成懒加载和跨域

企业模板

Js达成懒加载和跨域

跨域

Js达成懒加载和跨域

懒加载

<html lang="en">

<!DOCTYPE html>

<meta charset="UTF-8">

<head>

<script src="ajax.js"></script>

<title>跨域</title>

getAJAX(function(data){

<script>

},"http://10.9.156.51:8086/API/article/add.aspx");

console.log(data);

</head>

</script>

<body>

</html>

</body>

<!DOCTYPE html>

<head>

<html lang="en">

<title>查看数据</title>

<meta charset="UTF-8">

#container{

<style>

margin: 20px auto;

width: 992px;

th,td{

}

font-size:14px;

background:#fff;

text-align: center;

height: 30px;

}

"微软雅黑";

color:#00468C;

a{

}

text-decoration: none;

color:#00468C;

a:hover{

}

text-decoration: underline;

background:#ff6600;

.even{

#cover{

}

left: 0;

position: absolute;

width:100%;

TOP: 0;

background: #000;

height: 100%;

filter:alpha(opacity=60);

opacity:0.6;

}

display: none;

width:300px;

#updateform{

border:solid 1px #CCC;

height: 300px;

left:50%;

position: absolute;

TOP:50%;

margin-left: -150px;

display: none;

margin-TOP: -200px;

}

background: #fff;

display: block;

#updateform h3{

border-bottom:solid 1px #CCC;

border-bottom:solid 1px #CCC;

line-height: 38px;

height: 38px;

margin: 0;

background: #ff6600;

color:#fff;

"">微软雅黑;

}

font-size: 16px;

padding-TOP: 10px;

#updateform form p{

</style>

}

<script>

<script src="ajax.js"></script>

var str = "";

function createData(b){

var css = "";

for(var i = 2; i < b.length; i++){

css = "even"

if(i % 2 == 0){

str += "<tr>"

}

+ "<td class='"+css+"'>"+b[i].ATitle+"</td>"

+ "<td class='"+css+"'>"+b[i].ID+"</td>"

+ "<td class='"+css+"'>"+b[i].ATime+"</td>"

+ "<td class='"+css+"'>"+b[i].AClickCount+"</td>"

+ "<a href=\"javascript:;\" onclick='updateData(this)'>修改</a> | <a href=\"javascript:;\" onclick='delDOM(this)'>删除</a>"

+ "<td class='"+css+"'>"

+ "</tr>";

+ "</td>"

var html = "<table id=\"tb1\" cellspacing=\"1\" style=\"width:990px; background:#000;\">"

}

+ "<th>编号</th>"

+ "<tr>"

+ "<th>点击量</th>"

+ "<th>标题</th>"

+ "<th>操作</th>"

+ "<th>发布时间</th>"

+ str

+ "</tr>"

container.innerHTML = html;

+ "</table>";

window.onload = function(){

}

getAJAX(function(data){

var url = "../../API/article/get.aspx";

},url);

createData(data);

function delDOM(obj){

}

var id = obj.parentNode.parentNode.children[0].innerHTML;

var tb1 = document.getElementById("tb1");

if(data.result == "ok"){

getAJAX(function(data){

}

tb1.children[0].removeChild(obj.parentNode.parentNode);

}

},"../../API/article/del.aspx?id="+id+"");

var cover = document.getElementById("cover");

function updateData(obj){

console.log(cover);

var updateform = document.getElementById("updateform");

updateform.style.display = "block";

cover.style.display = "block";

var atitle = obj.parentNode.parentNode.children[1].innerHTML;

var id = obj.parentNode.parentNode.children[0].innerHTML;

var clickcount = obj.parentNode.parentNode.children[2].innerHTML;

var form = document.forms[0];

form.elements[1].value = clickcount;

form.elements[0].value = atitle;

var xhr = createXHR();

form.elements[2].onclick = function(){

xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

xhr.open("POST","../../API/article/update.aspx",true);

if(xhr.readyState == 4){

xhr.onreadystatechange = function(){

var data = eval("("+xhr.responseText+")");

if(xhr.status == 200){

updateform.style.display = "none";

if(data.result == "ok"){

cover.style.display = "none";

obj.parentNode.parentNode.children[2].innerHTML = form.elements[1].value;

obj.parentNode.parentNode.children[1].innerHTML = form.elements[0].value;

// var url = "../../API/article/get.aspx";

// createData(data);

// getAJAX(function(data){

}

// },url);

}

}

xhr.send("atitle="+form.elements[0].value+"&aclickcount="+form.elements[1].value+"&id="+id+"");

}

}

}

</script>

<body>

</head>

<p id="updateform">

<p id="cover"></p>

<form>

<h3>修改数据</h3>

<p>点击量:<input type="text"></p>

<p>标&nbsp;题:<input type="text"></p>

</form>

<p><input type="button" value="保存数据"></p>

<p id="container">

</p>

</p>

</html>

</body>


希望以上内容可以解决您的问题!
如有其他问题欢迎大家一起交流学习!
作者:酱油妹 来源:www.jiangyoumei.com 关注: 时间:2021-04-12 16:31
版权声明:凡注明来源为www.jiangyoumei.com的均为本站原创,转载请注明来源。
本文网址:http://www.jiangyoumei.com/HTML/HTML5/20210412/11912.html
凡本站提供教程均已验证教程的准确性。
相关教程
在线客服

织梦模板 整站模板 新手教程 使用技巧