javaweb

最新推荐文章于 2024-07-25 11:52:08 发布

许照唯

最新推荐文章于 2024-07-25 11:52:08 发布

阅读量44

点赞数

分类专栏： web 文章标签： html javascript servlet

本文链接：https://blog.csdn.net/weixin_54155548/article/details/131131260

版权

web 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

javascript实现一个html提交的表单数据放到另一个html页面显示

点击复制后，将打开C知道体验页
可以使用以下步骤实现：
1. 在提交表单的HTML页面中，使用form标签包裹表单元素，并设置action属性为另一个HTML页面的URL，method属性为"post"。
2. 在表单中添加需要提交的表单元素，例如input、textarea等。
3. 在提交表单的HTML页面中，添加一个提交按钮，使用input标签，并设置type属性为"submit"。
4. 在接收表单数据的HTML页面中，使用JavaScript获取表单数据。
5. 在接收表单数据的HTML页面中，使用JavaScript将获取到的表单数据渲染到页面上。
以下是一个示例代码：

提交表单的HTML页面：
```
复制<form action="receiveData.html" method="post">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name">
  <br>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email">
  <br>
  <input type="submit" value="Submit">
</form>
```
接收表单数据的HTML页面：
```
复制<!DOCTYPE html>
<html>
<head>
  <title>Received Data</title>
</head>
<body>
  <h1>Received Data:</h1>
  <div id="data"></div>
  <script>
    // 获取表单数据
    const name = new URLSearchParams(window.location.search).get('name');
    const email = new URLSearchParams(window.location.search).get('email');

    // 渲染表单数据
    const dataDiv = document.getElementById('data');
    dataDiv.innerHTML = `<p>Name: ${name}</p><p>Email: ${email}</p>`;
  </script>
</body>
</html>
```
在这个示例中，当我们在提交表单的HTML页面中填写表单数据并点击提交按钮后，浏览器会跳转到接收表单数据的HTML页面，并且将表单数据以URL参数的形式传递给该页面。JavaScript代码在接收表单数据的HTML页面中获取URL参数中的表单数据，并将其渲染到页面上。

点击复制后，将打开C知道体验页

|

    <input type="text" name="" class="title" placeholder="请输入标题" id="a">         <!-- <input class="form_input" type="text"  id="todo" name="to-do" size="30" required> -->         <textarea name="" class="content" cols="30" rows="10" placeholder="请输入内容" id="a">         </textarea>如何将input数据写入数据库

点击复制后，将打开C知道体验页

要将输入框中的数据写入数据库，你需要使用后端编程语言（例如PHP、Python、Node.js等）来处理表单数据并将其存储到数据库中。以下是一些大致步骤：
1. 在表单的<form>标签中添加action属性和method属性，action属性指向后端处理表单数据的代码的URL，method属性为post。
2. 在后端处理表单数据的代码中，使用相应的数据库操作语句将表单数据存储到数据库中，例如使用SQL语句进行插入操作。
3. 在后端处理表单数据的代码中，获取表单数据的方式取决于使用的后端编程语言和框架。可以使用$_POST（PHP）、request.body（Node.js）等方式获取表单数据。
4. 在前端页面中，要确保输入的数据符合后端处理表单数据的要求，例如输入框的name属性要与后端代码中获取表单数据的方式相对应。
以下是一个大致的示例代码：

HTML代码：
```
复制<form action="saveData.php" method="post">
  <label for="title">标题:</label>
  <input type="text" id="title" name="title">
  <br>
  <label for="content">内容:</label>
  <textarea id="content" name="content"></textarea>
  <br>
  <input type="submit" value="提交">
</form>
```
PHP代码：
```
复制<?php
// 连接数据库
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "myDB";

$conn = new mysqli($servername, $username, $password, $dbname);

// 检查连接
if ($conn->connect_error) {
  die("Connection failed: " . $conn->connect_error);
}

// 获取表单数据
$title = $_POST['title'];
$content = $_POST['content'];

// 插入数据到数据库
$sql = "INSERT INTO myTable (title, content) VALUES ('$title', '$content')";

if ($conn->query($sql) === TRUE) {
  echo "数据已成功写入数据库";
} else {
  echo "Error: " . $sql . "<br>" . $conn->error;
}

$conn->close();
?>
```
在这个示例中，当用户在前端页面中填写表单数据并提交表单时，表单数据会被发送到后端的saveData.php代码中进行处理。在saveData.php中，使用$_POST获取表单数据，并将其插入到名为myTable的数据库表中。如果插入操作成功，会向用户返回一条成功信息，否则会返回一个错误信息。

许照唯

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javaweb

在这个示例中，当我们在提交表单的HTML页面中填写表单数据并点击提交按钮后，浏览器会跳转到接收表单数据的HTML页面，并且将表单数据以URL参数的形式传递给该页面。在提交表单的HTML页面中，使用form标签包裹表单元素，并设置action属性为另一个HTML页面的URL，method属性为"post"。在后端处理表单数据的代码中，使用相应的数据库操作语句将表单数据存储到数据库中，例如使用SQL语句进行插入操作。在接收表单数据的HTML页面中，使用JavaScript将获取到的表单数据渲染到页面上。
复制链接

扫一扫