使用两个按钮发布或显示选定的表单数据

要实现使用两个按钮发布或显示选定的表单数据，我们需要理解一些基础概念，并且根据这些概念来设计解决方案。以下是相关的详细解释和示例代码。

基础概念

表单（Form）：HTML中的表单用于收集用户输入的数据。
按钮（Button）：HTML中的按钮元素用于触发特定的操作。
JavaScript：一种脚本语言，常用于网页交互，如处理表单数据和按钮点击事件。
AJAX：异步JavaScript和XML的缩写，用于在不重新加载整个页面的情况下与服务器交换数据并更新部分网页内容。

优势

用户体验：通过AJAX，用户可以在不刷新页面的情况下提交表单并查看结果，提高了用户体验。
性能：减少了不必要的页面刷新，降低了服务器负载。
灵活性：可以轻松地扩展功能，如表单验证、动态内容更新等。

类型

GET请求：用于从服务器获取数据。
POST请求：用于向服务器发送数据。

应用场景

在线表单提交：用户填写表单后，点击提交按钮，数据通过AJAX发送到服务器。
实时搜索：用户在输入框中输入关键词，页面实时显示搜索结果。

示例代码

以下是一个简单的HTML和JavaScript示例，展示了如何使用两个按钮来发布或显示选定的表单数据。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Form Data Handling</title>
</head>
<body>
    <form id="myForm">
        <label for="name">Name:</label>
        <input type="text" id="name" name="name"><br><br>
        <label for="email">Email:</label>
        <input type="email" id="email" name="email"><br><br>
        <button type="button" onclick="submitData()">Submit</button>
        <button type="button" onclick="displayData()">Display</button>
    </form>
    <div id="result"></div>

    <script>
        function submitData() {
            const formData = new FormData(document.getElementById('myForm'));
            fetch('/submit', {
                method: 'POST',
                body: formData
            })
            .then(response => response.json())
            .then(data => {
                document.getElementById('result').innerText = JSON.stringify(data);
            })
            .catch(error => console.error('Error:', error));
        }

        function displayData() {
            const formData = new FormData(document.getElementById('myForm'));
            document.getElementById('result').innerText = JSON.stringify(Object.fromEntries(formData));
        }
    </script>
</body>
</html>