gpt4 book ai didi

javascript - 单击按钮将 MySQL 数据加载到文本框中

转载 作者:行者123 更新时间:2023-11-29 11:59:45 25 4
gpt4 key购买 nike

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

<!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>

最佳答案

要事第一。

  • 请勿将 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举个例子。

关于javascript - 单击按钮将 MySQL 数据加载到文本框中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32581886/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com