Question

我有一个网页，需要将MySQL数据库中的数据加载到文本框中。因此，文本框已经存在，并且需要使用db中的值更新值。我有一个用于按钮单击的JavaScript函数，一个用于连接数据库的PHP脚本，但它似乎不起作用。它只是在文本框中复制，但存储在db中的值。知道我做错了吗？

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <title></title>
   <style type="text/css">
        ...
   </style>
   <script>
   //LOAD DATA      
        function btn_load_Click(){
                document.getElementById('item1').value ="<?php echo $row['item1'];?>" ;
                document.getElementById('item2').value ="<?php echo $row['item2'];?>" ;
                document.getElementById('item3').value ="<?php echo $row['item3'];?>" ;
                document.getElementById('item4').value ="<?php echo $row['item4'];?>" ;
        }
    </script>
</head>
<body>

<?php
$servername = "something.com.mysql";
$username = "myName";
$password = "xxxx";
$dbname = "myDB"

$conn = mysqli_connect($servername, $username, $password, $dbname);
if (!$conn){
die("Connection failed:".mysqli_connect_error());
}
else {
$sql = "SELECT item1, item2, item3, item4 FROM myTable";
$result = mysqli_query($conn, $sql);
$row = mysql_fetch_array($result);

}
mysqli_close($conn);
?>
<form id="form1" style="width:500px;" method="post">
    <div><button type="button" id="btn_load" onClick="btn_load_Click();" ></button></div>
<div id="MyItems">
    <div><input id="item1" type="text" value=""/></div>
    <div><input id="item2" type="text" value=""/></div>
    <div><input id="item3" type="text" value=""/></div>
    <div><input id="item4" type="text" value=""/></div>
</div>
</form>
</body>
</html>

Answer 1

首先要做的事情。

请勿将mysql_* API与mysqli_*混合使用。这会产生错误和问题。
如果您可以使用预准备语句，则会更好，因为mysql_*已被弃用。
PHP和Javascript彼此不同。您不能只将PHP值分配给Javascript变量。

我会一步一步地教你如何使用jQuery实现目标。

首先，您必须下载jQuery here。

我们可以做的诀窍是使用隐藏输入隐藏我们从查询中获取的行。您还将mysqli_* API与mysql_*混合在一起，所以这是错误的。我还会向您介绍prepared statement。

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

/* check connection */
if (mysqli_connect_errno()) {
    printf("Connect failed: %s\n", mysqli_connect_error());
    exit();
}

/* START PREPARING YOUR QUERY */
if($stmt = $con->prepare("SELECT item1, item2, item3, item4 FROM myTable")){
  $stmt->execute(); /* EXECUTE THE QUERY */
  $stmt->bind_result($item1, $item2, $item3, $item4); /* STORE THE RESULT TO THESE VARIABLES */
  $stmt->fetch(); /* FETCH THE RESULTS */
  $stmt->close(); /* CLOSE THE PREPARED STATEMENT */
}

然后我们可以将获取的数据存储到这些隐藏的输入中。

<input type="hidden" id="hid-item1" value="<?php echo $item1; ?>">
<input type="hidden" id="hid-item2" value="<?php echo $item1; ?>">
<input type="hidden" id="hid-item3" value="<?php echo $item1; ?>">
<input type="hidden" id="hid-item4" value="<?php echo $item1; ?>">

之后，我们现在可以创建一个脚本，它将从隐藏的输入中获取值，并在单击按钮时将其放入文本框中。

<script src="jquery-1.9.1.min.js"></script> <!-- REPLACE NECESSARY FILE DEPENDING ON THE VERSION YOU HAVE DOWNLOADED -->
<script type="text/javascript">

  $(document).ready(function(){ /* PREPARE YOUR SCRIPT */
    $("#btn_load").click(function(){ /* WHEN THE BUTTON IS CLICKED */

      /* GET THE VALUES OF THE HIDDEN INPUTS */
      var hiditem1 = $("#hid-item1").val();
      var hiditem2 = $("#hid-item2").val();
      var hiditem3 = $("#hid-item3").val();
      var hiditem4 = $("#hid-item4").val();

      /* THEN PUT THEM INTO THE DESIGNATED TEXTBOXES */
      $("#item1").val(hiditem1);
      $("#item2").val(hiditem2);
      $("#item3").val(hiditem3);
      $("#item4").val(hiditem4);

    });
  });

</script>

您还可以查看此jsfiddle作为示例。

按钮单击将MySQL数据加载到texbox中

1 个答案: