Javascript:如何将数据插入mysql

javascript: how to insert data into mysql

本文关键字：数据 插入 mysql Javascript      更新时间：2023-09-26

我有一个问题，我如何用javascript将数据插入MySql DB ?

我有以下JS代码:

function saveData()
{
    var table = document.getElementById('tblResult');
    var rowCount = table.rows.length;
    i = rowCount;
    var template = "<tr> <td>"+i+"</td> <td>"+document.getElementById('ctrl_ball_size_val').value+"</td> <td style='text-align: center; background-color: lime;'>± 0.1</td> <td>"+document.getElementById('ctrl_cilindr_height_val').value+"</td> <td style='text-align: center; background-color: lime;'>± 0.1</td> <td>"+document.getElementById('stopwatch').value+"</td> <td style='text-align: center; background-color: lime;'>± 0.1</td> <td>11300</td> <td style='text-align: center; background-color: lime;'>± 0.1</td> <td>1260</td> <td style='text-align: center; background-color: lime;'>± 0.1</td> </tr>";
    $('tbody').append(template);
}

与此代码，我正在建立一个动态数据表，我从输入html页面。下面是表格的HTML代码:

<table id="tblResult" class="zebra-striped">
    <thead>
    <tr>
        <th id="ID">Nr.p.k</th>
        <th>d ± △d, mm</th>
        <th style="background-color: lime;">△d, mm</th>
        <th>l ± △l, cm</th>
        <th style="background-color: lime;">△l, cm</th>
        <th>t ± △t, s</th>
        <th style="background-color: lime;">△t, s</th>
        <th>p ± △p, kg/m<sup>3</sup></th>
        <th style="background-color: lime;">△p, kg/m<sup>3</sup></th>
        <th>p<sub>1</sub> ± △p<sub>1</sub>, kg/m<sup>3</sup></th>
        <th style="background-color: lime;">△p<sub>1</sub>, kg/m<sup>3</sup></th>
    </tr>
    </thead>
    <tbody></tbody>
</table>

，我在其中插入这个动态数据。所以我需要插入/保存所有的HTML表到MySQL数据库，这个表将显示在第二页，但如何组织这个数据插入，然后显示我不知道…有人能帮我吗?

您不能单独通过JavaScript完成所有这些。您需要了解客户端和服务器端之间的区别。看到你所有的JS代码将在用户的浏览器上运行，所以没有办法你可以像mySql一样在客户端提供永久存储。你有一些HTML5存储API，如webstorage, localstorage，但它们有大小等方面的限制。我不打算深入研究这些。我们的数据库在服务器端。当我们需要一些数据时，我们发送一个get请求并获取它。类似地，我们想保存一些数据，我们用这些数据发出post请求。我们有一些服务在后端运行，响应这些GET和POST请求，并对发送的数据采取适当的操作。如果您想看一下示例php代码与数据库交互。请看下面的PHP代码与数据库交互。

<?php
/****** 5 Step Story ***********
1. Create a connection
2. Select the database
3. Fire the query
4. Use query result
5. Close the connection
*******************************/
// Step1. Create a connection
$con = mysql_connect("localhost", "root", "root");
if (!$con) {
    die("Database connection could not be established" . mysql_error());
}
// Step2. Select the database
$db_select = mysql_select_db("widget_corp", $con);
if (!$db_select) {
    die("Database could not be selected" . mysql_error());
}
?>
<html>
  <head>
    <title> Database Interaction (MySQL + PHP)  </title>
  </head>
  <body>
    <h1><center><u>Database Interation (MySQL + PHP) </u></center></h1>
    <?php
    // Step3: Querying from Database
      $result = mysql_query("SELECT * from subjects", $con);
      if (!$result) {
        die("Error in firing query on database" . mysql_error());
      }
   // Step4: Using query result
   /* $row is an associative array as well So both types of indexes work on it
      Numeric indexes as well as Keys both work */
      while ($row = mysql_fetch_array($result)) {
        echo $row["id"] . " " .
        $row["menu_name"] . " " .
        $row[2] . " " .
        $row[3] . "<hr>";
      }
   ?>
  </body>
</html>
<?php
   mysql_close($con);
?>

您将需要某种类型的服务器端软件来连接到数据库。仅靠Javascript和HTML是无法实现的。您可以发出AJAX请求(或标准POST)，但是后端必须有一些东西来响应请求。

您是否在您的服务器上运行以下任何一种:ColdFusion, PHP, Python, Ruby, c++， Java, ASP, Perl?

编辑:

就像@showdev建议的那样，您可以使用AJAX将您的请求发布到PHP页面，该页面将对您的数据库运行INSERT语句(参见@blunderBoy的回答)。听起来好像屏幕上有一个表单用来输入数据，如果使用jQuery, AJAX请求可能是这样的:

$.post("test.php", $("#testform").serialize() );

其中test.php是您要发布的url, testform是您的输入所在表单的id。

将该行放入saveData()函数中，在这里将该行附加到表中。

相关文章：