如何在HTML中发送PUT/DELETE请求？

在HTML中，默认情况下，表单只支持GET和POST请求。但是，可以通过JavaScript来发送PUT和DELETE请求。以下是几种常见的方法：

方法一：使用XMLHttpRequest

function sendPutRequest(url, data) {
    var xhr = new XMLHttpRequest();
    xhr.open('PUT', url, true);
    xhr.setRequestHeader('Content-Type', 'application/json');
    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
            console.log(xhr.responseText);
        }
    };
    xhr.send(JSON.stringify(data));
}

function sendDeleteRequest(url) {
    var xhr = new XMLHttpRequest();
    xhr.open('DELETE', url, true);
    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
            console.log(xhr.responseText);
        }
    };
    xhr.send();
}

方法二：使用Fetch API

async function sendPutRequest(url, data) {
    try {
        const response = await fetch(url, {
            method: 'PUT',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(data)
        });
        if (response.ok) {
            const result = await response.json();
            console.log(result);
        }
    } catch (error) {
        console.error('Error:', error);
    }
}

async function sendDeleteRequest(url) {
    try {
        const response = await fetch(url, {
            method: 'DELETE'
        });
        if (response.ok) {
            console.log('Success');
        }
    } catch (error) {
        console.error('Error:', error);
    }
}

方法三：使用Axios（需要安装Axios库）

import axios from 'axios';

function sendPutRequest(url, data) {
    axios.put(url, data)
        .then(response => {
            console.log(response.data);
        })
        .catch(error => {
            console.error('Error:', error);
        });
}

function sendDeleteRequest(url) {
    axios.delete(url)
        .then(response => {
            console.log('Success');
        })
        .catch(error => {
            console.error('Error:', error);
        });
}