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

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

Javascript 相关文章推荐
用函数式编程技术编写优美的 JavaScript
Nov 25 Javascript
js简单实现根据身份证号码识别性别年龄生日
Nov 29 Javascript
Javascript全局变量var与不var的区别深入解析
Dec 09 Javascript
JavaScript中使用Object.create()创建对象介绍
Dec 30 Javascript
非常酷炫的Bootstrap图片轮播动画
May 27 Javascript
AngularJS中isolate scope的用法分析
Nov 22 Javascript
想用好React的你必须要知道的一些事情
Jul 24 Javascript
浅析Visual Studio Code断点调试Vue
Feb 27 Javascript
vue中锚点的三种方法
Jul 06 Javascript
详解微信小程序调起键盘性能优化
Jul 24 Javascript
小程序tab页无法传递参数的方法
Aug 03 Javascript
详解Vue3.0 + TypeScript + Vite初体验
Feb 22 Vue.js
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
You might like
Zend引擎的发展 [15]
2006/10/09 PHP
PHP文件缓存内容保存格式实例分析
2014/08/20 PHP
C#静态方法与非静态方法实例分析
2014/09/22 PHP
php include类文件超时问题处理
2015/02/06 PHP
php通过获取头信息判断图片类型的方法
2015/06/26 PHP
PHP模糊查询技术实例分析【附源码下载】
2019/03/07 PHP
基于jQuery的淡入淡出可自动切换的幻灯插件
2010/08/24 Javascript
Jquery选中或取消radio示例
2013/09/29 Javascript
原生js和jquery中有关透明度设置的相关问题
2014/01/08 Javascript
当滚动条滚动到页面底部自动加载增加内容的js代码
2014/05/13 Javascript
jquery中map函数遍历数组用法实例
2015/05/18 Javascript
javascript获取select标签选中的值
2016/06/04 Javascript
Angular中使用$watch监听object属性值的变化(详解)
2017/04/24 Javascript
jQuery+Ajax请求本地数据加载商品列表页并跳转详情页的实现方法
2017/07/12 jQuery
在Python中使用dict和set方法的教程
2015/04/27 Python
python脚本实现数据导出excel格式的简单方法(推荐)
2016/12/30 Python
python爬虫获取多页天涯帖子
2018/02/23 Python
centos6.8安装python3.7无法import _ssl的解决方法
2018/09/17 Python
pytorch中的卷积和池化计算方式详解
2020/01/03 Python
Python 简单计算要求形状面积的实例
2020/01/18 Python
Kears 使用:通过回调函数保存最佳准确率下的模型操作
2020/06/17 Python
使用CSS3制作饼状旋转载入效果的实例
2015/06/23 HTML / CSS
HTML5 LocalStorage 本地存储刷新值还在
2017/03/10 HTML / CSS
国际书籍零售商:Wordery
2017/11/01 全球购物
伯利陶器:Burleigh Pottery
2018/01/03 全球购物
荷兰浴室和卫浴网上商店:Badkamerxxl.nl
2020/10/06 全球购物
资生堂英国官网:Shiseido英国
2020/12/30 全球购物
中专毕业生的自我鉴定
2013/12/01 职场文书
小学科学教学反思
2014/01/26 职场文书
2015年党务公开工作总结
2015/05/19 职场文书
师德师风培训感言
2015/08/03 职场文书
2019大学生社会实践报告汇总
2019/08/16 职场文书
Django实现在线无水印抖音视频下载(附源码及地址)
2021/05/06 Python
pytorch中的 .view()函数的用法介绍
2022/03/17 Python
使用 Koa + TS + ESLlint 搭建node服务器的过程详解
2022/05/30 NodeJs
vue css 相对路径导入问题级踩坑记录
2022/06/05 Vue.js