不用ajax如何发送json

在互联网的世界里，数据传输无处不在，而JSON作为一种轻量级的数据交换格式，广泛应用于各种场景，我们可能需要在网页中发送JSON数据，但又不希望使用AJAX技术，有没有其他方法可以实现这一需求呢？答案是肯定的！我就来给大家分享几种不用AJAX也能发送JSON的方法。

不用ajax如何发送json

我们要明确一点，发送JSON数据实质上就是将数据以JSON格式传递给服务器,以下几种方法都可以实现这一目标：

使用表单提交

表单提交是我们最熟悉的一种数据传递方式，虽然它默认不支持JSON格式,但我们可以通过一些技巧来实现。

将JSON数据转换为字符串。
将转换后的字符串作为表单的隐藏字段值。
提交表单。

以下是具体的代码示例：

<!DOCTYPE html>
<html>
<head>
    <title>表单提交JSON</title>
</head>
<body>
    <form id="myForm" action="server.php" method="post">
        <input type="hidden" name="jsonData" id="jsonData" />
        <input type="submit" value="提交" />
    </form>
    <script>
        var data = {
            name: "张三",
            age: 25
        };
        // 将JSON数据转换为字符串
        var jsonString = JSON.stringify(data);
        // 将字符串赋值给表单的隐藏字段
        document.getElementById("jsonData").value = jsonString;
    </script>
</body>
</html>

在服务器端，我们可以通过$_POST['jsonData']获取到JSON字符串，再使用json_decode()函数将其转换回数组或对象。

使用JavaScript的fetch API

fetch API是现代浏览器提供的一种全新的网络请求方式，它支持Promise语法,可以让我们更方便地处理网络请求。

以下是使用fetch API发送JSON数据的代码示例：

<!DOCTYPE html>
<html>
<head>
    <title>fetch API发送JSON</title>
</head>
<body>
    <script>
        var data = {
            name: "李四",
            age: 30
        };
        fetch('server.php', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(data)
        })
        .then(response => response.json())
        .then(data => console.log(data))
        .catch(error => console.error('Error:', error));
    </script>
</body>
</html>

在服务器端，我们可以通过file_get_contents("php://input")获取到原始POST数据，再使用json_decode()函数处理。

使用JavaScript的XMLHttpRequest

虽然本文的主题是不用AJAX，但这里提到的XMLHttpRequest并不等同于AJAX，AJAX只是一种技术概念,而XMLHttpRequest是实现AJAX的一种方式。

以下是使用XMLHttpRequest发送JSON数据的代码示例：

<!DOCTYPE html>
<html>
<head>
    <title>XMLHttpRequest发送JSON</title>
</head>
<body>
    <script>
        var data = {
            name: "王五",
            age: 35
        };
        var xhr = new XMLHttpRequest();
        xhr.open('POST', 'server.php', 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));
    </script>
</body>
</html>

在服务器端，同样可以通过file_get_contents("php://input")获取原始POST数据。

使用WebSocket

WebSocket是一种在单个TCP连接上进行全双工通讯的协议，它允许服务端主动推送数据到客户端,也可以实现客户端向服务端发送数据。

以下是使用WebSocket发送JSON数据的代码示例：

<!DOCTYPE html>
<html>
<head>
    <title>WebSocket发送JSON</title>
</head>
<body>
    <script>
        var ws = new WebSocket("ws://localhost:8080");
        ws.onopen = function() {
            var data = {
                name: "赵六",
                age: 40
            };
            ws.send(JSON.stringify(data));
        };
        ws.onmessage = function(e) {
            console.log(e.data);
        };
    </script>
</body>
</html>

在服务器端，需要使用WebSocket相关库（如Ratchet）来处理WebSocket连接。

就是几种不用AJAX也能发送JSON数据的方法，在实际开发中，我们可以根据项目需求和浏览器兼容性来选择合适的方法,希望这篇文章能对你有所帮助！