使用ajax从html表单更新数据库 [英] update database from html form using ajax
本文介绍了使用ajax从html表单更新数据库的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想要一些关于ajax的帮助。我想更新一个将更新数据库的php文件。我有一个表单将选定的复选框发送到一个php文件，然后更新数据库。我想用ajax做到这一点，但我正在为此付出努力。我知道如何通过ajax更新< div> Html元素，但是无法解决这个问题。
$ b HTML脚本
< html>
< head>
< script src =jquery-3.1.0.min.js>< / script>
< / head>
< body>
< form name =form>
< input type =checkboxid =boilername =boiler>
< input type =checkboxid =niamhname =niamh>
< button onclick =myFunction（）>更新< / button>
< / form>
< script>
函数myFunction（）{
var boiler = document.getElementByName（boiler）.value;
var niamh = document.getElementByName（niamh）。value;
//当输入的信息存储在数据库中时，返回成功的数据提交消息。
var dataString ='boiler ='+ boiler +'niamh ='+ niamh;
//提交表单的AJAX代码。
$ .ajax（{
type：POST，
url：updateDB.php，
data：dataString，
cache：false，
成功：function（）{
alert（ok）;
}
}）;
}
< / script>
< / body>
< / html>
PHP updateDB.php
<？php
$ host =localhost; //主机名称
$ username =root; // Mysql username
$ password =14Odiham; // Mysql密码
$ db_name =heating; //数据库名称
$ tbl_name =test;
//连接到服务器并选择数据库。
mysql_connect（$ host，$ username，$ password）或die（无法连接）;
mysql_select_db（$ db_name）或死（无法选择DB）;
$ boiler =（isset（$ _ GET ['boiler']））？ 1：0;
$ niamh =（isset（$ _ GET ['niamh']））？ 1：0;
//将数据插入到mysql中
$ sql =UPDATE $ tbl_name SET boiler = $ boiler WHERE id = 1;
$ result = mysql_query（$ sql）;
//如果成功地将数据插入到数据库中，则显示消息成功。
if（$ result）{
echoSuccessful;
回显< BR>;
}
else {
echoERROR;
}
？>
<？php
//关闭连接
mysql_close（）;
header（'location：/ajax.php'）;
？>
我希望在更新页面时进行更新。
解决方案
我只是想一些建议，并首先你的HTML页面代码应该喜欢 -
< HTML>
< head>
< script src =jquery-3.1.0.min.js>< / script>
< / head>
< body>
< form name =formid =form_id>
< input type =checkboxid =boilername =boiler>
< input type =checkboxid =niamhname =niamh>
< button onclick =myFunction（）>更新< / button>
< / form>
< script>
函数myFunction（）{
//这样看起来很麻烦，而表单越来越大，所以在三行后注释
// var boiler = document.getElementByName（boiler）.value;
// var niamh = document.getElementByName（niamh）。value;
//当输入的信息存储在数据库中时，返回成功的数据提交消息。
// var dataString ='boiler ='+ boiler +'niamh ='+ niamh;
//提交表单的AJAX代码。
$ .ajax（{
//代替类型使用方法
方法：POST，
url：updateDB.php，
//而不是dataString我只是序列化如下这个序列化函数的形式将所有数据绑定到一个字符串，所以不需要担心URL终止代码
data：$（'＃form_id'）。serialize（），
cache：false，
success：function（responseText）{
//你可以在这里看到结果
console.log（responseText）
alert（ok）;
}
}）;
}
< / script>
< / body>
< / html>
现在我转向php代码：
您在php中使用了两行代码
$ boiler =（isset（$ _ GET ['boiler']））？ 1：0;
$ niamh =（isset（$ _ GET ['niamh']））？ 1：0;
$ _ GET用于get方法，$ _POST用于post方法，因此您使用post方法ajax和上面的代码应该像
$ boiler =（isset（$ _ POST ['boiler']））？ 1：0;
$ niamh =（isset（$ _ POST ['niamh']））？ 1：0;
I would like some help with ajax. I would like to update a php file which will update a database. I have a form which send the selected check box to a php file which then updates the data base. I would like to do this with ajax but I am struggling with this. I know how to update <div> Html elements by ajax but cannot work this out.
HTML script
<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>
PHP updateDB.php
<?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');
?>
I would like this to update with out refreshing the page.
解决方案
I just want some suggestion and first your html page code should like-
<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>
Now i am turning to php code: You used two line of code right in php
$boiler = (isset($_GET['boiler'])) ? 1 : 0;
$niamh = (isset($_GET['niamh'])) ? 1 : 0;
$_GET is used in get method and $_POST for post method, thus you are using post method in ajax and above line of code should be like
$boiler = (isset($_POST['boiler'])) ? 1 : 0;
$niamh = (isset($_POST['niamh'])) ? 1 : 0;
这篇关于使用ajax从html表单更新数据库的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
