zoukankan      html  css  js  c++  java
  • jQuery-AJAX load()方法

    jQuery load()方法是简单但功能强大的AJAX方法

    load方法是从服务器上加载数据,并把返回的数据显示在被选择元素中。

    语法格式

    $(selector).load(url,data,callback)

    参数1:url规定希望加载的数据的地址(必需的);

    参数2:data规定与请求一同发送的查询字符串键值对的集合(可选的)

    参数3:callback规定是load()方法完成后所执行的函数名称(可选的)

    实例:

    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <meta charset="utf-8" />
    <style type="text/css"></style>
    <script src="Css/jquery-2.1.4.js"></script>
    <script type="text/javascript">
    $(document).ready(function () {
    $("button").click(function () {
    $("#pid").load("Text/demo_AJAX.txt");
    });
    })

    </script>
    </head>
    <body>
    <section>
    <h2>使用jQuery AJAX方法修改p元素的内容</h2>
    <p id="pid">这是一个段落,此内容会被修改</p>
    </section>
    <button>点击修改内容</button>
    </body>
    </html>

    demo_AJAX.txt

    jQuery AJAX 是一个非常棒的功能。
    <p id=p1>这是一个段落</p>

    也可以把jQuery选择器添加到url中,下面的例子是把demo_AJAX.txt文件中p id="p1"的内容插入到被选择的元素中。

    实例:

    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <meta charset="utf-8" />
    <script src="Css/jquery-2.1.4.js"></script>
    <script>
    $(document).ready(function () {
    $("button").click(function () {
    $("#pid").load("Text/demo_AJAX.txt #p1");
    })
    })
    </script>
    </head>
    <body>
    <section>
    <h2>使用jQuery AJAX方法修改p元素的内容</h2>
    <p id="pid">这是一个段落,此内容会被修改</p>
    </section>
    <button>点击修改内容</button>
    </body>
    </html>

    可选的callback参数规定load方法运行完成后所调用的回调函数,回调函数可以设置多个参数,如:responseTxt,statusTxt,xhr

    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <meta charset="utf-8" />
    <style type="text/css">

    </style>

    <script src="Css/jquery-2.1.4.js"></script>
    <script type="text/javascript">
    $(document).ready(function () {
    $("button").click(function () {
    $("#pid").load("Text/demo_AJAX.txt", function (responseTxt,statusTxt,xhr) {
    if (statusTxt == "success") {
    alert("数据加载完成")
    };
    if (statusTxt == "error")
    {
    alert("error:"+xhr.status+" "+xhr.statusText)
    }
    });
    });
    })

    </script>
    </head>
    <body>
    <section>
    <h2>使用jQuery AJAX方法修改p元素的内容</h2>
    <p id="pid">这是一个段落,此内容会被修改</p>
    </section>
    <button>点击修改内容</button>
    </body>
    </html>

  • 相关阅读:
    32位系统最大只能支持4GB内存之由来
    无线传感器网络中的节点定位技术
    Python 面向对象编程(一)
    Eclipse+PyDev+Django+Mysql搭建Python web开发环境
    Python中的函数(二)
    关于raw_input()和sys.stdin.readline()的区别
    Python中的函数(三)
    将Sublime Text 2搭建成一个好用的IDE
    Windows Phone 7 Tips (1)
    Expression Blend 知识锦分享
  • 原文地址:https://www.cnblogs.com/melao2006/p/4981724.html
Copyright © 2011-2022 走看看