首页

jQuery与Ajax:“特别的”load()方法(筛选文档、传递方法、回调函数)

seo达人

“大名鼎鼎的”jQuery因为其极简的引用方式而在N年前备受追捧,而今“浪潮”过去,还剩下什么?

我认识jQuery,只是在去年接触ajax时了解,从而感兴趣,进而深入探究(其实也没多深入,只是相关的看了一下)。不得不说,jQuery对ajax支持的四个type:post(一般用于发送)、get(一般常用于接收)、put(修改)、delete(删除) 令我非常震撼,太**实用了。

这其中,post和get是最常用的(因为好像说不是所有的浏览器都支持put和delete),具体的我在 这篇文章 中以JS方式提到,这里不再赘述。



load()

load()方法时jQuery中操作上最为简单的Ajax方法,能载入其他的HTML代码并插入到DOM中。其基本格式为:



load(url [,data] [,callback])

1

参数意义:



url: String类型,请求HTML页面的URL地址

data(可选): Object类型,发送至服务器的key/value数据

callback(可选): Function,请求完成时的回调函数,无论请求成功或失败

为什么说它是“特别的”呢?因为它只用于文档流(html)的操作,而且,既可以是get操作,又可以是post操作:



基本示例:



//如果是jsp代码,这里要加一行:

// <%@ page contentType="text/html;charset=UTF-8" language="java" %>

<html>

<head>

    <title>请求的文件</title>

</head>

<body>

    <div class="comment">

        <h6>张三:</h6>

        <p class="para">沙发</p>

    </div>

    <div class="comment">

        <h6>李四:</h6>

        <p class="para">板凳</p>

    </div>

    <div class="comment">

        <h6>王五:</h6>

        <p class="para">地板</p>

    </div>

</body>

</html>



//如果是jsp代码,这里要加一行:

//<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<html>

<head>

    <title>发送ajax的文件</title>

    <script src="js/jquery-2.1.0.js" type="text/javascript"></script>

    //如果是jsp代码,上面这一行要换成:<script src="<%=request.getContextPath()%>/js/jquery-2.1.0.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(function () {

            $("#send").on("click", function () {

                $("#resText").load("test.jsp");

            });

        });

    </script>

</head>

<body>

    <input type="button" id="send" value="Ajax获取">

    <div class="comment">已有评论:</div>

    <div id="resText"></div>

</body>

</html>



上面是“载入文档”,它还可以“筛选载入的文档”:

如果只需要加载某页面内的某些元素,那么可以使用load()方法的URL参数来达到目的。通过为 URL参数 指定选择符,就可以很方便地从加载过来的HTML文档里筛选出所需要的内容。



load()方法的URL参数的语法结构为:“url selector”。注意,URL和选择器之间有一个空格:



$(function () {

    $("#send").on("click", function () {

        $("#resText").load("test.html .para");

    });

});



传递方式:

load()方法的传递方式根据 参数data 来自动指定。如果没有参数传递,则采用GET方式传递;反之,则会自动转换为POST方式:



//无参数传递,GET方式

 $("#resText").load("test.html .para", function(){

//....

});

//有参数传递,POST方式

 $("#resText").load("test.html .para",{name:"tom", age:"18}, function(){

//....

});



回调函数:

对于必须在加载完成后才能继续的操作,load()方法提供了 回调函数 ,该函数 有3个参数 ,分别代表请求返回的内容、请求状态和XMLHttpRequest对象 ,jQuery代码如下:



 $("#resText").load("test.html", function(responseText, textStatus, XMLHttpRequest){

//responseText:请求返回的内容——等同于js-ajax时的“得到服务器响应的文本格式的内容”(注意:js操作中的get、post...都在open()中规定)

//textStatus:请求状态:success、error、notmodified、timeout4种

//XMLHttpRequest:XMLHttpRequest对象——这玩意一般用在判断浏览器适用类型上

});

//注意:在load()方法中,无论Ajax请求是否成功,只要请求完成(complete)后,回调函数就被触发。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计  cs界面设计  ipad界面设计  包装设计  图标定制  用户体验 、交互设计、 网站建设 平面设计服务

日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

存档