博客

jQuery AJAX

  • Post category:jquery

jQuery AJAX 是一种在 Web 开发中常用的技术，其可以脱离页面刷新，向服务器发起异步请求，并在请求返回后更新页面内容。下面我来给您详细讲解 jQuery AJAX 的完整攻略。

什么是 jQuery AJAX

jQuery AJAX 即使用 jQuery 对 AJAX 的封装实现。AJAX 是 Asynchronous JavaScript and XML 的缩写，指利用 JavaScript 和 XML 技术在不刷新页面的情况下，与服务器端进行异步数据交互。

开始使用 jQuery AJAX

在使用 jQuery AJAX 之前，需要先引入 jQuery 库。可以通过以下方式引入：

<script src="https://cdn.bootcss.com/jquery/3.5.1/jquery.min.js"></script>

jQuery AJAX 的基本语法

以下是 jQuery AJAX 的基本语法，用于向服务器发送请求：

$.ajax({
    url: '',   // 请求URL
    type: '',   // 请求方式
    data: {},  // 发送给服务器的数据
    dataType: '',   // 返回的数据类型
    success: function() {},   // 请求成功的回调函数
    error: function() {}    // 请求失败的回调函数
});

这里的各个参数含义如下：

  • url：请求的 URL。
  • type：请求的方式，可以为 GET 或 POST。
  • data：向服务器发送的数据，可以为键值对或字符串。
  • dataType：返回的类型，可以为 text、html、json、jsonp 等。
  • success：请求成功后的回调函数。
  • error：请求失败后的回调函数。

jQuery AJAX 的请求方式

jQuery AJAX 可以使用 GET 或 POST 请求方式，GET 方式如下：

$.ajax({
    url: 'example.php',   // 请求URL
    type: 'GET',   // 请求方式
    dataType: 'text',   // 返回的数据类型
    success: function(response) {
        // 请求成功的回调函数
        console.log(response);
    },
    error: function() {
        // 请求失败的回调函数
        console.log('请求失败');
    }
});

POST 方式如下：

$.ajax({
    url: 'example.php',   // 请求URL
    type: 'POST',   // 请求方式
    dataType: 'text',   // 返回的数据类型
    data: {name: 'tom', age: 25},    // 发送给服务器的数据
    success: function(response) {
        // 请求成功的回调函数
        console.log(response);
    },
    error: function() {
        // 请求失败的回调函数
        console.log('请求失败');
    }
});

jQuery AJAX 的返回类型

下面是 jQuery AJAX 中常用的返回类型：

  • text：返回纯文本数据。
  • html：返回 HTML 代码。
  • json：返回 JSON 格式的数据。
  • jsonp：（跨域访问）返回 JSONP 格式的数据。
$.ajax({
    url: 'example.php',   // 请求URL
    type: 'GET',   // 请求方式
    dataType: 'json',   // 返回的数据类型
    success: function(result) {
        // 请求成功的回调函数
        console.log(result.name);
        console.log(result.age);
    },
    error: function() {
        // 请求失败的回调函数
        console.log('请求失败');
    }
});

jQuery AJAX 的两个完整示例

下面是两个完整的 jQuery AJAX 示例：

  1. 使用 GET 请求方式向服务器请求数据，并在页面上显示。
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>AJAX GET 请求示例</title>
    <script src="https://cdn.bootcss.com/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $('#btn').click(function(){
                $.ajax({
                    url: 'data.json',
                    type: 'GET',
                    dataType: 'json',
                    success: function(data){
                        var html = '';
                        $.each(data, function(key, value){
                            html += '<li>'+value.name+' - '+value.age+'</li>';
                        });
                        $('#result').html(html);
                    },
                    error: function(){
                        alert('请求失败');
                    }
                });
            });
        });
    </script>
</head>
<body>
    <button id="btn">请求数据</button>
    <ul id="result"></ul>
</body>
</html>

这个示例中，点击按钮后会向服务器发送一个 GET 请求，请求类型为 json，返回 JSON 格式的数据，并将返回的数据解析后显示在页面上。

  1. 使用 POST 请求方式向服务器发送数据，并在页面上显示返回的信息。
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>AJAX POST 请求示例</title>
    <script src="https://cdn.bootcss.com/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $('#btn').click(function(){
                var name = $('#name').val();
                var age = $('#age').val();
                $.ajax({
                    url: 'post.php',
                    type: 'POST',
                    dataType: 'text',
                    data: {name: name, age: age},
                    success: function(data){
                        $('#result').html(data);
                    },
                    error: function(){
                        alert('请求失败');
                    }
                });
            });
        });
    </script>
</head>
<body>
    <input type="text" id="name" placeholder="姓名"><br>
    <input type="text" id="age" placeholder="年龄"><br>
    <button id="btn">提交</button>
    <div id="result"></div>
</body>
</html>

这个示例中，输入姓名和年龄后，点击提交按钮会向服务器发送一个 POST 请求，并将输入的数据发送给服务器。服务器接受到数据后会进行处理，并将处理的结果返回给客户端，客户端接受到返回的数据后将数据显示在页面上。

以上就是 jQuery AJAX 的完整攻略了。

Tags: