事先宣告：本文由初學者撰寫，為一次探索的程序，可能有不嚴謹和準確的地方，望讀者多多諒解并積極指正！

場景描述：

在一次前端開發程序中，我使用了一個網頁模板，該模板包含一個主頁和四個子頁面，如下圖：

具體的效果是，點擊主頁中的一個按鈕會在彈框內顯示子頁面的內容，如下圖：

具體的實作是在主頁面中留出面板，并在點擊按鈕時通過jquery的load方法將子頁面加載到面板中：

index.html 部分代碼

<div >
        
        <div ></div> <!-- this is the left fold -->
        
        <div ></div> <!-- this is the right fold -->
        
        <div >
            <!-- content will be loaded using javascript -->
        </div>

        <a  href="https://www.cnblogs.com/moonfair/p/#0"></a>
</div> <!-- .cd-folding-panel -->

main.js 部分代碼

var foldingContent = foldingPanel.find('.cd-fold-content');
foldingContent.load(url+' .cd-fold-content > *', function(event){
    setTimeout(function(){
        $('body').addClass('overflow-hidden');
        foldingPanel.addClass('is-open');
        mainContent.addClass('fold-is-open');
    }, 100);
});

問題描述：

問題主要出在子頁面上，如上圖展示過的，我想要在子頁面實作獲取用戶輸入資訊，并提交到服務器進行查詢，然后將獲取到的json資訊以表格的形式展示出來，大概要求的效果是這樣的（不要在意表格的內容，那只是示例）：

于是我就把相應的代碼寫到了item1.html的<script>標簽中

item1.html（這部分可以不看）

<!doctype html>
<html lang="en" >
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="https://www.cnblogs.com/moonfair/p/css/reset.css"> <!-- CSS reset -->
    <link rel="stylesheet" href="https://www.cnblogs.com/moonfair/p/css/style.css"> <!-- Resource style -->
    <script src="https://www.cnblogs.com/moonfair/p/js/modernizr.js"></script> <!-- Modernizr -->
      
    <title>在線快遞查詢系統</title>
</head>
<body>
    <div >
        <h2>查快遞</h2>
        <div style="width:80%;height:100px;margin:30px">
            <form id="form1" onsubmit="return false" action="##">
                <input required='' type='text' id="phoneNumber">
                <label alt='請輸入手機號碼' placeholder='手機號碼'></label>
                <input id="queryBtn" type="submit" onclick="postQueryMsg()" value="https://www.cnblogs.com/moonfair/p/Submit" >
            </form>
            <div style="height:50px">
            </div>
            <table id="table"  style="display:none">
                <tr>
                     <th>BrandName</th>
                     <th>Modul</th>
                     <th>Quantity</th>
                     <th>Datecode</th>
                     <th>Remark</th>
                </tr>
            </table>
        </div>   
    </div>
<script src="https://www.cnblogs.com/moonfair/p/js/jquery-2.1.1.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.0.0/jquery.min.js"></script>
<script src="https://www.cnblogs.com/moonfair/p/js/main.js"></script> <!-- Resource jQuery -->
<script>
function postQueryMsg(){
    
     $.ajax({
         type:"get",
         url:"resources/haha.json",
         dataType:"json",
         async:false,
         success:function(data){
             var table=document.getElementById("table");
             table.style.display = 'block';
             for(var i=0;i<data.length;i++){
                                     var row=table.insertRow(table.rows.length);
                                     var c1=row.insertCell(0);
                                     c1.innerHTML=data[i].BrandName;
                                     var c2=row.insertCell(1);
                                     c2.innerHTML=data[i].Modul;
                                     var c3=row.insertCell(2);
                                     c3.innerHTML=data[i].Quantity;
                                     var c4=row.insertCell(3);
                                     c4.innerHTML=data[i].Datecode;
                                     var c5=row.insertCell(4);
                                     c5.innerHTML=data[i].Remark;
                                 }
         },
         error:function(errorThrown){
         console.log(errorThrown);
          }
      });
    }
</script>
</body>
</html>

View Code

于是運行在Chrome時出現了 “點擊Submit按鈕沒有反應” 的問題，按F12打開控制臺，查找到如下錯誤：

發現是由于沒找到 postQueryMsg（我的按鈕點擊方法）的定義造成的，然后我就尋思可能是寫在 item1.html 中的腳本失效了，

上網搜索一下，發現問題在于 jquery 的 load 方法會把被加載頁面的 script 腳本忽視掉，而網路上給出的解決方案也大都不奏效或不能令我滿意，

解決程序：

問題的解決是從我開始深入認識 load 方法開始的：

以下是W3School給出的關于load方法的定義

load() 方法通過 AJAX 請求從服務器加載資料，并把回傳的資料放置到指定的元素中，

由是我注意到這個方法似乎是把被加載頁面 “放入” 加載頁面，那么主體按理來說是加載頁面，因此如果我把要在被加載頁面運行的腳本放到加載頁面里，應當就可以正常運行了，而控制臺中的報錯資訊也證實了我的想法（出錯位置是在 index.html 而不是 item1.html）

為了保持代碼美觀，這次我使用了外置 js 腳本：

index.html 部分代碼

<script src="https://www.cnblogs.com/moonfair/p/js/itemAction.js"></script>

itemAction.js 內容

function postQueryMsg(){
     
 $.ajax({
     type:"get",
     url:"resources/haha.json",
     dataType:"json",
     async:false,
     success:function(data){
         var table=document.getElementById("table");
         table.style.display = 'block';
         for(var i=0;i<data.length;i++){
                                 var row=table.insertRow(table.rows.length);
                                 var c1=row.insertCell(0);
                                 c1.innerHTML=data[i].BrandName;
                                 var c2=row.insertCell(1);
                                 c2.innerHTML=data[i].Modul;
                                 var c3=row.insertCell(2);
                                 c3.innerHTML=data[i].Quantity;
                                 var c4=row.insertCell(3);
                                 c4.innerHTML=data[i].Datecode;
                                 var c5=row.insertCell(4);
                                 c5.innerHTML=data[i].Remark;
                             }
     },
     error:function(errorThrown){
     console.log(errorThrown);
      }
  });
}

如此就能正常運行了

待解決的問題：

就標題而言，這次探索已經圓滿完成，但事實上仍然有一個問題懸而未決，希望路過的大佬能替我指正：

問題一：

在上文中 “問題描述” 部分中，我刻意提及 “在Chrome中” 出現點擊按鈕無反應的問題，原因是我在 IE 瀏覽器中打開界面時是可以運行的，并且控制臺中沒有任何報錯資訊：

希望各位大佬不吝賜教，謝謝！

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/2388.html

標籤：jQuery

上一篇：jQuery仿QQ音樂播放器