使用js在html onclick上发出rest请求

基础概念

在HTML中，onclick 是一个事件处理程序，用于在用户点击元素时执行JavaScript代码。REST（Representational State Transfer）请求是一种用于访问和操作Web资源的架构风格。通过JavaScript发起REST请求，通常使用XMLHttpRequest对象或现代的fetch API。

类型

GET请求：用于请求服务器发送某个资源。
POST请求：用于向服务器提交新的资源。
PUT请求：用于更新服务器上的资源。
DELETE请求：用于删除服务器上的资源。

应用场景

数据获取：从服务器获取数据并在前端显示。
表单提交：将用户输入的数据提交到服务器进行处理。
资源更新：修改服务器上的数据。
资源删除：删除服务器上的特定资源。

示例代码

以下是一个使用JavaScript在HTML onclick 事件上发起REST请求的示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>REST Request Example</title>
</head>
<body>
    <button id="myButton">Click Me</button>

    <script>
        document.getElementById('myButton').onclick = function() {
            fetch('https://api.example.com/data', {
                method: 'GET',
                headers: {
                    'Content-Type': 'application/json'
                }
            })
            .then(response => response.json())
            .then(data => {
                console.log('Success:', data);
            })
            .catch((error) => {
                console.error('Error:', error);
            });
        };
    </script>
</body>
</html>