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>

  • 相关阅读:
    装饰模式
    You can't specify target table 'a' for update in FROM clause
    Spring事务知识点
    JAVA中的volatile关键字
    验证HashSet和HashMap不是线程安全
    ZYNQ7000 通过FPGA Manager加载比特流
    verilog中可综合的task使用
    verilog条件编译
    Vivado debug异常现象
    Matlab相关函数使用
  • 原文地址:https://www.cnblogs.com/melao2006/p/4981724.html
Copyright © 2011-2022 走看看