使用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表格更新數據庫

回答

相關問題