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

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>

3)get()/post()方法

get:从指定的资源请求数据。【从服务器获得(取回)数据。GET方法可能返回缓存数据】

post：向指定的资源提交要处理的数据。【POST也可以用于从服务器获取数据。POST不会缓存数据，并且常用于连同请求一起发送数据。】

$.get() 方法通过 HTTP GET 请求从服务器上请求数据。

语法：$.get(URL,callback);

必需的 URL 参数规定您希望请求的 URL。

可选的 callback 参数是请求成功后所执行的函数名。

$.post() 方法通过 HTTP POST 请求向服务器提交数据。

语法: $.post(URL,data,callback);

必需的 URL 参数规定您希望请求的 URL。

可选的 data 参数规定连同请求发送的数据。

可选的 callback 参数是请求成功后所执行的函数名。

版权声明：本文来源CSDN，感谢博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。
原文链接：https://blog.csdn.net/u014067137/article/details/95729108
站方申明：本站部分内容来自社区用户分享，若涉及侵权，请联系站方删除。

发表于 2021-05-31 11:18:43
阅读 ( 956 )
分类：前端

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

你可能感兴趣的文章

精选的优质文章

0 条评论

官方社群

GO教程

推荐文章

猜你喜欢

随便看看