您的位置：首页 > Web前端 > JQuery

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

2015-04-16 13:08 495 查看

问题背景：

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

验证一下即可

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航