json接口怎么写js

在编写Web应用程序时,JSON接口和JavaScript的配合使用非常常见，那么如何编写一个JSON接口并在JavaScript中调用呢？下面我将详细为大家介绍。

我们需要了解JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，易于人阅读和编写，同时也易于机器解析和生成，JSON接口通常用于前后端分离的Web开发模式中，前端通过JavaScript发送请求，后端返回JSON格式的数据。

创建JSON接口

后端编写JSON接口：这里以PHP为例，创建一个名为data.php的文件。

<?php
// 设置返回头部为JSON格式
header('Content-Type: application/json');
// 创建一个数组，模拟数据库查询结果
$data = array(
    'id' => 1,
    'name' => '张三',
    'age' => 25
);
// 将数组转换为JSON格式并输出
echo json_encode($data);
?>

保存文件后,我们可以通过浏览器访问data.php，查看返回的JSON数据。

JavaScript中调用JSON接口

在HTML文件中,我们可以使用JavaScript中的XMLHttpRequest对象或更现代的fetch API来调用JSON接口。

以下是一个使用fetch API的示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JSON接口调用示例</title>
</head>
<body>
<script>
    // 定义一个函数，用于获取JSON数据
    function getJsonData() {
        fetch('data.php') // 发送请求
            .then(response => response.json()) // 解析JSON数据
            .then(data => {
                // 在这里处理获取到的数据
                console.log(data); // 打印数据到控制台
                // 将数据显示在网页上
                document.write('ID：' + data.id + '<br>');
                document.write('姓名：' + data.name + '<br>');
                document.write('年龄：' + data.age + '<br>');
            })
            .catch(error => {
                // 处理错误情况
                console.error('Error:', error);
            });
    }
    // 调用函数
    getJsonData();
</script>
</body>
</html>