jQuery Ajax的load()方法

load()方法是jQuery中最简单也是最常用的Ajax方法，可以加载远程HTML代码并插入到DOM中。其语法结构为：load(url [，data][，Callback])load()方法参数说明见下表：参数名称类描述url字符串请求的HTML页面数据的URL地址(可选)请求完成时发送到服务器的Object键/值数据Callback(可选)Function回调函数，无论请求成功还是失败1。要加载HTML文档，首先创建一个名为test.html的HTML文件，为后台Ajax加载做准备。代码如下：复制代码如下：DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN ' ' http://www . w3 . org/TR/HTML 4/loose . DTD ' HTML head meta http-equiv=' Content-Type ' Content=' text/HTML；Charset=utf-8' title在此插入title/title/head body div class=' comment '已被注释：/div div class=' comment ' h6 Zhang San:/h6 p class=' para ' sofa。/p/div class=' comment ' h6 Li si:/h6 p class=' para ' bench。/p/div class=' comment ' h6王武：/h6 p class='para' floor。/p /div /body /HTML然后创建一个新的空白页，并在上面添加两个元素：按钮按钮用于触发Ajax事件，id为“resText”的元素用于显示追加的HTML内容。下一步是编写jQuery代码。加载DOM元素时，通过单击id为“send”的按钮调用laod()方法，然后将test.html的内容加载到id为“resText”的元素中。那么代码如下：复制代码如下：DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN ' ' http://www . w3 . org/TR/HTML 4/loose . DTD ' HTML head meta http-equiv=' Content-Type ' Content=' text/HTML；charset=UTF-8 ' title在此插入标题/title脚本类型='text/javascript ' src=' http :/jquery-1 . 3 . 2 . js '/脚本/Head输入类型=' button' id=' send '值=' Ajax get'/div id=' restext'/div脚本类型=' text/JavaScript '！- $(文档)。ready(function(){ $('#send '))。单击(function(){ $('#resText ')。load(' test . html ')；});});/////script/body/html html点击按钮后，出现如下所示的界面：。

显然，load()方法完成了繁琐的工作。开发人员只需要使用jQuery选择器来指定HTML片段的目标位置，然后将要加载的文件的URL作为参数传递给load()方法。2.过滤加载的HTML文档。最后一个例子是将test.html页面的内容加载到id为“resText”的元素中。如果只需要在test.html页面中加载一些元素，可以使用load()方法的URL参数来达到目的。通过为URL参数指定选择器，您可以轻松地从加载的HTML文档中过滤出所需的内容。load()方法的url参数具有“URL选择器”的语法结构。请注意，网址和选择器之间有一个空格。例如，您只需要在test.html页面中用类“para”加载内容，这可以通过使用以下代码来完成：$ ('# restext ')。load(' test . html . para ')；运行效果如下：。

3.传输模式load()方法的传输模式是根据参数数据自动指定的。如果没有传递参数，它将由GET传递。否则，它会自动转换为开机自检模式。复制代码如下： //不带参数传递，然后GET模式$ ('# restext ')。load ('test.php '，function () {//.});//如果传递参数，就是POST模式$ ('# restext ')。load ('test.php '，{name3360' xht555 '，age3360' 24'}，function () {//.});4.回调参数对于加载完成后必须继续的操作，load()方法提供了一个回调函数，该函数有三个参数，分别表示请求返回的内容、请求状态和XMLHttpRequest对象。JQuery代码如下：复制代码如下： $ ('# restext ')。load ('test.html '，函数(responsetext，textstatus，Xmlhttprequest){//responsetext :请求返回的内容//textstatus 3360请求状态：成功、错误、未修改和超时//xmlhttprequest对象})；注意：在load()方法中，无论Ajax请求成功与否，只要请求完成，就会触发回调函数。