通過jquery ajax在從伺服器獲取一個檔案的資料,顯示到客戶端的頁面
問題背景:
開啟記事本,寫一個html頁面,從本地讀一個檔案,顯示的頁面上,這個操作很容易實現。但是要想從讀伺服器上的一個檔案,然後想顯示到頁面上。光用普通的javascript技術和html知識是不夠用的。所以本文的目的就是解決這個問題,用jquery ajax來實現。
本次實驗是在ubuntu下使用apache
什麼是jquery,網上很多,隨便搜一下。簡單來說就是一個javascript庫,要使用它就得下載,它是一個.js檔案。在我的網盤就可以下載:
什麼是ajax,它是一種與伺服器互動的機制。具體可百度。
接下來進入正題:
開啟終端,cd /var/www/html
mkdir forjQuery 此為工作目錄
新建一個html檔案,叫做:tryforjquery.htm,內容如下:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="jquery-2.1.3.js">
</script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$('#test').load('http://localhost/forjQuery/demo.txt');
})
})
</script>
</head>
<body>
<h3 id="test">請點選下面的按鈕,通過 jQuery AJAX 改變這段文字。</h3>
<button id="btn1" type="button">獲得外部的內容</button>
</body>
</html>
在把下載的jquery庫檔案放到這個目錄,在新建一個html頁面要請求載入的檔案,我們就叫demo.txt吧。內容為:
hello,world<br>
hello,world,world
最後,開啟瀏覽器,輸入http://localhost/forjQuery/tryforjquery.htm。
驗證一下即可