Question

我有一个问题，如何使用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 DB中，这个表将显示在第二页上，但如何组织这些数据插入然后显示我不知道......任何人都可以帮我吗？

Answer 1

您将需要某种类型的服务器端软件来连接到您的数据库。只有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是您要发布到的网址，testform是输入所在表单的ID。

将该行放入saveData（）函数中，在该函数中将行追加到表中。

Answer 2

你无法通过JavaScript单独完成这一切。您需要了解客户端和服务器端之间的区别。看到你的所有JS代码将在用户的浏览器上运行所以你无法在客户端像mySql那样提供永久存储。您有一些HTML5存储API，如webstorage，localstorage，但这些API在大小和其他方面存在限制。我不打算深入研究这些。所以我们在服务器端有我们的数据库。当我们需要一些数据时，我们发送一个get请求并获取它。同样，我们希望保存一些我们使用数据发布请求的数据。我们在后端运行一些服务，响应这些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：如何将数据插入mysql

2 个答案: