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 模仿vbs中的 DateAdd() 函数的代码
Aug 13 Javascript
jquery 的 $(&quot;#id&quot;).html() 无内容的解决方法
Jun 07 Javascript
Prototype源码浅析 String部分(一)之有关indexOf优化
Jan 15 Javascript
html中的input标签的checked属性jquery判断代码
Sep 19 Javascript
js事件(Event)知识整理
Oct 11 Javascript
node+express+ejs制作简单页面上手指南
Nov 26 Javascript
JavaScript设置获取和设置属性的方法
Mar 04 Javascript
AngularJS表格详解及示例代码
Aug 17 Javascript
微信小程序获取循环元素id以及wx.login登录操作
Aug 17 Javascript
node+koa实现数据mock接口的方法
Sep 20 Javascript
基于vue2.0的活动倒计时组件countdown(附源码下载)
Oct 09 Javascript
vue 动态添加的路由页面刷新时失效的原因及解决方案
Feb 26 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
JavaScript实现网页上的浮动广告的简单方法
2013/06/14 Javascript
js检测浏览器版本、核心、是否移动端示例
2014/04/24 Javascript
JavaScript中的数组操作介绍
2014/12/30 Javascript
JavaScript操作Cookie详解
2015/02/28 Javascript
javaScript中with函数用法实例分析
2015/06/08 Javascript
跟我学习javascript的for循环和for...in循环
2015/11/18 Javascript
Angular使用$http.jsonp发送跨站请求的方法
2017/03/16 Javascript
nodejs前端模板引擎swig入门详解
2018/05/15 NodeJs
Webpack的dll功能使用
2018/06/28 Javascript
微信小程序自定义组件封装及父子间组件传值的方法
2018/08/28 Javascript
小程序scroll-view组件实现滚动的示例代码
2018/09/20 Javascript
js实现微信聊天效果
2020/08/09 Javascript
vue组件讲解(is属性的用法)模板标签替换操作
2020/09/04 Javascript
浅析JavaScript中的事件委托机制跟深浅拷贝
2021/01/20 Javascript
在Python中操作字符串之startswith()方法的使用
2015/05/20 Python
Python使用Pycrypto库进行RSA加密的方法详解
2016/06/06 Python
Python操作csv文件实例详解
2017/07/31 Python
python 利用for循环 保存多个图像或者文件的实例
2018/11/09 Python
Python寻找路径和查找文件路径的示例
2019/07/10 Python
python代码编写计算器小程序
2020/03/30 Python
python3 正则表达式基础廖雪峰
2020/03/25 Python
如何把外网python虚拟环境迁移到内网
2020/05/18 Python
Django多层嵌套ManyToMany字段ORM操作详解
2020/05/19 Python
PyQt5的相对布局管理的实现
2020/08/07 Python
django使用多个数据库的方法实例
2021/03/04 Python
美国最大的城市服装和运动鞋零售商:Jimmy Jazz
2016/11/19 全球购物
屈臣氏菲律宾官网:Watsons菲律宾
2020/06/30 全球购物
出纳岗位职责范本
2013/12/01 职场文书
小学生作文评语
2014/04/18 职场文书
高职教师先进事迹材料
2014/08/24 职场文书
升学宴答谢词
2015/01/05 职场文书
基层组织建设年活动总结
2015/05/09 职场文书
男人帮观后感
2015/06/18 职场文书
电力安全学习心得体会
2016/01/18 职场文书
Vue+TypeScript中处理computed方式
2022/04/02 Vue.js
Mybatis 一级缓存和二级缓存原理区别
2022/09/23 Java/Android