首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

jQuery中Ajax的load方法详解

Posted in Javascript onJanuary 14, 2015

先来看一个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方法详解

- Author -

hebedich

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
加载jQuery后$冲突的解决办法
Jul 09 Javascript
jquery实现多行文字图片滚动效果示例代码
Oct 10 Javascript
浅谈jQuery中replace()方法
May 13 Javascript
JavaScript forEach()遍历函数使用及介绍
Jul 08 Javascript
基于jQuery ligerUI实现分页样式
Sep 18 Javascript
IE8利用自带的setCapture和releaseCapture解决iframe的拖拽事件方法
Oct 25 Javascript
JS+CSS3制作炫酷的弹窗效果
Nov 08 Javascript
javascript  数组排序与对象排序的实例
Jul 17 Javascript
基于JavaScript实现数码时钟效果
Mar 30 Javascript
json对象及数组键值的深度大小写转换问题详解
Mar 30 Javascript
vue component 中引入less文件报错 Module build failed
Apr 17 Javascript
如何使用jQuery操作Cookies方法解析
Sep 08 jQuery
jquery获取当前日期的方法
Jan 14 #Javascript
JavaScript 学习笔记之基础中的基础
Jan 13 #Javascript
jQuery 中DOM 操作详解
Jan 13 #Javascript
JavaScript常用的返回，自动跳转，刷新，关闭语句汇总
Jan 13 #Javascript
jQuery过滤选择器详解
Jan 13 #Javascript
jQuery入门介绍之基础知识
Jan 13 #Javascript
javascript实现时间格式输出FormatDate函数
Jan 13 #Javascript
森海(1) 东方红(1) YB217(1) 1 Tube Radio(1) 再生机(1) S2000(3) YB400(2) YB235(1) MX500(1) 直流胆(1)
You might like
PHP用mysql数据库存储session的代码
2010/03/05 PHP
介绍一些PHP判断变量的函数
2012/04/24 PHP
php命名空间学习详解
2014/02/27 PHP
PHP批量去除BOM头内容信息代码
2016/03/11 PHP
php面向对象编程self和static的区别
2016/05/08 PHP
各种效果的jquery ui(接口)介绍
2008/09/17 Javascript
kindeditor编辑器点中图片滚动条往上顶的bug
2015/07/05 Javascript
jQuery实现平滑滚动页面到指定锚点链接的方法
2015/07/15 Javascript
EasyUI闪屏EasyUI页面加载提示(原理+代码+效果图)
2016/02/21 Javascript
javascript实现label标签跳出循环操作
2016/03/06 Javascript
JS平滑无缝滚动效果的实现代码
2016/05/06 Javascript
JavaScript遍历求解数独问题的主要思路小结
2016/06/12 Javascript
AngularJS中的表单简单入门
2016/07/28 Javascript
Angular设置title信息解决SEO方面存在问题
2016/08/19 Javascript
JavaScript 控制字体大小设置的方法
2016/11/23 Javascript
BootStrap的双日历时间控件使用
2017/07/25 Javascript
深入理解requireJS-实现一个简单的模块加载器
2018/01/15 Javascript
JavaScript之数组扁平化详解
2019/06/03 Javascript
微信小程序-可移动菜单的实现过程详解
2019/06/24 Javascript
JS数组Reduce方法功能与用法实例详解
2020/04/29 Javascript
用vue 实现手机触屏滑动功能
2020/05/28 Javascript
Js图片点击切换轮播实现代码
2020/07/27 Javascript
Python的socket模块源码中的一些实现要点分析
2016/06/06 Python
python对象及面向对象技术详解
2016/07/19 Python
Python基于正则表达式实现文件内容替换的方法
2017/08/30 Python
Python中函数的基本定义与调用及内置函数详解
2019/05/13 Python
Django中的FBV和CBV用法详解
2019/09/15 Python
使用pyhon绘图比较两个手机屏幕大小(实例代码)
2020/01/03 Python
怎么快速自学python
2020/06/22 Python
保安的辞职报告怎么写
2014/01/20 职场文书
军训 自我鉴定
2014/02/03 职场文书
2014年学校后勤工作总结
2014/12/06 职场文书
学雷锋献爱心倡议书
2015/04/27 职场文书
家庭教育教师培训学习体会
2016/01/14 职场文书
Go语言实现Snowflake雪花算法
2021/06/08 Golang
MySQL子查询中order by不生效问题的解决方法
2021/08/02 MySQL