JavaScript強化教程——jQuery AJAX 實例

時間 2021-01-02

標籤 html jquery 服務器異步 ide 函數 spa orm 視頻 htm 欄目 JavaScript 简体版

原文原文鏈接

本文爲 H5EDU 機構官方 HTML5培訓教程，主要介紹：JavaScript強化教程 —— jQuery AJAX實例

什麼是 AJAX？
AJAX = 異步 JavaScript 和 XML（Asynchronous JavaScript and XML）。
簡短地說，在不重載整個網頁的狀況下，AJAX 經過後臺加載數據，並在網頁上進行顯示。
使用 AJAX 的應用程序案例：谷歌地圖、騰訊微博、優酷視頻、人人網等等。html

jQuery load() 方法
jQuery load() 方法是簡單但強大的 AJAX 方法。
load() 方法從服務器加載數據，並把返回的數據放入被選元素中。
語法：
$(selector).load(URL,data,callback);
必需的 URL 參數規定您但願加載的 URL。
可選的 data 參數規定與請求一同發送的查詢字符串鍵/值對集合。
可選的 callback 參數是 load() 方法完成後所執行的函數名稱。
這是示例文件（"demo_test.txt"）的內容：
<h2>jQuery and AJAX is FUN!!!</h2>
<p id="p1">This is some text in a paragraph.</p>
下面的例子會把文件 "demo_test.txt" 的內容加載到指定的 <div> 元素中：
示例
$("#div1").load("demo_test.txt");

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script>
$(document).ready(function(){
  $("#btn1").click(function(){
    $('#test').load('/example/jquery/demo_test.txt');
  })
})
</script>
</head>

<body>

<h3 id="test">請點擊下面的按鈕，經過 jQuery AJAX 改變這段文本。</h3>
<button id="btn1" type="button">得到外部的內容</button>

</body>
</html>