JQuery的AJAX方法

最新推荐文章于 2023-01-12 17:12:37 发布

晚风yY

最新推荐文章于 2023-01-12 17:12:37 发布

阅读量276

点赞数

分类专栏： AJAX

本文链接：https://blog.csdn.net/m0_55689351/article/details/115519072

版权

AJAX 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

jQuery 库拥有完整的 Ajax 兼容套件。其中的函数和方法允许我们在不刷新浏览器的情况下从服务器加载数据

$.ajax()：

ajax() 方法通过 HTTP 请求加载远程数据。

该方法是 jQuery 底层 AJAX 实现。简单易用的高层实现见 $.get, $.post 等。$.ajax() 返回其创建的 XMLHttpRequest 对象。大多数情况下你无需直接操作该函数，除非你需要操作不常用的选项，以获得更多的灵活性。

settings [可选]用于配置 Ajax 请求的键值对集合。

async：

类型：Boolean，默认值: true。默认设置下，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为 false。

注意，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。

contentType：

类型：String，默认值: "application/x-www-form-urlencoded"。发送信息至服务器时内容编码类型。

默认值适合大多数情况。如果你明确地传递了一个 content-type 给 $.ajax() 那么它必定会发送给服务器（即使没有数据要发送）。

data：

类型：String,发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。

必须为 Key/Value 格式。如果为数组，jQuery 将自动为不同值对应同一个名称。如 {foo:["bar1", "bar2"]} 转换为 '&foo=bar1&foo=bar2’。

url：

类型：String

默认值: 当前页地址。发送请求的地址。

type：

类型：String

默认值: "GET")。请求方式 ("POST" 或 "GET")，默认为 "GET"。注意：其它 HTTP 请求方法，如 PUT 和 DELETE 也可以使用，但仅部分浏览器支持。

timeout：

类型：Number

设置请求超时时间（毫秒）。此设置将覆盖全局设置。

success：

类型：Function

请求成功后的回调函数。

参数：由服务器返回，并根据 dataType 参数进行处理后的数据；描述状态的字符串。这是一个 Ajax 事件。

Error：

类型：Function

默认值: 自动判断 (xml 或 html)。请求失败时调用此函数。

<script src="./js/jquery.js"></script>
<script>
    // 立即就绪函数
    $(function () {
        // [setting] 可选
        //  $.ajax([setting])
        function success(response,status,xhr){
                // 默认做了JSON.parse()
                console.log(response);
                console.log(status);
                console.log(xhr);
            }
        $.ajax({
            // async boolean 默认值为true，表示异步请求，flase为同步请求
            async: true,
            // contentType :string 默认:application/x-www-form-urlencoded 传递参数的编码格式
            contentType: 'application/json',
            // data:get请求，会将请求的参数以？拼接在请求路径的后边，多个参数之间使用&连接 必须为 Key/Value(name:'zhangsan') 格式
            // data:数组names: ['张三', '李四', '王五']:会转化成names=张三&names=李四
            data: {
                type: 'sell', // sell new pop
                page: 10
            },
            // url：请求的地址，如果为get请求，可以将参数直接跟在链接后边
            url:'http://49.233.3.222:8080/home/goods',
            // type：请求方式 get、post 如 PUT 和 DELETE 也可以使用，但仅部分浏览器支持。
            type:'get',
            // timeout：超时时间：毫秒数
            timeout:5000,
            // datatype 响应时的数据类型 “xml“、”html”、“text”、“script”、“json”、"jsonp"
            datatype:'text',
            // success：成功时的回调函数
            // response 响应的结果
            // status 状态 success
            // xhr XMLHttpRequest对象
            success:success,
            // 失败时的回调函数 404 500
            error:function(xhr){
                console.log(xhr.status);
            }
        })
    })
</script>

$.get()：

get() 方法通过远程 HTTP GET 请求载入信息。

这是一个简单的 GET 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数，请使用 $.ajax。

url:必需。规定将请求发送的哪个 URL。

Data:可选。规定连同请求发送到服务器的数据。

success(response,status,xhr):可选。规定当请求成功时运行的函数。

额外的参数：

response - 包含来自请求的结果数据

status - 包含请求的状态

xhr - 包含 XMLHttpRequest 对象

datatype：

可选。规定预计的服务器响应的数据类型。

默认地，jQuery 将智能判断。

可能的类型：“xml“、”html”、“text”、“script”、“json”、"jsonp"

该函数是简写的 Ajax 函数，等价于：

$.ajax({
       url: url,
       data: data,
       success: success,
       dataType: dataType
 });

<script src="./js/jquery.js"></script>
<script>
    // 立即就绪函数
    $(function () {
        // $.get(url,data,success(response,status,xhr), dataType)
        var url = 'http://49.233.3.222:8080/home/goods'
        var data = {
            type: 'new',
            page: 20
        }
        $.get(
            url,
            data,
            function success(response, status, xhr) {
                console.log(response);
            },
            'json'
        )
    })

$.post()：

post() 方法通过 HTTP POST 请求从服务器载入数据。

$.post(url,data,success(data, textStatus, xhr),dataType)

url:必需。规定将请求发送的哪个 URL。

Data:可选。映射或字符串值。规定连同请求发送到服务器的数据。

success(data, textStatus,xhr):可选。请求成功时执行的回调函数。

dataType:可选。规定预期的服务器响应的数据类型。

默认执行智能判断（xml、json、script 或 html）

该函数是简写的 Ajax 函数，等价于：

$.ajax({
      type: 'POST',
      url: url,
      data: data,
      success: success,
      dataType: dataType
});

serialize()：

serialize() 方法通过序列化表单值，创建 URL 编码文本字符串

您可以选择一个或多个表单元素（比如 input 及/或文本框），或者 form 元素本身。

序列化的值可在生成 AJAX 请求时用于 URL 查询字符串中。

$(selector).serialize()

serialize() 方法创建以标准 URL 编码表示的文本字符串。它的操作对象是代表表单元素集合的 jQuery 对象。

serialize() 方法可以操作已选取个别表单元素的 jQuery 对象，比如 <input>, <textarea> 以及 <select>。不过，选择 <form> 标签本身进行序列化一般更容易些

$('form').submit(function () {
      alert($(this).serialize());
      return false;
});
// 输出结果a=1&b=2&c=3&d=4&e=5

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <form action="https://www.baidu.com" method="POST">
        <div>
            <label for="username">用户名：</label>
            <input type="text" id="username" name="username">
        </div>
        <div>
            <label for="password">密码：</label>
            <input type="password" id="password" name="password">
        </div>
        <div>
            <label for="boy">男</label>
            <input type="radio" id="boy" name="sex" value="男" >
            <label for="girl">女</label>
            <input type="radio" id="girl" name="sex" value="女" checked>
        </div>
        <input type="submit">
    </form>
</body>
<script src="./js/jquery.js"></script>
<script>
    $('form').submit(function(){
        console.log($(this));
        // 序列化当前的表表单数据
        console.log($(this).serialize());
        return false
    })
</script>

</html>

serializeArray():

serializeArray() 方法通过序列化表单值来创建对象数组（名称和值）。

[
  {
    name: a,
    value: 1
  },
  {
    name: b,
    value: 2
  },
  {
    name: c,
    value: 3
  },
  {
    name: d,
    value: 4
  },
  {
    name: e,
    value: 5
  }
]

您可以选择一个或多个表单元素（比如 input 及/或 textarea），或者 form 元素本身。

    $(selector).serializeArray()

serializeArray() 方法序列化表单元素（类似 .serialize() 方法），返回 JSON 数据结构数据。

注意：此方法返回的是 JSON 对象而非 JSON 字符串。需要使用插件或者第三方库进行字符串化操作。

返回的 JSON 对象是由一个对象数组组成的，其中每个对象包含一个或两个名值对 —— name 参数和 value 参数。

$("form").submit(function() {
  console.log($(this).serializeArray());
  return false;
});

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <form action="https://www.baidu.com" method="POST">
        <div>
            <label for="username">用户名：</label>
            <input type="text" id="username" name="username" value="admin">
        </div>
        <div>
            <label for="password">密码：</label>
            <input type="password" id="password" name="password" value="123456">
        </div>
        <div>
            <label for="boy">男</label>
            <input type="radio" id="boy" name="sex" value="男">
            <label for="girl">女</label>
            <input type="radio" id="girl" name="sex" value="女" checked>
        </div>
        <input type="submit">
    </form>
</body>
<script src="./js/jquery.js"></script>
<script>
    $(function () {
        $('form').submit(function () {
            // 序列化当前的表表单数据
            console.log($(this).serializeArray());
            return false
        })
    })

</script>

</html>

jQuery.getJSON():

使用 HTTP GET 请求从服务器加载 JSON 编码数据。

<script src="./js/jquery.js"></script>
<script>
    // 立即就绪函数
    $(function () {
        // $.getJSON(url,success(response,status,xhr))
        // 以JSON形式响应数据
        $.getJSON(
            'http://49.233.3.222:8080/home/goods?type=sell&page=10',
            function (response, status, xhr) {
                console.log(response);
            })
    })
</script>

.load():

从服务器加载数据，然后把返回到 HTML 放入匹配元素。

<script src="./js/jquery.js"></script>
<script>
    // 立即就绪函数
    $(function () {
        // 将服务器响应的内容直接加到HTML中
       $('#box').load('http://49.233.3.222:8080/home/goods?type=sell&page=30')
    })
</script>

晚风yY

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JQuery的AJAX方法

jQuery 库拥有完整的 Ajax 兼容套件。其中的函数和方法允许我们在不刷新浏览器的情况下从服务器加载数据$.ajax()：ajax() 方法通过 HTTP 请求加载远程数据。该方法是 jQuery 底层 AJAX 实现。简单易用的高层实现见 $.get, $.post 等。$.ajax() 返回其创建的 XMLHttpRequest 对象。大多数情况下你无需直接操作该函数，除非你需要操作不常用的选项，以获得更多的灵活性。settings[可选]用于配置 Ajax 请求的键值对集合。.
复制链接

扫一扫