个人中心
gpt4 book ai didi

jQuery中Ajax的load方法详解

转载 作者：qq735679552 更新时间：2022-09-28 22:32:09 30 4
gpt4 key购买 nike

CFSDN坚持开源创造价值，我们致力于搭建一个资源共享平台，让每一个IT人在这里找到属于你的精彩世界.

这篇CFSDN的博客文章jQuery中Ajax的load方法详解由作者收集整理，如果你对这篇文章有兴趣，记得点赞哟.

先来看一个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()方法的URL参数的语法结构为："url selector"，注意URL和选择器之间有一个空格
     *
     * 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 。

以上就是本文的全部内容了，希望对大家能有所帮助.

最后此篇关于jQuery中Ajax的load方法详解的文章就讲到这里了,如果你想了解更多关于jQuery中Ajax的load方法详解的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。

30 4 0
文章推荐： Node.js开源应用框架HapiJS介绍
文章推荐： C语言实现三子棋(井字棋)算法
文章推荐： 解决MultipartFile.transferTo(dest) 报FileNotFoundExcep的问题
文章推荐： jquery获取当前日期的方法
qq735679552
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com