使用ajax从html表格更新数据库

我想要一些关于ajax的帮助。我想更新一个将更新数据库的php文件。我有一个表单将选定的复选框发送到一个php文件，然后更新数据库。我想用ajax做到这一点，但我正在为此付出努力。我知道如何通过ajax更新<div> Html元素，但无法解决这个问题。使用ajax从html表格更新数据库

HTML脚本

<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'); 
?>

我想这跟出来刷新页面更新。

来源

2016-09-14 user2669997

这是URL，当我点击会发生什么吧一个复选框并点击提交。 /ajax.php?niamh=on因此，URL不会更改为updateDB.php – user2669997

您在您的ajax调用中使用POST并在您的php文件中接收GET，为什么？ –

最初我使用GET来查看发生了什么，但这没有奏效，所以我将它改为POST，仍然不工作 – user2669997

我只是想一些建议，首先你的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>

现在我转向PHP代码：你就在PHP中使用的两个行代码

$boiler = (isset($_GET['boiler'])) ? 1 : 0; 
$niamh = (isset($_GET['niamh'])) ? 1 : 0;

$ _GET在get方法使用和POST方法_POST $，在阿贾克斯和上面的代码行这样你使用POST方法应该是这样

$boiler = (isset($_POST['boiler'])) ? 1 : 0; 
$niamh = (isset($_POST['niamh'])) ? 1 : 0;

来源

2016-09-14 07:08:38

感谢这项工作，对不起，最近的回复对W进行了跟踪/ E – user2669997

更新：除了固定dataString，被提交，以便使用您的功能停止的形式：从updateDb.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>

AJAX调用应该处理返回的数据。

更新的PHP文件将数据发送回服务器，恢复到$ _POST而不是$ _GET和底部删除页眉电话：

if($result){ 
    $data['success'=>true, 'result'=>$result]; 

} else { 
    $data['success'=>false]; 
} 
echo json_encode($data); 
// die(); // nothing needed after that

更新Ajax调用处理响应和修正你的dataString与'&'之间的params（这就是为什么你没有得到你的params正确）。

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")' 
    } 
} 
});

}

来源

2016-09-14 01:43:58 Michel

好吧，我正要写一个响应，但你这样做大声笑 –

试过以上，仍然无法正常工作。如果我替换updateDB.php脚本中顶部脚本的位置，脚本停止工作。我已经使所有POST代替GET并将JS更改为脚本。但仍然点击提交时，URL变成ajax.php？boiler = on＆niamh = on，但我认为它应该是updateDB.php？boiler = on＆niamh = on似乎无法得到这个工作 – user2669997

好吧，你现在有参数。接下来是停止要提交的表单，所以它使用你的函数：try

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>

的Javascript：

function myFunction() { 
var boiler = document.getElementById("boiler").value; 
var niamh = document.getElementById("niamh").value; 
// Returns successful data submission message when the entered information is stored in database. 

// i dont practice using url string in ajax data as it can be compromised with a quote (') string, instead i am using json 

// AJAX code to submit form. 
    $.ajax({ 
    type: "POST", 
    url: "updateDB.php", 
    data: { 
     boiler: boiler, 
     niamh: niamh 
    }, 
    cache: false, 
    }).done(function() { 
     alert('success'); 
    }); // i do this because some jquery versions will deprecate the use of success callback 
}

而且你得到一个职位所以PHP文件改变$ _GET在你$ _ POST

来源

2016-09-14 06:53:57

使用ajax从html表格更新数据库

回答

相关问题