网页post到易语言服务端-网页设计-锦华智联科技

网页端 (客户端)：如何构造并发送 POST 请求。
易语言端 (服务端)：如何接收并处理这个请求。

第一步：网页端 - 发送 POST 请求

网页端通常使用 JavaScript 来完成这个任务，最现代、最推荐的方法是使用 fetch API，它比传统的 XMLHttpRequest 更简洁、更强大。

（图片来源网络，侵删）

这里我们提供几种常见的数据格式：application/x-www-form-urlencoded、multipart/form-data（用于文件上传）和 application/json。

发送 `application/x-www-form-urlencoded` 数据

这是最传统的表单提交方式,适用于简单的键值对数据。

HTML 示例 (index.html)

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">POST 到易语言服务端</title>
</head>
<body>
    <h2>易语言服务端数据提交测试</h2>
    <form id="myForm">
        <label for="username">用户名:</label>
        <input type="text" id="username" name="username" value="张三"><br><br>
        <label for="age">年龄:</label>
        <input type="number" id="age" name="age" value="25"><br><br>
        <label for="message">留言:</label>
        <textarea id="message" name="message" rows="4">你好，易语言！</textarea><br><br>
        <button type="submit">提交数据</button>
    </form>
    <div id="response" style="margin-top: 20px; padding: 10px; border: 1px solid #ccc; display: none;">
        <h3>服务端返回：</h3>
        <pre id="responseContent"></pre>
    </div>
    <script>
        document.getElementById('myForm').addEventListener('submit', function(event) {
            // 阻止表单默认的提交行为（页面刷新）
            event.preventDefault();
            // 获取表单数据
            const formData = new FormData(this);
            // 使用 fetch API 发送 POST 请求
            fetch('http://127.0.0.1:8080/post', { // 易语言服务端监听的地址和端口
                method: 'POST',
                body: formData // 直接将 FormData 对象作为 body
            })
            .then(response => {
                // 检查响应状态码
                if (!response.ok) {
                    throw new Error('网络响应不正常');
                }
                // 解析响应文本
                return response.text();
            })
            .then(data => {
                // 在页面上显示服务端返回的数据
                document.getElementById('responseContent').textContent = data;
                document.getElementById('response').style.display = 'block';
                console.log('服务端返回:', data);
            })
            .catch(error => {
                console.error('请求错误:', error);
                alert('提交失败: ' + error.message);
            });
        });
    </script>
</body>
</html>

发送 `application/json` 数据

这是目前最流行的方式，适用于前后端分离的项目,可以发送结构化的复杂数据。

（图片来源网络，侵删）

JavaScript 修改部分

// 在上面的 JavaScript 中，将 fetch 部分替换为以下代码：
document.getElementById('myForm').addEventListener('submit', function(event) {
    event.preventDefault();
    // 创建一个 JavaScript 对象
    const data = {
        username: document.getElementById('username').value,
        age: parseInt(document.getElementById('age').value),
        message: document.getElementById('message').value
    };
    // 将对象转换为 JSON 字符串
    const jsonData = JSON.stringify(data);
    fetch('http://127.0.0.1:8080/json', {
        method: 'POST',
        headers: {
            // 告诉服务端，我发送的是 JSON 格式的数据
            'Content-Type': 'application/json'
        },
        body: jsonData // 发送 JSON 字符串
    })
    .then(response => response.text())
    .then(data => {
        document.getElementById('responseContent').textContent = data;
        document.getElementById('response').style.display = 'block';
        console.log('服务端返回:', data);
    })
    .catch(error => {
        console.error('请求错误:', error);
        alert('提交失败: ' + error.message);
    });
});

第二步：易语言端 - 接收 POST 请求

易语言没有内置的、像 Node.js 或 Java 那样高级的网络库，我们需要借助第三方 DLL 来实现一个 HTTP 服务，最常用、最稳定的选择是 WinINet 相关的 DLL，或者更现代的 libcurl 封装 DLL。

这里我们以 libcurl 为例，因为它功能强大，支持 HTTP/HTTPS,并且社区有现成的易语言封装库。

准备工作：获取 libcurl 易语言库

搜索库：在易语言相关论坛（如“易语言论坛”）或资源站搜索“易语言 libcurl”、“易语言 HTTP 服务”等关键词。
下载：下载一个包含 .e、.dll 和说明文档的完整库。易语言libcurl网络库 或类似名称的库。
解压：将下载的文件解压到你的易语言工程目录下。

易语言服务端代码示例

假设你已经下载并解压了一个名为 libcurl.e 的库文件。

.版本 2
.程序集 程序集1
.子程序 _启动子程序, , 公开
.局部变量 server, HTTP服务
.局部变量 port, 整数型
.(取命令行参数数 () > 0)
    port = 到整数 (取命令行参数 (1))
.否则
    port = 8080 ' 默认端口
.如果结束
' 创建一个 HTTP 服务，监听所有网络接口 (0.0.0.0) 的指定端口
.如果真 (server.创建 (port, , , , , 真) = 假)
    信息框 ("创建服务失败，可能端口被占用！", 0, , )
    返回 ()
.如果真结束
' 注册请求处理子程序
server.注册请求 ("post", _处理POST请求, , 真) ' "post" 是路径，_处理POST请求是子程序名
server.注册请求 ("json", _处理JSON请求, , 真) ' 注册一个处理 JSON 的路径
' 启动服务，并等待连接
server.启动 ()
信息框 ("服务已启动，监听端口：" + 到文本 (port), 0, , )
信息框 ("请在浏览器中访问 http://127.0.0.1:" + 到文本 (port) + "/post 或 /json", 0, , )
' 主循环，保持程序运行
.计次循环首 (100000, i)
    ' server.取一条连接 () ' 如果需要手动处理连接，可以使用此方法
    ' 这里我们简单等待
    延时 (100)
.计次循环尾 ()
' 关闭服务
server.关闭 ()
.子程序 _处理POST请求
.参数 请求, HTTP请求, , 
.参数 响应, HTTP响应, , 
' --- 1. 获取 POST 请求体数据 ---
.局部变量 postData, 文本型
postData = 请求.取数据 ()
' --- 2. 获取请求头信息 (可选) ---
.局部变量 contentType, 文本型
contentType = 请求.取请求头 ("Content-Type")
输出调试文本 ("收到 POST 请求")
输出调试文本 ("请求头 Content-Type: " + contentType)
输出调试文本 ("请求体数据: " + postData)
' --- 3. 处理数据 ---
' 对于 application/x-www-form-urlencoded，我们可以按 "&" 和 "=" 分割
' 这里我们简单地将收到的数据原样返回，并附加一些信息
.局部变量 返回文本, 文本型
返回文本 = "易语言服务端已收到你的表单数据！\n"
返回文本 = 返回文本 + "你发送的内容是: " + postData + "\n"
返回文本 = 返回文本 + "当前时间: " +取现行时间 ()
' --- 4. 设置响应头 (可选) ---
' 告诉浏览器返回的是纯文本
响应.置响应头 ("Content-Type", "text/plain; charset=utf-8")
' --- 5. 发送响应 ---
响应.输出 (返回文本)
响应.发送 ()
.子程序 _处理JSON请求
.参数 请求, HTTP请求, , 
.参数 响应, HTTP响应, , 
.局部变量 jsonData, 文本型
jsonData = 请求.取数据 ()
输出调试文本 ("收到 JSON 请求")
输出调试文本 ("请求体数据: " + jsonData)
' 假设我们收到了 {"username":"张三", "age":25, "message":"你好"}
' 我们可以构造一个返回的 JSON
.局部变量 返回JSON, 文本型
返回JSON = "{"
返回JSON = 返回JSON + " ""status"": ""success"", "
返回JSON = 返回JSON + " ""message"": ""数据已收到"", "
返回JSON = 返回JSON + " ""your_data"": " + jsonData + " "
返回JSON = 返回JSON + "}"
' 设置响应头为 JSON
响应.置响应头 ("Content-Type", "application/json; charset=utf-8")
' 发送 JSON 响应
响应.输出 (返回JSON)
响应.发送 ()

启动易语言服务端：
- 编译并运行上面的易语言代码。
- 程序会弹出一个提示框，告诉你服务已启动在 8080 端口。
- 你可以在易语言的“输出调试信息”窗口看到收到的请求日志。
打开网页：
- 用浏览器打开你创建的 index.html 文件。
- 重要：如果网页文件不是通过 http:// 协议访问的（比如直接双击打开 file:///C:/.../index.html），浏览器的安全策略可能会阻止它向 http://127.0.0.1:8080 发送请求，你需要使用一个本地 Web 服务器来托管你的 HTML 文件，或者直接使用浏览器的开发者工具暂时禁用安全策略，最简单的方法是使用 VS Code 的 Live Server 插件。
提交数据：
- 在网页表单中填写数据，然后点击“提交数据”按钮。
- JavaScript 会向易语言服务端发送 POST 请求。
- 易语言服务端会接收到请求，执行 _处理POST请求 或 _处理JSON请求 子程序。
- 服务端处理完后,将响应数据发送回网页。
- 网页的 JavaScript 接收到响应,并将其显示在页面上。

常见问题与注意事项

端口占用：8080 端口被其他程序占用，易语言服务端会启动失败，你可以在易语言代码中修改端口号，或者在命令行中指定端口号来运行程序（例如编译后的exe文件后面跟一个端口号：MyServer.exe 9090）。
跨域问题 (CORS)：如果你的网页和易语言服务端不在同一个域名或端口下，浏览器会因为同源策略而阻止请求，上面的示例中，网页和服务器都在 0.0.1 但不同端口，所以会遇到 CORS 问题，解决方法是在易语言服务端响应头中添加 Access-Control-Allow-Origin: *，你可以在 _处理POST请求 子程序的 响应.置响应头 之前加上：响应.置响应头 ("Access-Control-Allow-Origin", "*")。
易语言库的选择：不同的 libcurl 封装库，其 API（方法名、参数）可能略有不同,请务必参考你所使用的库自带的说明文档。
数据编码：确保网页端和易语言端在处理中文等特殊字符时都使用 UTF-8 编码，以避免乱码,上面的示例已经做了相应处理。
安全性：这个示例是基础演示，在实际生产环境中，你需要考虑身份验证、数据验证、防止SQL注入、防止跨站脚本攻击等多种安全问题。

网页post到易语言服务端