Php 使用ajax从html表单更新数据库
我想要一些关于ajax的帮助。我想更新一个php文件，它将更新一个数据库。我有一个表单，它将选中的复选框发送到一个php文件，然后更新数据库。我想用ajax来实现这一点，但我正在为此而奋斗。我知道如何通过ajax更新Php 使用ajax从html表单更新数据库,php,html,ajax,Php,Html,Ajax,我想要一些关于ajax的帮助。我想更新一个php文件，它将更新一个数据库。我有一个表单，它将选中的复选框发送到一个php文件，然后更新数据库。我想用ajax来实现这一点，但我正在为此而奋斗。我知道如何通过ajax更新Html元素，但无法解决这个问题 HTML脚本 <html> <head> <script src="jquery-3.1.0.min.js"></script> </head> <body> <
<html>
<head>
<script src="jquery-3.1.0.min.js"></script>
</head>
<body>
<form name="form">
<input type="checkbox" id="boiler" name="boiler">
<input type="checkbox" id="niamh" name="niamh">
<button onclick="myFunction()">Update</button>
</form>
<script>
function myFunction() {
var boiler = document.getElementByName("boiler").value;
var niamh = document.getElementByName("niamh").value;
// Returns successful data submission message when the entered information is stored in database.
var dataString = 'boiler=' + boiler + 'niamh=' + niamh;
// AJAX code to submit form.
$.ajax({
type: "POST",
url: "updateDB.php",
data: dataString,
cache: false,
success: function() {
alert("ok");
}
});
}
</script>
</body>
</html>
更新
函数myFunction（）{
var boiler=document.getElementByName（“锅炉”）.value；
var niamh=document.getElementByName（“niamh”）.value；
//当输入的信息存储在数据库中时，返回成功的数据提交消息。
var数据字符串='锅炉='+锅炉+niamh='+niamh；
//提交表单的AJAX代码。
$.ajax({
类型：“POST”，
url:“updateDB.php”，
数据：dataString，
cache:false，
成功：函数（）{
警报（“正常”）；
}
});
}
<?php
$host="localhost"; // Host name
$username="root"; // Mysql username
$password="14Odiham"; // Mysql password
$db_name="heating"; // Database name
$tbl_name = "test";
// Connect to server and select database.
mysql_connect("$host", "$username", "$password")or die("cannot connect");
mysql_select_db("$db_name")or die("cannot select DB");
$boiler = (isset($_GET['boiler'])) ? 1 : 0;
$niamh = (isset($_GET['niamh'])) ? 1 : 0;
// Insert data into mysql
$sql = "UPDATE $tbl_name SET boiler=$boiler WHERE id=1";
$result = mysql_query($sql);
// if successfully insert data into database, displays message "Successful".
if($result){
echo "Successful";
echo "<BR>";
}
else {
echo "ERROR";
}
?>
<?php
//close connection
mysql_close();
header ('location: /ajax.php');
?>
<form name="form" onsubmit="return false;">
<input type="checkbox" id="boiler" name="boiler">
<input type="checkbox" id="niamh" name="niamh">
<button onclick="myFunction()">Update</button>
</form>
var dataString = 'boiler=' + boiler + '&niamh=' + niamh;
// AJAX code to submit form.
$.ajax({
type: "POST",
url: "updateDB.php",
data: dataString,
cache: false,
success: function(data) {
var json = $.parseJSON(data);
if(json.success){
// update the page elements and do something with data.results
var results = data.results;
} else {
// alert("some error message")'
}
}
});
}document.getElementByName不是javascript函数，请尝试document.getElementById（） 你可以这样做
<form name="form" onsubmit="myfunction()">
<input type="checkbox" id="boiler" name="boiler">
<input type="checkbox" id="niamh" name="niamh">
<input type="submit" value="Update"/>
</form>
您正在访问一篇文章，因此将php文件中的$\u GET更改为$\u post我只想得到一些建议，首先您的html页面代码应该是-
<html>
<head>
<script src="jquery-3.1.0.min.js"></script>
</head>
<body>
<form name="form" id="form_id">
<input type="checkbox" id="boiler" name="boiler">
<input type="checkbox" id="niamh" name="niamh">
<button onclick="myFunction()">Update</button>
</form>
<script>
function myFunction() {
// it's like cumbersome while form becoming larger so comment following three lines
// var boiler = document.getElementByName("boiler").value;
// var niamh = document.getElementByName("niamh").value;
// Returns successful data submission message when the entered information is stored in database.
//var dataString = 'boiler=' + boiler + 'niamh=' + niamh;
// AJAX code to submit form.
$.ajax({
// instead of type use method
method: "POST",
url: "updateDB.php",
// instead dataString i just serialize the form like below this serialize function bind all data into a string so no need to worry about url endcoding
data: $('#form_id').serialize(),
cache: false,
success: function(responseText) {
// you can see the result here
console.log(responseText)
alert("ok");
}
});
}
</script>
</body>
</html>
$boiler = (isset($_POST['boiler'])) ? 1 : 0;
$niamh = (isset($_POST['niamh'])) ? 1 : 0;
这是当我单击复选框并单击提交时URL中出现的内容/ajax.php？niamh=on，所以URL没有更改为updateDB.phpy您在ajax调用中使用POST，并在php文件中接收GET，为什么？最初我使用GET查看发生了什么，但这不起作用，所以我将其更改为POST，仍然不起作用，因为如果发送POST，您必须接收POST，如果发送GET，您必须接收GET，在您的AJAX调用和PHP文件中，顺便说一句，在PHP文件中，您将得到一个关于我在两个脚本中使用POST和get尝试的headerOk的警告，但它仍然不起作用。它不会改变URL。如果我手动键入updateDB.php，数据库中的niamh=将被更新。因此，updateDB脚本已完成上述所有操作，但仍然无法工作。如果我替换了updateDB.php脚本中的top脚本，那么脚本将停止工作。我已经把所有的帖子改为获取并将JS更改为您的脚本。但是当点击submit时，URL变成了ajax.php？boiler=on&niamh=on，但我认为它应该被更新。php？boiler=on&niamh=on似乎无法获得这个工作状态，所以您现在有了rigth参数。下一件事是停止要提交的表单，以便它使用您的功能：尝试感谢这项工作，感谢您的款待，很抱歉，我们在W/E上没有及时回复
<html>
<head>
<script src="jquery-3.1.0.min.js"></script>
</head>
<body>
<form name="form" id="form_id">
<input type="checkbox" id="boiler" name="boiler">
<input type="checkbox" id="niamh" name="niamh">
<button onclick="myFunction()">Update</button>
</form>
<script>
function myFunction() {
// it's like cumbersome while form becoming larger so comment following three lines
// var boiler = document.getElementByName("boiler").value;
// var niamh = document.getElementByName("niamh").value;
// Returns successful data submission message when the entered information is stored in database.
//var dataString = 'boiler=' + boiler + 'niamh=' + niamh;
// AJAX code to submit form.
$.ajax({
// instead of type use method
method: "POST",
url: "updateDB.php",
// instead dataString i just serialize the form like below this serialize function bind all data into a string so no need to worry about url endcoding
data: $('#form_id').serialize(),
cache: false,
success: function(responseText) {
// you can see the result here
console.log(responseText)
alert("ok");
}
});
}
</script>
</body>
</html>
$boiler = (isset($_GET['boiler'])) ? 1 : 0;
$niamh = (isset($_GET['niamh'])) ? 1 : 0;
$boiler = (isset($_POST['boiler'])) ? 1 : 0;
$niamh = (isset($_POST['niamh'])) ? 1 : 0;