通过jquery ajax在从服务器获取一个文件的数据，显示到客户端的页面

来源：互联网发布：亚太网络法律研究中心编辑：程序博客网时间：2024/04/26 11:03

问题背景：

打开记事本，写一个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。

验证一下即可

0 0