用Js實現懶加載和跨域的實現步驟-js教程-PHP中文網

首頁

web前端

js教程

用Js實現懶加載和跨域的實現步驟

php中世界最好的语言

Dec 02, 2017 am 10:04 AM

javascript 載入步驟

今天教大家怎麼用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=&#39;"+css+"&#39;>"+b[i].ID+"</td>"
                                                + "<td class=&#39;"+css+"&#39;>"+b[i].ATitle+"</td>"       
                                                + "<td class=&#39;"+css+"&#39;>"+b[i].AClickCount+"</td>"     
                                                + "<td class=&#39;"+css+"&#39;>"+b[i].ATime+"</td>"
                                                + "<td class=&#39;"+css+"&#39;>"
                                                + "<a href=\"javascript:;\" onclick=&#39;updateData(this)&#39;>修改</a> | <a href=\"javascript:;\" onclick=&#39;delDOM(this)&#39;>删除</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中文網其它相關文章！

熱AI工具

熱工具

熱門話題

gmail信箱登陸入口在哪裡

7784

Java教學

1644

CakePHP 教程

1400

Laravel 教程

1297

PHP教程

1234

Related knowledge

如何在iPhone中使Google地圖成為預設地圖 Apr 17, 2024 pm 07:34 PM

iPhone上的預設地圖是Apple專有的地理位置供應商「地圖」。儘管地圖越來越好，但它在美國以外的地區運作不佳。與谷歌地圖相比，它沒有什麼可提供的。在本文中，我們討論了使用Google地圖成為iPhone上的預設地圖的可行性步驟。如何在iPhone中使Google地圖成為預設地圖將Google地圖設定為手機上的預設地圖應用程式比您想像的要容易。請依照以下步驟操作–先決條件步驟–您必須在手機上安裝Gmail。步驟1–開啟AppStore。步驟2–搜尋“Gmail”。步驟3–點選Gmail應用程式旁

升級微信最新版本的步驟（輕鬆掌握微信最新版本的升級方法） Jun 01, 2024 pm 10:24 PM

不斷推出新版本以提供更好的使用體驗，微信作為中國的社交媒體平台之一。升級微信至最新版本是非常重要的，家人和同事的聯繫、為了保持與朋友、及時了解最新動態。 1.了解最新版本的特性與改進了解最新版本的特性與改進非常重要，在升級微信之前。效能改進和錯誤修復，透過查看微信官方網站或應用程式商店中的更新說明、你可以了解新版本所帶來的各種新功能。 2.檢查目前微信版本我們需要檢查目前手機上已安裝的微信版本、在升級微信之前。點擊，打開微信應用“我”然後選擇，菜單“關於”在這裡你可以看到當前微信的版本號，。 3.打開應

此 Apple ID 尚未在 iTunes Store 中使用：修復 Jun 10, 2024 pm 05:42 PM

使用AppleID登入iTunesStore時，可能會在螢幕上拋出此錯誤提示「此AppleID尚未在iTunesStore中使用」。沒有什麼可擔心的錯誤提示，您可以按照這些解決方案集進行修復。修正1–更改送貨地址此提示出現在iTunesStore中的主要原因是您的AppleID個人資料中沒有正確的地址。步驟1–首先，開啟iPhone上的iPhone設定。步驟2–AppleID應位於所有其他設定的頂部。所以，打開它。步驟3–在那裡，打開“付款和運輸”選項。步驟4–使用面容ID驗證您的存取權限。步驟

Shazam應用程式在iPhone中無法運作：修復 Jun 08, 2024 pm 12:36 PM

iPhone上的Shazam應用程式有問題？ Shazam可協助您透過聆聽歌曲找到歌曲。但是，如果Shazam無法正常工作或無法識別歌曲，則必須手動對其進行故障排除。修復Shazam應用程式不會花費很長時間。因此，無需再浪費時間，請按照以下步驟解決Shazam應用程式的問題。修正1–禁用粗體文字功能iPhone上的粗體文字可能是Shazam無法正常運作的原因。步驟1–您只能從iPhone設定執行此操作。所以，打開它。步驟2–接下來，開啟其中的「顯示和亮度」設定。步驟3–如果您發現啟用了“粗體文本

Win11系統管理員權限取得步驟詳解 Mar 08, 2024 pm 09:09 PM

Windows11作為微軟最新推出的作業系統，深受廣大用戶喜愛。在使用Windows11的過程中，有時候我們需要取得系統管理員權限，以便進行一些需要權限的操作。接下來將詳細介紹在Windows11中取得系統管理員權限的步驟。第一步，點擊“開始功能表”，在左下角可以看到Windows圖標，點擊該圖標即可開啟“開始功能表”。第二步，在「開始功能表」中尋找並點擊「

iPhone螢幕截圖不起作用：如何修復 May 03, 2024 pm 09:16 PM

螢幕截圖功能在您的iPhone上不起作用嗎？截圖非常簡單，因為您只需同時按住「提高音量」按鈕和「電源」按鈕即可抓取手機螢幕。但是，還有其他方法可以在設備上捕獲幀。修復1–使用輔助觸控使用輔助觸控功能截取螢幕截圖。步驟1–轉到您的手機設定。步驟2–接下來，點選以開啟「輔助功能」設定。步驟3–開啟「觸摸」設定。步驟4–接下來，開啟「輔助觸控」設定。步驟5–打開手機上的「輔助觸控」。步驟6–打開“自訂頂級選單”以存取它。步驟7–現在，您只需將這些功能中的任何一個連結到螢幕擷取即可。因此，點擊那裡的首

iPhone中缺少時鐘應用程式：如何修復 May 03, 2024 pm 09:19 PM

您的手機中缺少時鐘應用程式嗎？日期和時間仍將顯示在iPhone的狀態列上。但是，如果沒有時鐘應用程序，您將無法使用世界時鐘、碼錶、鬧鐘等多項功能。因此，修復時鐘應用程式的缺失應該是您的待辦事項清單的首位。這些解決方案可以幫助您解決此問題。修復1–放置時鐘應用程式如果您錯誤地從主畫面中刪除了時鐘應用程序，您可以將時鐘應用程式放回原位。步驟1–解鎖iPhone並開始向左側滑動，直到到達「應用程式庫」頁面。步驟2–接下來，在搜尋框中搜尋「時鐘」。步驟3–當您在搜尋結果中看到下方的「時鐘」時，請按住它並

在Illustrator中載入插件時出錯[修復] Feb 19, 2024 pm 12:00 PM

啟動AdobeIllustrator時是否會彈出載入插件時出錯的訊息？一些Illustrator用戶在打開該應用程式時遇到了此錯誤。訊息後面緊跟著一系列有問題的插件。此錯誤提示表示已安裝的插件有問題，但也可能是由於VisualC++DLL檔案損壞或首選項檔案受損等其他原因所引起。如果遇到此錯誤，我們將在本文中指導您修復問題，請繼續閱讀以下內容。在Illustrator中載入外掛程式時出錯如果您在嘗試啟動AdobeIllustrator時收到「載入外掛程式時出錯」的錯誤訊息，您可以使用以下用途：以管理員身

See all articles

用Js實現懶加載和跨域的實現步驟

熱AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題