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

最新推荐文章于 2022-09-27 20:55:25 发布

原创最新推荐文章于 2022-09-27 20:55:25 发布 · 4.2k 阅读

1 ·

CC 4.0 BY-SA版权

Ubuntu 专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何使用jQuery AJAX从服务器获取文件数据并将其显示在客户端的HTML页面上。通过创建一个HTML页面，引入jQuery库，定义一个点击事件处理函数，当点击按钮时，使用`.load()`方法从指定URL加载`demo.txt`文件内容，并将其显示在页面的指定元素中。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题背景：

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