HTML表单如何实现XML提交？怎样以XML格式发送表单数据？

application/x-www-form-urlencoded

multipart/form-data

action

method

<form id="myForm">
    <label for="username">用户名:</label>
    <input type="text" id="username" name="username"><br><br>
    <label for="email">邮箱:</label>
    <input type="email" id="email" name="email"><br><br>
    <button type="submit">提交XML数据</button>
</form>

<script>
    document.getElementById('myForm').addEventListener('submit', function(event) {
        event.preventDefault(); // 阻止表单默认提交

        const form = event.target;
        const username = form.username.value;
        const email = form.email.value;

        // 构建XML字符串
        const xmlData = `<?xml version="1.0" encoding="UTF-8"?>
<user>
    <username>${username}</username>
    <email>${email}</email>
</user>`;

        // 使用Fetch API发送XML数据
        fetch('/submit-xml-endpoint', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/xml; charset=utf-8' // 明确指定Content-Type
            },
            body: xmlData // 将XML字符串作为请求体
        })
        .then(response => {
            if (!response.ok) {
                throw new Error('网络响应不佳或服务器错误');
            }
            return response.text(); // 或者 response.json() 如果服务器返回JSON
        })
        .then(data => {
            console.log('XML数据提交成功:', data);
            alert('数据已成功提交！');
            // 可以根据服务器返回的数据进行进一步操作
        })
        .catch(error => {
            console.error('提交XML数据时发生错误:', error);
            alert('提交失败，请检查控制台。');
        });
    });
</script>

<form>

application/x-www-form-urlencoded

multipart/form-data

application/xml

text/xml

Content-Type

xml2js

const express = require('express');
const bodyParser = require('body-parser'); // 用于解析请求体
const xml2js = require('xml2js'); // XML解析库

const app = express();
const port = 3000;

// 配置body-parser来解析XML
// 注意：body-parser的xml选项需要额外的parser，或者手动处理
// 简单的做法是将其作为文本接收，然后手动解析
app.use(bodyParser.text({ type: 'application/xml' }));

app.post('/submit-xml-endpoint', (req, res) => {
    const xmlString = req.body; // 获取原始XML字符串
    console.log('接收到原始XML数据:', xmlString);

    if (!xmlString) {
        return res.status(400).send('未接收到XML数据');
    }

    xml2js.parseString(xmlString, { explicitArray: false }, (err, result) => {
        if (err) {
            console.error('解析XML时出错:', err);
            return res.status(500).send('服务器处理XML数据失败');
        }
        console.log('解析后的XML对象:', result);
        // 假设XML是 <user><username>...</username><email>...</email></user>
        const username = result.user.username;
        const email = result.user.email;

        // 在这里可以对数据进行进一步处理，如存入数据库
        console.log(`用户名: ${username}, 邮箱: ${email}`);

        res.status(200).send(`服务器已成功接收并处理数据。用户名: ${username}`);
    });
});

app.listen(port, () => {
    console.log(`服务器运行在 http://localhost:${port}`);
});

bodyParser.text({ type: 'application/xml' })

Content-Type

application/xml

xml2js.parseString

{ explicitArray: false }

DocumentBuilderFactory

SAXParserFactory