2018-06-11jQuery5 分钟读完 (大约 796 个字)

jQuery学习笔记（五）

Ajax（异步js和XML）是浏览器和服务器交换数据的技术，它实现了在不刷新页面的情况下对于页面的局部刷新。

jquery提供了多个Ajax方法，可以 GET/POST 服务器数据。

load()

load() 是从服务器家在数据并将返回的数据写入到页面元素中。

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

URL：请求的地址。
data：随请求发送到服务器的数据（键值对集合）。
callback：load()完成后的回调函数。

实例：

1 2	$("#div1").load("demo_test.txt"); $("#div1").load("demo_test.txt #p1");

callback()的参数：

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

实例：

$("button").click(function() {
    $("#div1").load("demo_test.txt", function(responseTxt, statusTxt, xhr) {
        if (statusTxt == "success")
            alert("外部内容加载成功!");
        if (statusTxt == "error")
            alert("Error: " + xhr.status + ": " + xhr.statusText);
    });
});

GET/POST

浏览器请求服务器数据有两种方式：GET和POST。

GET：从指定url请求数据，可能会返回缓存数据。
POST：向指定url提交数据，不会缓存数据。

GET和POST的不同：https://www.runoob.com/tags/html-httpmethods.html

$.get()

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

实例：

$("button").click(function() {
    $.get("demo_test.php", function(data, status) {
        alert("数据: " + data + "\n状态: " + status);
    });
});

$.post()

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

实例：

$("button").click(function() {
    $.post("/try/ajax/demo_test_post.php", {
            name: "菜鸟教程",
            url: "http://www.runoob.com"
        },
        function(data, status) {
            alert("数据: \n" + data + "\n状态: " + status);
        });
});

GET和POST的区别

1、发送的数据数量

在 GET 中，只能发送有限数量的数据，因为数据是在 URL 中发送的。
在 POST 中，可以发送大量的数据，因为数据是在正文主体中发送的。

2、安全性

GET 方法发送的数据不受保护，因为数据在 URL 栏中公开，这增加了漏洞和黑客攻击的风险。
POST 方法发送的数据是安全的，因为数据未在 URL 栏中公开，还可以在其中使用多种编码技术，这使其具有弹性。

3、加入书签中

GET 查询的结果可以加入书签中，因为它以 URL 的形式存在；而 POST 查询的结果无法加入书签中。

4、编码

在表单中使用 GET 方法时，数据类型中只接受 ASCII 字符。
在表单提交时，POST 方法不绑定表单数据类型，并允许二进制和 ASCII 字符。

5、可变大小

GET 方法中的可变大小约为 2000 个字符。
POST 方法最多允许 8 Mb 的可变大小。

6、缓存

GET 方法的数据是可缓存的，而 POST 方法的数据是无法缓存的。

7、主要作用

GET 方法主要用于获取信息。而 POST 方法主要用于更新数据。

$.ajax()

refs:

https://www.w3school.com.cn/jquery/ajax_ajax.asp

https://www.runoob.com/jquery/ajax-ajax.html

jquery中get(), post(), ajax()三者的区别

https://blog.csdn.net/qq_34202873/article/details/86759541

一般ajax的jquery实现：

$.ajax({
    url: '',
    async: true,
    dataType: 'json',
    data: {},
    type: 'POST',
    success: function() {

    }
});

支付宝

微信