Мне нужна помощь с ajax. Я хотел бы обновить файл php, который будет обновлять базу данных. У меня есть форма, которая отправляет выбранный флажок в файл php, который затем обновляет базу данных. Я хотел бы сделать это с помощью ajax, но я борюсь с этим. Я знаю, как обновлять элементы <div> Html с помощью ajax, но не могу это решить.
Скрипт 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'); ?>
Я бы хотел, чтобы это обновлялось без обновления страницы.
Мне просто нужно какое-то предложение, и сначала ваш код страницы 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 в ajax и выше строка кода должна быть похожа на
$boiler = (isset($_POST['boiler'])) ? 1 : 0; $niamh = (isset($_POST['niamh'])) ? 1 : 0;
Обновление. Помимо фиксации dataString, прекратите отправку формы, чтобы ваша функция использовалась:
<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 должен обрабатывать возвращенные данные из updateDb.php.
Обновите файл 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 с помощью '&' между параметрами (вот почему вы не правильно получаете свои параметры) .
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>
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 }
И вы попадаете на сообщение, поэтому измените $ _GET в вашем php-файле на $ _POST