javascript实现一个html提交的表单数据放到另一个html页面显示
时间: 2024-03-14 14:43:21 浏览: 33
可以通过以下步骤实现:
1. 在表单所在的 HTML 页面中使用 `<form>` 标签创建表单,并定义表单的 `action` 属性为需要显示表单数据的 HTML 页面路径:
```html
<!-- 在表单所在的 HTML 页面 -->
<form action="display.html">
<!-- 表单控件 -->
</form>
```
2. 在表单中定义需要提交的数据项,并为每个数据项定义一个 `name` 属性:
```html
<!-- 在表单所在的 HTML 页面 -->
<form action="display.html">
<label>姓名:<input type="text" name="name"></label>
<label>年龄:<input type="number" name="age"></label>
<!-- 其他表单控件 -->
<button type="submit">提交</button>
</form>
```
3. 在提交按钮中使用 `<button>` 标签,并将 `type` 属性设置为 `submit`,这样点击按钮时就会提交表单数据到目标页面:
```html
<!-- 在表单所在的 HTML 页面 -->
<form action="display.html">
<label>姓名:<input type="text" name="name"></label>
<label>年龄:<input type="number" name="age"></label>
<!-- 其他表单控件 -->
<button type="submit">提交</button>
</form>
```
4. 在目标 HTML 页面中使用 JavaScript 读取表单数据,并将数据显示在页面中。可以通过 `document.querySelector()` 方法获取表单元素,然后通过 `element.value` 属性获取表单元素的值:
```html
<!-- 在目标 HTML 页面 -->
<p>姓名: <span id="name"></span></p>
<p>年龄: <span id="age"></span></p>
<script>
// 获取表单数据
const urlSearchParams = new URLSearchParams(window.location.search);
const formData = Object.fromEntries(urlSearchParams.entries());
// 显示表单数据
document.querySelector('#name').textContent = formData.name;
document.querySelector('#age').textContent = formData.age;
</script>
```
以上代码会从 URL 中获取查询参数,然后将查询参数转化为对象,最后在页面中显示表单数据。