>

jQuery中Ajax的load方法详解

- 编辑:正版管家婆马报彩图 -

jQuery中Ajax的load方法详解

先来看二个Ajax例子

jQuery中Ajax的load方法详解,jqueryajax

先来看四个Ajax例子

复制代码 代码如下:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<input type="button" value="Ajax提交" onclick="Ajax();" />
<div id="resText"></div>
</body>
<script type="text/javascript">
    function Ajax() {
        var xmlHttpReq = null;//声美素佳儿个空对象用来装入XMLHttpRequest对象
        if(window.ActiveXObject) {
            xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");//IE5 IE6是以ActiveXObject的点子引进XMLHttpRequest的
        } else if(window.XMLHttpRequest) {//除IE5 IE6 以外的浏览器XMLHttpRequest是window的子对象
            xmlHttpReq = new XMLHttpRequest();//实例化三个XMLHttpRequest对象
        }
        if(xmlHttpReq != null) {
            xmlHttpReq.open("GET", "test.jsp", true);//调用open()方法并应用异步格局
            xmlHttpReq.onreadystatechange = RequestCallBack;//设置回调函数
            xmlHttpReq.send(null);//因为运用get方式提交,所以能够使用null参调用
        }

        function RequestCallBack() {//一旦readyState值改造,将会调用那几个函数}
            if(xmlHttpReq.readyState == 4) {
                if(xmlHttpReq.status == 200) {
                    //将xmlHttpReq.responseText的值赋予id为resText的成分
                    document.getElementById("resText").innerHTML = xmlHttpReq.responseText;
                }
            }
        }
    }

</script>
</html>

test.jsp的内容:

复制代码 代码如下:

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%out.println("Hello Ajax!");%>

上边来看下jQuery中的Ajax

1.load()

  load()方法是jQuery中特别简练和常用的Ajax方法,能长途载入HTML代码并插入DOM中。

远程HTML代码:

复制代码 代码如下:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <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>

load()载入HTML

复制代码 代码如下:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <script type="text/javascript" src="../../js/jquery-2.1.3.js"></script>
    <style>
        * { margin:0; padding:0;}
        body { font-size:12px;}
        .comment { margin-top:10px; padding:10px; border:1px solid #ccc;background:#DDD;}
        .comment h6 { font-weight:700; font-size:14px;}
        .para { margin-top:5px; text-indent:2em;background:#DDD;}
    </style>
    <title></title>
</head>
<body>
<input type="button" id="send" value="Ajax获取" />
<div class="comment">已有谈论</div>
<div id="resText"></div>
</body>
<script type="text/javascript">
    $(function () {
        $("#send").click(function () {
            $("#resText").load("test.html");
        });
    })
    /**
     * jQuery中的Ajax
     *
     * jQuery对Ajax操作进行了打包,
     *  在jQuery中$.ajax()方法属于最底部的艺术,
     *  第2层是load()、$.get()、$.post()方法
     *  第3层是$.getScript()和$.getJSON()方法
     *
     *
     * load()方法是jQuery中最为简练和常用的Ajax方法,能载入远程HTML代码并插入DOM中。
     *      load(url [, data] [, callback])
     *
     *      url              String      请求HTML界面的URL地址
     *      data(可选)        Object      发送至服务器的key/value数据
     *      callback(可选)    Function    央求完结时的回调函数,无论伏乞成功或败北
     * */

</script>
</html>

load()载入筛选后的HTML文书档案

复制代码 代码如下:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <script type="text/javascript" src="../../js/jquery-2.1.3.js"></script>
    <style>
        * { margin:0; padding:0;}
        body { font-size:12px;}
        .comment { margin-top:10px; padding:10px; border:1px solid #ccc;background:#DDD;}
        .comment h6 { font-weight:700; font-size:14px;}
        .para { margin-top:5px; text-indent:2em;background:#DDD;}
    </style>
    <title></title>
</head>
<body>
<input type="button" id="send" value="Ajax获取" />
<div class="comment">已有评价</div>
<div id="resText"></div>
</body>
<script type="text/javascript">
    $(function () {
        $("#send").click(function () {
            $("#resText").load("test.html .para");
        });
    })
    /**
     * 筛选载入的HTML文书档案
     *
     * load()方法的U兰德酷路泽L参数的语法结构为:"url selector",注意U中华VL和采纳器之间有一个空格
     *
     * load()方法的传递格局基于参数data来机关钦点。
     *      若无参数字传送递,则选取GET情势开展传递;
     *      反之,则会自动转变为POST传递
     *
     * **/
</script>
</html>

load()方法---回调函数

复制代码 代码如下:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <script type="text/javascript" src="../../js/jquery-2.1.3.js"></script>
    <style>
        * { margin:0; padding:0;}
        body { font-size:12px;}
        .comment { margin-top:10px; padding:10px; border:1px solid #ccc;background:#DDD;}
        .comment h6 { font-weight:700; font-size:14px;}
        .para { margin-top:5px; text-indent:2em;background:#DDD;}
    </style>
    <title></title>
</head>
<body>
<input type="button" id="send" value="Ajax获取" />
<div class="comment">已有评价</div>
<div id="resText"></div>
</body>
<script type="text/javascript">
    $(function () {
        $("#send").click(function () {
            $("#resText").load("test.html .para", function (responseText, textStatus, XMLHttpRequest) {
                alert($(this).html());
                alert(responseText);//央浼重回的内容
                alert(textStatus);//诉求状态:success、error、notmodified、timeout
                alert(XMLHttpRequest);//XMLHttpRequest对象
            });
        });
    })
    /**
     *
     * load()方法的回调参数
     *
     * **/
</script>
</html>

END

上述正是本文的整体内容了,希望对大家能具有帮忙。

先来看多少个Ajax例子 复制代码 代码如下: !DOCTYPE html html head lang="en" meta charset="UTF-8" title/title /head body inp...

复制代码 代码如下:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<input type="button" value="Ajax提交" onclick="Ajax();" />
<div id="resText"></div>
</body>
<script type="text/javascript">
    function Ajax() {
        var xmlHttpReq = null;//声惠氏(WYETH)个空对象用来装入XMLHttpRequest对象
        if(window.ActiveXObject) {
            xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");//IE5 IE6是以ActiveXObject的法子引入XMLHttpRequest的
        } else if(window.XMLHttpRequest) {//除IE5 IE6 以外的浏览器XMLHttpRequest是window的子对象
            xmlHttpReq = new XMLHttpRequest();//实例化贰个XMLHttpRequest对象
        }
        if(xmlHttpReq != null) {
            xmlHttpReq.open("GET", "test.jsp", true);//调用open()方法并使用异步方式
            xmlHttpReq.onreadystatechange = RequestCallBack;//设置回调函数
            xmlHttpReq.send(null);//因为运用get情势交给,所以可以采纳null参调用
        }

        function RequestCallBack() {//一旦readyState值改动,将会调用这些函数}
            if(xmlHttpReq.readyState == 4) {
                if(xmlHttpReq.status == 200) {
                    //将xmlHttpReq.responseText的值赋予id为resText的要素
                    document.getElementById("resText").innerHTML = xmlHttpReq.responseText;
                }
            }
        }
    }

</script>
</html>

test.jsp的内容:

复制代码 代码如下:

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%out.println("Hello Ajax!");%>

上面来看下jQuery中的Ajax

1.load()

  load()方法是jQuery中极度轻便和常用的Ajax方法,能中远距离载入HTML代码并插入DOM中。

远程HTML代码:

复制代码 代码如下:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <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>

load()载入HTML

复制代码 代码如下:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <script type="text/javascript" src="../../js/jquery-2.1.3.js"></script>
    <style>
        * { margin:0; padding:0;}
        body { font-size:12px;}
        .comment { margin-top:10px; padding:10px; border:1px solid #ccc;background:#DDD;}
        .comment h6 { font-weight:700; font-size:14px;}
        .para { margin-top:5px; text-indent:2em;background:#DDD;}
    </style>
    <title></title>
</head>
<body>
<input type="button" id="send" value="Ajax获取" />
<div class="comment">已有评价</div>
<div id="resText"></div>
</body>
<script type="text/javascript">
    $(function () {
        $("#send").click(function () {
            $("#resText").load("test.html");
        });
    })
    /**
     * jQuery中的Ajax
     *
     * jQuery对Ajax操作实行了打包,
     *  在jQuery中$.ajax()方法属于最尾巴部分的诀要,
     *  第2层是load()、$.get()、$.post()方法
     *  第3层是$.getScript()和$.getJSON()方法
     *
     *
     * load()方法是jQuery中最棒简单和常用的Ajax方法,能载入远程HTML代码并插入DOM中。
     *      load(url [, data] [, callback])
     *
     *      url              String      请求HTML界面的URL地址
     *      data(可选)        Object      发送至服务器的key/value数据
     *      callback(可选)    Function    诉求实现时的回调函数,无论央浼成功或倒闭
     * */

</script>
</html>

load()载入筛选后的HTML文书档案

复制代码 代码如下:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <script type="text/javascript" src="../../js/jquery-2.1.3.js"></script>
    <style>
        * { margin:0; padding:0;}
        body { font-size:12px;}
        .comment { margin-top:10px; padding:10px; border:1px solid #ccc;background:#DDD;}
        .comment h6 { font-weight:700; font-size:14px;}
        .para { margin-top:5px; text-indent:2em;background:#DDD;}
    </style>
    <title></title>
</head>
<body>
<input type="button" id="send" value="Ajax获取" />
<div class="comment">已有抵触</div>
<div id="resText"></div>
</body>
<script type="text/javascript">
    $(function () {
        $("#send").click(function () {
            $("#resText").load("test.html .para");
        });
    })
    /**
     * 筛选载入的HTML文书档案
     *
     * load()方法的UXC90L参数的语法结构为:"url selector",注意U路虎极光L和选拔器之间有二个空格
     *
     * load()方法的传递格局基于参数data来机关钦点。
     *      若无参数字传送递,则接纳GET方式展开传递;
     *      反之,则会自行转换为POST传递
     *
     * **/
</script>
</html>

load()方法---回调函数

复制代码 代码如下:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <script type="text/javascript" src="../../js/jquery-2.1.3.js"></script>
    <style>
        * { margin:0; padding:0;}
        body { font-size:12px;}
        .comment { margin-top:10px; padding:10px; border:1px solid #ccc;background:#DDD;}
        .comment h6 { font-weight:700; font-size:14px;}
        .para { margin-top:5px; text-indent:2em;background:#DDD;}
    </style>
    <title></title>
</head>
<body>
<input type="button" id="send" value="Ajax获取" />
<div class="comment">已有批评</div>
<div id="resText"></div>
</body>
<script type="text/javascript">
    $(function () {
        $("#send").click(function () {
            $("#resText").load("test.html .para", function (responseText, textStatus, XMLHttpRequest) {
                alert($(this).html());
                alert(responseText);//央浼重临的剧情
                alert(textStatus);//乞求状态:success、error、notmodified、timeout
                alert(XMLHttpRequest);//XMLHttpRequest对象
            });
        });
    })
    /**
     *
     * load()方法的回调参数
     *
     * **/
</script>
</html>

END

以上就是本文的全部内容了,希望对我们能享有协理。

你可能感兴趣的篇章:

  • JSP中的include有两种方式?都有啥界别?
  • JSP下动态INCLUDE与静态INCLUDE的分别解析
  • 用Jquery.load载入页面实现部分刷新
  • JSP中include指令和include行为的界别
  • 详谈jQuery.load()和Jsp的include的区别

本文由关于计算机发布,转载请注明来源:jQuery中Ajax的load方法详解