php基于jquery的ajax技术传递json数据简单实例

2023年5月27日上午9:23 • JavaScript

下面开始详细讲解“php基于jquery的ajax技术传递json数据简单实例”的完整攻略：

一、什么是 AJAX？

AJAX(Ajax Asynchronous Javascript and XML)，即异步的 JavaScript 和 XML。它是一种在Web页面直接与服务器进行数据交互的技术，可以提高页面的交互能力，免去了页面的刷新，页面在不刷新的情况下动态更新数据。

二、什么是 JSON？

JSON(JavaScript Object Notation)是基于文本的轻量级数据交换格式，被广泛用于Web应用程序中，也可用于其他语言环境。

三、基于 jQuery 实现 AJAX 传递 JSON 数据

1. 客户端（前端）代码

通过 jQuery.ajax() 函数来实现 AJAX 传递 JSON 数据：

$.ajax({
    url: 'xxx.php', // 发送请求的地址
    type: 'POST', // 请求方式
    data: JSON.stringify({ // 向服务器发送的数据
        name: 'Tom',
        age: 18,
        gender: 'male'
    }),
    contentType: 'application/json; charset=utf-8', // 发送数据的格式，必须为 JSON 格式
    dataType: 'json', // 接收服务器返回的数据格式
    success: function (response) { // 请求成功后的回调函数
        console.log(response);
    },
    error: function (xhr, status, error) { // 请求失败后的回调函数
        console.log(error);
    }
});

2. 服务端（后端）代码

在服务端接收 AJAX 传递的 JSON 数据，在 PHP 中可以通过 file_get_contents('php://input') 函数来获得，然后通过 json_decode() 函数将 JSON 数据转换成 PHP 的数组或对象。

<?php
// 从请求中获取JSON字符串
$json = file_get_contents('php://input');
// 将JSON字符串转换成PHP对象
$data = json_decode($json);
// 输出结果
echo json_encode([
    'code' => 200,
    'message' => 'success',
    'data' => $data
]);
?>

四、示例说明

1. AJAX 登录示例

前端代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Ajax Login</title>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script>
        $(function () {
            $('#login_btn').on('click', function () {
                $.ajax({
                    url: 'login.php',
                    type: 'post',
                    data: JSON.stringify({
                        username: $('#username').val(),
                        password: $('#password').val()
                    }),
                    contentType: "application/json;charset=utf-8",
                    dataType: 'json',
                    success: function (response) {
                        if (response.code === 200) {
                            alert(response.message);
                        } else {
                            alert(response.message);
                        }
                    },
                    error: function (xhr, status, error) {
                        console.log(error);
                    }
                });
            });
        });
    </script>
</head>
<body>
<form>
    <label>Username:</label>
    <input type="text" id="username">
    <br>
    <label>Password:</label>
    <input type="password" id="password">
    <br>
    <button type="button" id="login_btn">Login</button>
</form>
</body>
</html>

后端代码：

<?php
// 从请求中获取JSON字符串
$json = file_get_contents('php://input');
// 将JSON字符串转换成PHP对象
$data = json_decode($json);

// 进行登录验证
if ($data->username === 'admin' && $data->password === '123456') {
    // 登录成功
    echo json_encode([
        'code' => 200,
        'message' => '登录成功',
        'data' => null
    ]);
} else {
    // 登录失败
    echo json_encode([
        'code' => 400,
        'message' => '用户名或密码错误',
        'data' => null
    ]);
}
?>

2. AJAX 获取 RSS 示例