jQuery+ajax實現動態執行指令碼的方法_jquery

來源:互聯網
上載者:User

本文執行個體講述了jQuery+ajax實現動態執行指令碼的方法。分享給大家供大家參考。具體分析如下:

有時候,在頁面初次載入時就取得所需的全部JavaScript也是沒有必要的。具體需要取得哪個指令碼,要視使用者的操作而定。雖然可以在需要時動態地引人<script>標籤,但注人所需代碼的更優雅的方式則是通過jQueiy直接載入.js檔案。

向頁面中注人指令碼與載入HTML片段一樣簡單。但在這種情況下,需要使用全域函數 $.getScript(),這個全域函數與它的同輩函數類似,接受一個URL參數以尋找指令檔,參見如下代碼:

複製代碼 代碼如下:
$(document).ready(function() {
$('#letter-c a').click(function(event) { event.preventDefault();
$.getScript('c.js');
});
});

在前一個例子中,接下來要做的應該是處理結果資料,以便有效地利用載入的檔案。然而, 對於一個指令檔來說,這個過程是自動化;換句話說,指令碼會自動執行。
以這種方式取得的指令碼會在當前頁面的全域環境下執行。這意味著指令碼有權訪問在全域環境中定義的函數和變數,當然也包括jQuery自身。因而,我們可以模仿JSON的例子來準備指令碼代碼,以便在指令碼執行時將HTML插人到頁面中。現在,將以下指令碼代碼儲存到c.js中:

複製代碼 代碼如下:
var entries = [
{
"term": "CALAMITY",
"part": "n.",
 
 
"definition": "A more than commonly plain and...
},
{
"term": "CANNIBAL",
"part": "n.",
"definition": "A gastronome of the old school who..."
},
{
"term": "CHILDHOOD",
"part": "n.",
"definition": "The period of human life intermediate..."
}
//省略的內容
];
var html ='';
$.each(entries, function() {
html += '<div class="entry">';
html += '<h3 class="term">' + this.term + '</h3>';
html += '<div class="part">' + this.part + '</div>';
html += '<div class="definition">' + this.definition + '</div>';
html += '</div>';
});
$('#dictionary').html(html);

最後,單擊c連結,應該會看到我們預期的結果。

希望本文所述對大家的jQuery程式設計有所協助。

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.