第一百六十一章 加载

我们知道,当点击一个链接或者提交一个表单,都会导致页面的刷新,而这会让一个页面彻底重新开始,正在进行的所有运算,都会被重置。

这就很难受了。毕竟有些时候我们并不希望跳转到到别的页面,而在当前页面中还有未完成的操作。可是这时候我们又需要向服务器提交一些数据,获得一些反馈。或者更简单一些,就是需要获取服务器上的一些数据。

整理一下需求,在不发生跳转的情况下,向服务器发送数据和获取服务器返回的数据。这要用到 Ajax。这个概念不深入的解释,反正知道用它就可以实现上面的目的就好了。

在这一章,我们使用 jQuery 来实现一个最简单的需求。

但是首先我们要明确几个细节。想使用 Ajax 就要有服务器,本地文件的形式是不行的。难道为了学习这项技术去购买一个服务器吗?当然不是,这里所说的服务器,应该是可以提供 http 服务的软件。这个就很简单了,去网上搜索各种 http 服务器软件,大概也就几百 kb 大小,就足够我们用了。

我来介绍两个简单的:

Web Server for Chrome,这是一款浏览器扩展,用起来十分的方便,虽然是全英文的,但其实只要打开以后,选择你网站跟目录的文件夹就可以了。服务会自动启动,也会把访问地址显示出来,可以说十分的新人友好了。高级的设置它也有,也就是说还可以满足我们复杂的需求。

Express,这是 VS Code 的一个插件,我们通过打开文件夹的方式打开项目的时候,可以用 F1 唤出命令,输入 Express,然后选择 Express: Host Current Workspace and Open in Browser 就行了。这会以当前文件夹为网站根目录启动一个 http 服务器,并在浏览器中打开。

这样和我们以前直接访问文件会有好多区别,比如协议不同了(// 前面的部分),比如根目录位置不同……反正这样就可以用 Ajax 了,就可以更帅了。

然后讲一下跨域。跨域就是跨域名[1]。就是不能够用 js 请求与当前域名不同的网址下的资源。这就好像你京东不能从我淘宝的库房拿东西给你的消费者一样。对,这是出于安全考虑做的设定。这个是可以绕过去的,但是我们不讲。

这一章篇幅快用完了,咱们得做点啥开心一下啊。于是我先有一个页面:

<!DOCTYPE html><html lang="zh"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>这个页面假装是数据</title></head><body>这里是数据的内容<div id="zy">重要数据!</div></body></html>

保存为 data.html

然后再来一个页面,是用来被我们访问的:

<!DOCTYPE html><html lang="zh"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>我们来访问这个页面</title><script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script></head><body>这是页面中原有的数据<div id="box"></div><script>$(document).ready(function(){$('#box').load('data.html')})</script></body></html>

代码好像有点长,其实真正新内容就一句:$('#box').load('data.html'),就是把后面这个网址中的内容,放进前面这个选择器对应的元素里。大家可以自己动手看看效果哦。

但是可能我们并不需要载入一个页面的所有数据,怎么办?$('#box').load('data.html #zy') 注意空格哦~这样就可以载入指定元素中的内容了。那么是否支持使用其他选择器呢?大家动手试试看吧。

未经允许不得转载-易看设计:易看设计 - 创意.极致.传达 » 第一百六十一章 加载

打赏

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏