load 方法真的是十分的简单易用,新人们都会一下子就爱上它,这让我们可以方便的获取其他页面的数据。也可以将某些数据方便的应用在不同的页面之中,只要修改数据源,所有位置就全都变了,真的很棒!

如果有需要,它也是可以变得蛮强的。比如我们可以向服务器发送数据,然后获得结果,对,就像我们提交表单一样。

$('#box').load('data.html', {a: 123, b: 456})

哈,就是第二个参数给出一个对象,那么对象中的数据就会以 POST 方法发送到服务器了,这好方便。但如果需要用 get 方法呢?文档中说如果数据不是对象形式,则以 GET 方法发送,这让我很困惑,那怎么知道数据对应的名称呢?懒得研究了,因为这不重要啦。毕竟 GET 方法就是用网址传递数据的嘛,所以我们直接构造一下要请求的网址就好了。

$('#box').load('data.html?a=123&b=456')

这很容易的,只要你理解了 GET 方法,上面这样的操作应该是很自然的。那么要传递的数据这个参数可以根据需要设置或者省略哦。

还有一个参数,是一个函数,当请求完成之后执行的函数。因为网络请求是需要一定时间才能完成的。这个时间长度并不确定。而某些操作需要在请求完成的时候再执行,这个时机很重要。所以我们干脆把这事一起交代给 load,你完成请求以后顺便做一下什么什么,你出去办完事在回来的路上顺便带个西瓜回来。差不多就是这样。所以这个函数叫作回调函数(Callback)。

最简单的,我们可以让这个函数输出一个提示,告诉我们加载完成了。

$('#box').load('data.html', function(){
  console.log('加载完成')
})

但是事实上,我们要处理的情况可能更复杂,所以这个回调函数可以获得几个重要的参数:

  • 第一个参数事请求到的内容,就是得到的网页代码,是个字符串;
  • 第二个参数是状态,也是个字符串,来说明这次请求是否成功;
  • 第三个参数是个 xhr 对象,就是更详细的说明这次请求的相关信息,你可以自己输出出来看一下。

这个方法我们就学会了,它真的很简单,很方便。但是它也有着很大的局限性。可以看出,这个方法侧重的是将网络数据放入某个元素。注意,放入某个元素这里没法省略。所以呢,这又是一个为了让某一种特定操作变得方便的方法。

事实上,我们可以把这个操作分为两部分,获取数据,放入元素内。后边的操作,我们早就会了,而获取数据则是我们马上要学习的。

可能你觉得现在很好了,简单,够用,没必要把两个操作拆开。但是如果我们希望在这两个步骤中再加入一步:对数据的处理呢?以及我们想把一次获得的数据放入多个元素呢,或者获取数据之后并没有想放入任何一个元素之中呢?

【本章助记卡片:卡片 for 第一百六十二章