1. 程式人生 > >通過jquery ajax在從伺服器獲取一個檔案的資料,顯示到客戶端的頁面

通過jquery ajax在從伺服器獲取一個檔案的資料,顯示到客戶端的頁面

           問題背景:

                       開啟記事本,寫一個html頁面,從本地讀一個檔案,顯示的頁面上,這個操作很容易實現。但是要想從讀伺服器上的一個檔案,然後想顯示到頁面上。光用普通的javascript技術和html知識是不夠用的。所以本文的目的就是解決這個問題,用jquery ajax來實現。

                  本次實驗是在ubuntu下使用apache

                    什麼是jquery,網上很多,隨便搜一下。簡單來說就是一個javascript庫,要使用它就得下載,它是一個.js檔案。在我的網盤就可以下載:

jquery庫檔案   。

                   什麼是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。

驗證一下即可