ZYNQ PS HTML服务器和客户端

zynq ps放个html，从windows电脑浏览器打开这个html带发生按钮发送字符串，然后ps再运行一个linux c程序接收并打印字符串，linux C收到回发一个字符串到html界面进行显示。

整体实现思路

通信架构：C 程序作为简易 HTTP 服务器，监听指定端口（如 8080）；HTML 页面通过 AJAX（Fetch API）向该服务器发送 POST 请求（带字符串），并接收服务器的响应字符串。
运行环境：确保 Zynq 的 Linux 系统开启了对应端口的访问权限，Windows 电脑与 Zynq 处于同一局域网，能通过 Zynq 的 IP 访问。
HTML 代码（运行在 Zynq PS 端，命名为index.html）

这个 HTML 页面包含输入框、发送按钮，以及显示接收内容的区域，通过 Fetch API 与 C 服务器通信。

复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Zynq PS 字符串交互</title>
    <style>
        body { margin: 20px; font-family: Arial; }
        .container { max-width: 400px; }
        input { width: 250px; padding: 8px; margin: 10px 0; }
        button { padding: 8px 16px; background: #007bff; color: white; border: none; border-radius: 4px; cursor: pointer; }
        button:hover { background: #0056b3; }
        #response { margin-top: 20px; padding: 10px; border: 1px solid #ccc; min-height: 50px; }
    </style>
</head>
<body>
    <div class="container">
        <h3>字符串发送与接收</h3>
        <input type="text" id="sendInput" placeholder="输入要发送的字符串">
        <button onclick="sendString()">发送</button>
        <div>
            <p>服务器返回内容：</p>
            <div id="response">等待响应...</div>
        </div>
    </div>

    <script>
        // 替换为你的Zynq PS的实际IP地址（如192.168.1.100）
        const SERVER_IP = "192.168.1.100"; 
        const SERVER_PORT = 8080;

        // 发送字符串到C服务器
        function sendString() {
            const input = document.getElementById("sendInput");
            const responseDiv = document.getElementById("response");
            const sendStr = input.value.trim();

            if (!sendStr) {
                alert("请输入要发送的字符串！");
                return;
            }

            // 使用Fetch API发送POST请求
            fetch(`http://${SERVER_IP}:${SERVER_PORT}`, {
                method: "POST",
                headers: {
                    "Content-Type": "text/plain; charset=utf-8",
                },
                body: sendStr // 发送的字符串内容
            })
            .then(response => {
                if (!response.ok) {
                    throw new Error("服务器响应失败");
                }
                return response.text(); // 接收服务器返回的字符串
            })
            .then(data => {
                responseDiv.textContent = data; // 显示返回内容
                console.log("收到服务器返回：", data);
            })
            .catch(error => {
                responseDiv.textContent = "通信失败：" + error.message;
                console.error("通信错误：", error);
            });
        }
    </script>
</body>
</html>

HTML 代码关键说明

SERVER_IP：必须替换为你 Zynq PS 的实际 IP（可在 Zynq Linux 中用ifconfig查看）。
Fetch API：实现异步 HTTP POST 请求，向 C 服务器发送输入的字符串，并接收响应。
页面布局：简洁的输入框、按钮和响应显示区域，适配浏览器操作。

2. Linux C 程序（简易 HTTP 服务器，命名为`server.c`）

这个 C 程序基于 TCP 套接字实现简易 HTTP 服务器，监听 8080 端口，接收浏览器的 POST 请求（提取字符串），打印后返回自定义字符串。