返回宝典

jQuery Load 加载

上一节 下一节

jQuery AJAX load()方法

jQuery中的load()方法很牛叉,是一个简而强大的AJAX方法。load()方法可从服务器端加载数据,并把这些数据插入到指定元素中。


load()方法的语法:

$(selector).load(URL, data, callback);

URL参数是必选参数,指代要加载的数据的url地址;data和callback是非必须参数。data是一组键值配对的数据,换言之,就是一个字典类型的数据,而这个data代表的就是发送给服务器的请求参数。

如下所示,这是放在服务器上的一个示例txt文件,名曰“fan-qing-fu-ming.txt”

<h2>反清复明</h2>
<p id="p1">地振高冈,一派西山千古秀</p>
<p id="p2">门朝大海,三合河水万年流</p>


如下所示,用load()方法来加载此文件“fan-qing-fu-ming.txt”

$("#div1").load("/static/fan-qing-fu-ming.txt");

运行一下


还可以如下所示,只加载数据中的id为p1的这个元素。

$("#div1").load("/static/fan-qing-fu-ming.txt #p1");

运行一下


callback代表回调函数,而回调函数中会有3个形参,接收回调时返回的参数,分别如下:

  • responseTxt - 如果请求成功,则返回的结果内容
  • statusTxt - 返回请求状态,如success或者error
  • xhr - 返回XMLHttpRequest对象(这个对象就指该次异步请求)


举例如下:

$("#div1").load("/static/fan-qing-fu-ming.txt", function(responseTxt, statusTxt, xhr){
    if(statusTxt == "success")
        alert("load()方法加载成功");
    if(statusTxt == "error")
        alert("加载错误:" + xhr.status + ": " + xhr.statusText);
});

运行一下


上述的3个形参responseTxt、statusTxt、xhr的名称可以自定义的,只要保证位置顺序正确就行了,叫啥都ok的,比如叫result、status、req也ok的;重要的事情再说一遍,叫什么无所谓,位置顺序对上就可以了!


jQuery Load 加载

上一节 下一节