向后端发起POST请求

1. 请求示例

html 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>获取SN码</title>
</head>

<body>
    <p3>查询参数：</p3>
    <input type="text" id="inpWorkCode" placeholder="生产工单号">
    <input type="number" id="inpQty" placeholder="获取条码数量"><br><br>
    <button id="btnGetSNList">点击获取SN码</button>
    <pre id="showSNList">数据显示区...</pre>

    <script>
        const baseURL = 'http://127.0.0.1:8080';
        const btnGetSNList = document.getElementById('btnGetSNList');
        const showSNList = document.getElementById('showSNList');
        const inpWorkCode = document.getElementById('inpWorkCode');
        const inpQty = document.getElementById('inpQty');

        // 向后端发起请求
        btnGetSNList.addEventListener('click', function () {
            const workCode = inpWorkCode.value.trim();
            const qty = parseInt(inpQty.value);
            // 输入验证
            if (!workCode) {
                showSNList.textContent = '请输入生产工单号';
                return;
            }

            if (isNaN(qty) || qty <= 0) {
                showSNList.textContent = '请输入有效的获取条码数量（正整数）';
                return;
            }
            // 组装请求对象
            const requestObj = {
                workCode: 'CC-FG2512040003',
                qty: 3
            };

            fetch(`${baseURL}/api/Laser/GetLaserData`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(requestObj)
            })
                .then(response => {
                    if (!response.ok) {
                        console.log(`发生错误！`);
                    }
                    return response.text();
                }).then(data => {
                    showSNList.textContent = data;
                }).catch(error => {
                    showSNList.textContent = error.message;
                })
        });




    </script>
</body>

</html>

2. 导出为.txt

html 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>获取SN码</title>
</head>

<body>
    <p3>查询参数：</p3>
    <input type="text" id="inpWorkCode" placeholder="生产工单号" value="CC-FG2512040003">
    <input type="number" id="inpQty" placeholder="获取条码数量" value="3"><br><br>
    <button id="btnGetSNList">点击获取SN码</button>
    <button id="btnExport" disabled>导出为TXT</button><br><br>
    <pre id="showSNList">数据显示区...</pre>

    <script>
        const baseURL = 'http://127.0.0.1:8080';
        const btnGetSNList = document.getElementById('btnGetSNList');
        const btnExport = document.getElementById('btnExport');
        const showSNList = document.getElementById('showSNList');
        const inpWorkCode = document.getElementById('inpWorkCode');
        const inpQty = document.getElementById('inpQty');

        // 存储请求到的数据，用于导出
        let currentData = null;
        let currentWorkCode = '';
        let currentQty = 0;

        // 向后端发起请求
        btnGetSNList.addEventListener('click', function () {
            // 获取输入值
            const workCode = inpWorkCode.value.trim();
            const qty = parseInt(inpQty.value);

            // 输入验证
            if (!workCode) {
                showSNList.textContent = '请输入生产工单号';
                btnExport.disabled = true;
                return;
            }

            if (isNaN(qty) || qty <= 0) {
                showSNList.textContent = '请输入有效的获取条码数量（正整数）';
                btnExport.disabled = true;
                return;
            }

            const requestObj = {
                workCode: workCode,
                qty: qty
            };

            fetch(`${baseURL}/api/Laser/GetLaserData`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(requestObj)
            })
                .then(response => {
                    if (!response.ok) {
                        throw new Error(`HTTP错误！状态码：${response.status}`);
                    }
                    return response.json(); // 解析为JSON对象
                }).then(data => {
                    currentData = data;
                    currentWorkCode = workCode;
                    currentQty = qty;
                    showSNList.textContent = JSON.stringify(data, null, 2); // 格式化显示JSON
                    btnExport.disabled = false; // 启用导出按钮
                }).catch(error => {
                    showSNList.textContent = `请求失败：${error.message}`;
                    btnExport.disabled = true; // 禁用导出按钮
                    currentData = null;
                })
        });

        // 导出为TXT文件
        btnExport.addEventListener('click', function () {
            if (!currentData || !currentWorkCode) {
                showSNList.textContent = '没有可导出的数据';
                return;
            }

            try {
                // 解析数据
                const snList = currentData.Result || [];

                // 组织导出内容
                let content = '';
                // 前三行生产工单号
                content += `${currentWorkCode}\n`;
                content += `${currentWorkCode}\n`;
                content += `${currentWorkCode}\n`;
                // 后续为SN码
                snList.forEach(item => {
                    if (item.fCode) {
                        content += `${item.fCode}\n`;
                    }
                });

                // 生成文件名：年月日_生产工单号.txt
                const now = new Date();
                const year = now.getFullYear();
                const month = String(now.getMonth() + 1).padStart(2, '0');
                const day = String(now.getDate()).padStart(2, '0');
                const dateStr = `${year}${month}${day}`;
                const fileName = `${dateStr}_${currentWorkCode}_${currentQty}.txt`;

                // 创建并下载文件
                const blob = new Blob([content], { type: 'text/plain' });
                const url = URL.createObjectURL(blob);
                const a = document.createElement('a');
                a.href = url;
                a.download = fileName;
                document.body.appendChild(a);
                a.click();
                document.body.removeChild(a);
                URL.revokeObjectURL(url);

                showSNList.textContent += `\n\n文件已导出：${fileName}`;
            } catch (error) {
                showSNList.textContent += `\n\n导出失败：${error.message}`;
            }
        });
    </script>
</body>

</html>