jQuery随笔20190713(jQuery HTML、遍历、Ajax)

最新推荐文章于 2023-07-23 21:14:20 发布

Baymax_wyl

最新推荐文章于 2023-07-23 21:14:20 发布

阅读量244

点赞数

CC 4.0 BY-SA版权

分类专栏： jQuery

本文链接：https://blog.youkuaiyun.com/u014067137/article/details/95729108

jQuery 专栏收录该内容

1 篇文章

订阅专栏

本文主要介绍了jQuery相关知识，包括jQuery HTML、遍历，重点讲解了jQuery Ajax。阐述了Ajax是与服务器交换数据、可局部更新网页的技术，还介绍了jQuery提供的多个AJAX方法，如load()、get()、post()方法，并说明了各方法的语法及参数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、jQuery HTML

2、jQuery 遍历

3、jQuery Ajax

1)Ajax简介

Ajax=异步JavaScript 和 XML （Asynchronous JavaScript and XML）。Ajax是与服务器交换数据的技术，它在不重载全部页面的情况下，实现了对部分网页的更新。简言之：他在不重载整个网页的情况下，AJAX通过后台加载数据，并在网页上进行显示。

jQuery提供了多个与AJAX有关的方法。通过jQuery AJAX方法，可以使用HTTP get 和 HTTP post从远程服务器上请求文本、HTML、XML 或 JSON ，同时能够把这些外部数据直接载入到网页的被选中元素中。

2)load()方法

load()方法是简单但强大的AJAX方法。该方法从服务器加载数据，并把返回的数据放入被选元素中。

语法：$(selector).load(URL,data,callback);

必需的 URL 参数规定您希望加载的 URL。

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

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

text.txt 文本

<h2>jQuery Ajax 是个非常秀的功能！</h2>
<p id="p1">我是被替换的新文本信息！！！</p>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ajax test</title>
    <script src="jquery-3.4.1.js"></script>
    <script>
        $(function(){
            $("button").click(function(){
                $("#div1").load("test.txt");
            });
        });
    </script>
</head>
<body>
<button>click me && load text</button>
<div id="div1">点击button 后，该部分内容将会被替换。</div>
</body>
</html>

可选择的callback参数规定了当load()方法完成后所要允许的回调函数。回调函数可以设置不同的参数：

responseTxt - 包含调用成功时的结果内容
statusTXT - 包含调用的状态
xhr - 包含 XMLHttpRequest 对象

下面的例子会在 load() 方法完成后显示一个提示框。如果 load() 方法已成功，则显示"外部内容加载成功！"，而如果失败，则显示错误消息：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ajax test</title>
    <script src="jquery-3.4.1.js"></script>
    <script>
        $(function(){
            $("button").click(function(){
                $("#div1").load("test.txt", function (responseTxt,sattusTxt,xhr) {
                    if(sattusTxt=="success"){
                        alert("外部内容加载成功");
                    }
                    if (sattusTxt=="error"){
                        alert("ERROR："+xhr.status+":"+xhr.statusText);
                    }
                });
            });
        });
    </script>
</head>
<body>
<button>click me && load text</button>
<div id="div1">点击button 后，该部分内容将会被替换。</div>
</body>
</html>