### 实现方案 要在HTML中通过JavaScript实现实现Form提交后，在另一个DIV显示结果的功能，可以采用以下方法： #### 方法概述 可以通过监听表单的`submit`事件来阻止默认行为，并手动获取表单数据。随后，将这些数据显示在目标DIV中。 以下是具体实现方式： --- #### HTML结构设计 创建两个主要部分：一个是用于输入的表单区域，另一个是用于展示结果的目标DIV。 ```html <form id="myForm"> <label for="name">姓名:</label> <input type="text" id="name" name="name"><br><br> <label for="email">邮箱:</label> <input type="email" id="email" name="email"><br><br> <button type="submit">提交</button> </form> <div id="result"></div> ``` --- #### JavaScript逻辑处理 编写脚本以捕获表单提交并更新目标DIV的内容。 ```javascript document.getElementById('myForm').addEventListener('submit', function(event) { event.preventDefault(); // 阻止表单默认提交动作 const formData = new FormData(this); // 获取表单数据 let resultHtml = '<h3>提交的结果：</h3>'; // 将表单字段转换为可读格式 formData.forEach((value, key) => { resultHtml += `<p>${key}: ${value}</p>`; }); // 更新目标DIV内容 document.getElementById('result').innerHTML = resultHtml; }); ``` 此代码片段实现了当用户点击“提交”按钮时，不会刷新整个页面而是仅更新指定的DIV[^1]。 --- #### 动态效果增强 (可选) 为了提升用户体验，可以在结果显示前清空旧的数据或者添加一些动画效果。 ```css /* 基础样式 */ #result { margin-top: 20px; padding: 10px; border: 1px solid #ccc; } ``` --- #### 使用jQuery替代原生JS (如果需要兼容老版本浏览器) 如果你更倾向于使用jQuery库，则可以用如下代码完成相同功能： ```javascript $('#myForm').on('submit', function(e){ e.preventDefault(); var formValues = $(this).serializeArray(), // 序列化表单数据 output = "<h3>提交的结果：</h3>"; $.each(formValues, function(i, field){ output += "<p>" + field.name + ": " + field.value + "</p>"; }); $('#result').html(output); }); ``` 这里我们利用了`.serializeArray()`函数简化了数据收集过程，并且通过遍历数组构建最终要插入DOM树内的字符串[^3]。 --- ### 注意事项 - 如果涉及敏感信息传输，请考虑启用HTTPS协议保护通信安全。 - 对于大型项目建议集成前端框架如React/Vue等组件化管理界面状态变化而非单纯依赖传统DOM操作。