jQuery AJAX基础

最新推荐文章于 2020-06-14 16:09:58 发布

tigerto

最新推荐文章于 2020-06-14 16:09:58 发布

阅读量876

点赞数

分类专栏： web

本文链接：https://blog.csdn.net/GSCurry/article/details/71405017

版权

web 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

What’s AJAX

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。
AJAX 不是新的编程语言，而是一种使用现有标准的新方法。
AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。
AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。

简短地说，在不重载整个网页的情况下，AJAX 通过后台加载数据，并在网页上进行显示。
使用 AJAX 的应用程序案例：谷歌地图、腾讯微博、优酷视频、人人网等等。

jQuery与AJAX

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

如果没有 jQuery，AJAX 编程还是有些难度的。
编写常规的 AJAX 代码并不容易，因为不同的浏览器对 AJAX 的实现并不相同。这意味着你必须编写额外的代码对浏览器进行测试。不过，jQuery 为我们解决了这个难题，我们只需要一行简单的代码，就可以实现 AJAX 功能。

简单jQuery的AJAX方法

jQuery - AJAX load()方法

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

语法：

$(selector).load(URL,data,callback);
必需的 URL 参数规定您希望加载的 URL。
可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。
可选的 callback 参数是 load() 方法完成后所执行的函数名称。

代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>jQuery AJAX test</title>
    <!--引入jQueru库-->
    <script src="js/jquery-3.2.1.js"></script>
    <script>
        $(document).ready(function(){
            $("button").click(function(){
                $("#div1").load("files/demo");
            });
        });
    </script>
</head>
<body>
    <h2>使用 jQuery AJAX 修改文本内容</h2>
    <button>获取外部内容</button>
    <div id="div1"></div>
</body>
</html>

demo里的内容：

<hr>
<img src="images/curry.jpg">

目录结构：

这里写图片描述

效果：

效果图

jQuery - AJAX get()方法

jQuery get() 和 post() 方法用于通过 HTTP GET 或 POST 请求从服务器请求数据

GET - 从指定的资源请求数据
POST - 向指定的资源提交要处理的数据

GET 基本上用于从服务器获得（取回）数据。
注释：GET 方法可能返回缓存数据。POST 也可用于从服务器获取数据。不过，POST 方法不会缓存数据，并且常用于连同请求一起发送数据。

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

$.get(URL,callback);
必需的 URL 参数规定您希望请求的 URL。
可选的 callback 参数是请求成功后所执行的函数名。

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Get Test</title>
    <script src="js/jquery-3.2.1.js"></script>
</head>
<body>
    <script>
        $(function () {
           $("#btn").click(function () {
               $.get("files/demo.jsp",function (data,status) {
                   alert("数据："+data+"\n状态："+status);
               });
           })
        })
    </script>
    <button id="btn">发送一个 HTTP GET 请求页面并获取返回内容</button>
</body>
</html>

demo.jsp里的内容：

<html>
<head><title>Hello World</title></head>
<body>
                <% out.println("Your IP address is "); %>
</body>
</html>

效果：
我很纳闷儿，为什么把该jsp文件里的所有内容都弄进来了？？

这里写图片描述

搞明白了，jsp需要编译后才能有效，webstorm不能编译jsp文件。用eclipse启动tomcat运行该例子，妥妥的。
这里写图片描述

效果：
这里写图片描述

jQuery - AJAX post()方法

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

语法：

$.post(URL,data,callback);
必需的 URL 参数规定您希望请求的 URL。
可选的 data 参数规定连同请求发送的数据。
可选的 callback 参数是请求成功后所执行的函数名。

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>POST Test</title>
    <script src="js/jquery-3.2.1.js"></script>
</head>
<body>
    <script>
        $(function () {
            $("#btn1").click(function () {
                $.post("files/demo.jsp",{
                    name:"tigerto"
                },function (data,status) {
                    alert("数据："+data+"\n状态："+status);
                });
            });
        });
    </script>
    <button id="btn1">发送一个 HTTP POST 请求页面并获取返回内容</button>
</body>
</html>