jQuery中的AJAX - 爱码网

零、码仙励志

一、$.ajax

1.常用选项参数介绍

零、码仙励志

抱怨身处黑暗，不如提灯前行

一、$.ajax

1.常用选项参数介绍

url：请求地址

type：请求方法，默认为 get

dataType：服务端响应数据类型

contentType：请求体内容类型，默认 application/x-www-form-urlencoded

data：需要传递到服务端的数据，如果 GET 则通过 URL 传递，如果 POST 则通过请求体传递

timeout：请求超时时间

beforeSend：请求发起之前触发

success：请求成功之后触发（响应状态码 200）

error：请求失败触发

complete：请求完成触发（不管成功与否）

2.最基础的调用

<body>
<script src="jquery.js"></script>
<script>
    $.ajax({
        url: "time.php",
        type: "post", // method请求方式
        // 请求成功之后触发
        success: function (res) {
            // res拿到的只是响应体
            console.log(res);
        }
    });
</script>
</body>

time.php

<?php
echo time();

jQuery中的AJAX

3.type属性

    $.ajax({
        url: 'json.php',
        type: 'post',
        // 用于提交到服务端的参数，
        // 如果是 GET 请求就通过 url 传递
        // 如果是 POST 请求就通过请求体传递
        data: {id: 1, name: '张三'},
        success: function (res) {
            console.log(res)
        }
    })

4.dataType属性

    $.ajax({
        url: 'json.php',
        type: 'get',
        // 设置的是请求参数
        data: {id: 1, name: '张三'},
        // 用于设置响应体的类型 注意 跟 data 参数没关系！！！
        dataType: 'json',
        success: function (res) {
            // 一旦设置的 dataType 选项，就不再关心 服务端 响应的 Content-Type 了
            // 客户端会主观认为服务端返回的就是 JSON 格式的字符串
            console.log(res)
        }
    })

json.php

<?php

$zhangsan = array('name' => '张三', 'age' => 18);

// 于情于理都应该设置 application/json
// header('Content-Type: application/json');

echo json_encode($zhangsan);

jQuery中的AJAX

5.jQuery中AJAX的回调

    $.ajax({
        url: 'time.php',
        type: 'get',
        beforeSend: function (xhr) {
            // 在所有发送请求的操作（open, send）之前执行
            console.log('beforeSend', xhr)
        },
        success: function (res) {
            // 隐藏 loading
            // 只有请求成功（状态码为200）才会执行这个函数
            console.log(res)
        },
        error: function (xhr) {
            // 隐藏 loading
            // 只有请求不正常（状态码不为200）才会执行
            console.log('error', xhr)
        },
        complete: function (xhr) {
            // 不管是成功还是失败都是完成，都会执行这个 complete 函数
            console.log('complete', xhr)
        }
    })

jQuery中的AJAX

二、$.get和$.post

两种在客户端和服务器端进行请求-响应的常用方法是：GET 和 POST。

GET - 从指定的资源请求数据

POST - 向指定的资源提交要处理的数据

GET 基本上用于从服务器获得（取回）数据。注释：GET 方法可能返回缓存数据。

POST 也可用于从服务器获取数据。不过，POST 方法不会缓存数据，并且常用于连同请求一起发送数据。

1.$.get

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

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

<script>
    $.get("demo_test.php", function (data, status) {
        console.log("数据: " + data + "\n状态: " + status);
    });
</script>

demo_test.php

<?php
echo '这是个从PHP文件中读取的数据。';
?>

jQuery中的AJAX

2.$.post

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

语法:
$.post(URL,data,callback);
必需的 URL 参数规定您希望请求的 URL。
可选的 data 参数规定连同请求发送的数据。

    $.post("demo_test_post.php",
        {
            name: "码仙",
            url: "https://blog.csdn.net/tswc_byy"
        },
        function (data, status) {
            console.log("数据: \n" + data + "\n状态: " + status);
        }
    );

demo_test_post.php

<?php
$name = isset($_POST['name']) ? htmlspecialchars($_POST['name']) : '';
$url = isset($_POST['url']) ? htmlspecialchars($_POST['url']) : '';
echo '网站名: ' . $name;
echo "\n";
echo 'URL 地址: ' .$url;
?>

jQuery中的AJAX

三、load方法

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

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

demo_test.txt

<h2>jQuery AJAX 是个非常棒的功能！</h2>
<p id="p1">这是段落的一些文本。</p>

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            border: 2px solid pink;
        }
    </style>
</head>
<body>
<div id="dv1"></div>
<div id="dv2"></div>
<script src="jquery.js"></script>
<script>
    $("#dv1").load("demo_test.txt");
    $("#dv2").load("demo_test.txt #p1");
</script>
</body>

jQuery中的AJAX

可选的 callback 参数规定当 load() 方法完成后所要允许的回调函数。回调函数可以设置不同的参数：
responseTxt - 包含调用成功时的结果内容
statusTXT - 包含调用的状态
xhr - 包含 XMLHttpRequest 对象

    $("#dv1").load("demo_test.txt", function (responseTxt, statusTxt, xhr) {
        console.log(responseTxt);
        console.log(statusTxt);
        console.log(xhr);
    });

jQuery中的AJAX

四、ajaxStart和ajaxStop

<script>
    $(document).ajaxStart(function () {
        // 只要有 ajax 请求发生 就会执行
        console.log('注意即将要开始请求了');
    }).ajaxStop(function () {
        // 只要有 ajax 请求发生 就会执行
        console.log('请求结束了');
    });
    $.get("demo_test.txt");
</script>

jQuery中的AJAX

五、getJSON

通过 HTTP GET 请求载入 JSON 数据。

语法
jQuery.getJSON(url,data,success(data,status,xhr))

jQuery中的AJAX

详细说明
该函数是简写的 Ajax 函数，等价于：

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

发送到服务器的数据可作为查询字符串附加到 URL 之后。如果 data 参数的值是对象（映射），那么在附加到 URL 之前将转换为字符串，并进行 URL 编码。

传递给 callback 的返回数据，可以是 JavaScript 对象，或以 JSON 结构定义的数组，并使用 $.parseJSON() 方法进行解析。

示例

<script>
    $.getJSON("test.php", function (result) {
        console.log(result)
    })
</script>

test.php

<?php

header('Content-Type: application/json');
/**
 * 返回的响应就是一个 JSON 内容（返回的就是数据）
 * 对于返回数据的地址一般我们称之为接口（形式上是 Web 形式）
 */

// users.php?id=1 => id 为 1 的用户信息

$data = array(
  array(
    'id' => 1,
    'name' => '张三',
    'age' => 18
  ),
  array(
    'id' => 2,
    'name' => '李四',
    'age' => 20
  ),
  array(
    'id' => 3,
    'name' => '二傻子',
    'age' => 18
  )
);
$json = json_encode($data); // => [{"id":1,"name":"张三"},{...}]
echo $json;

jQuery中的AJAX

本篇博客来自于传智播客****、菜鸟教程网站、W3school的总结以及笔记的整理，仅供学习交流，切勿用于商业用途，如有侵权，请联系博主删除，博主QQ：194760901