У меня есть веб-страница PHP, где мне нужно вставить некоторую информацию в мою базу данных. Когда вставка выполнена, она обновляет одну и ту же страницу. Но мне сказали, что этот процесс нецелесообразен, потому что вы каждый раз загружаете все HTML , CSS и JS своей страницы. И я должен сделать это AJAX .
Я ищу его и пробовал этот код:
$("#insert").click(function(){ //get the form values var selectType = $('#selectW').val(); var selectcom = $('#select_at').val(); var pay = $('#pay').val(); var facture = $('#facture').val(); var selectcur = $('#select').val(); //make the postdata //var postData = 'username='+username+'&name='+name+'&brand='+brand; //call your input.php script in the background, when it returns it will call the success function if the request was successful or the error one if there was an issue (like a 404, 500 or any other error status) $.ajax({ url : "insert.php", type: "POST", data : postData, success: function(data,status, xhr) { //if success then just output the text to the status div then clear the form inputs to prepare for new data $("#section2").html(data); $('#pay').val(''); $('#selectcur').val(''); }, error: function (jqXHR, status, errorThrown) { //if fail show error and server status $("#section2").html('there was an error ' + errorThrown + ' with status ' + textStatus); } });// JavaScript Document
И вот мой код PHP-PDO где я удалил строки header и заменил их echo("something") :
if(isset($_POST['insert'])){ $selectOpt1 = $_POST['currency']; if($selectOpt1=="9"){ $type = $_POST['type']; $provider = $_POST['alfa_touch']; $pay = $_POST['pay']; $facture = $_POST['facture']; try{ $query = "INSERT INTO sales (type, provider, pay, facture, date_now, time_now) VALUES (:type, :provider, :pay, :facture, :date, now())"; $stmt = $conn->prepare($query); $stmt->bindValue(":type", $type); $stmt->bindValue(":provider", $provider); $stmt->bindValue(":pay", $pay); $stmt->bindValue(":facture", $facture); $stmt->bindValue(":date", date("ymd")); $count = $stmt->execute(); //header("location: home.php"); echo ("Done"); } catch(PDOException $e) { echo $e->getMessage(); //header("location: ../pages/insert_false.php?id=".$projid); print_r($conn->errorInfo()); } } }
Теперь, когда я нажимаю кнопку вставки, данные добавляются правильно в базу данных MySQL, но приложение остается в insert.php и echo Done . Мне нужно оставаться на одной странице. Любая помощь приветствуется.
РЕДАКТИРОВАТЬ
$("#insert").click(function(){ //get the form values var selectType = $('#selectW').val(); var selectcom = $('#select_at').val(); var pay = $('#pay').val(); var facture = $('#facture').val(); var selectcur = $('#select').val(); //make the postdata var postData = 'username='+username+'&name='+name+'&brand='+brand; //call your input.php script in the background, when it returns it will call the success function if the request was successful or the error one if there was an issue (like a 404, 500 or any other error status) $.ajax({ url : "insert.php", type: "POST", data : postData, success: function(data,status, xhr) { //if success then just output the text to the status div then clear the form inputs to prepare for new data $("#section2").html(data); $('#pay').val(''); $('#selectcur').val(''); }, error: function (jqXHR, status, errorThrown) { //if fail show error and server status $("#section2").html('there was an error ' + errorThrown + ' with status ' + textStatus); } }); return false; });// JavaScript Document
Все та же проблема. И вот моя форма HTML:
<form name="insertForm" action="insert.php" method="post"> <tr> <td align="center"> <select id="selectW" name="type"> <option value="Choose">Choose</option> <option value="Dollars">Dollars</option> <option value="D & D">D & D</option> <option value="Cards">Cards</option> <option value="Phones">Phones</option> <option value="Acc">Acc</option> <option value="Bills">Bills</option> </select> <!--<select> <?php foreach($result5 as $rows){ ?> <option value="<?php echo $rows['item_name'] ?>"><?php echo $rows['item_name'] ?></option> <?php } ?> </select>--> </td> <td align="center"><select id="select_at" name="alfa_touch"> <option value="Undefined">Not Required</option> <option value="Alfa">Alfa</option> <option value="Touch">Touch</option></select></td> <td align="center"><input type="text" id="pay" name="pay"/></td> <td align="center"><input type="text" id="facture" name="facture" placeholder="في حال دفع الفواتير عبر omt"/></td> <td align="center"><select id="select" name="currency"> <option value="9">LBP</option> <option value="10">Dollars</option> </select></td> <td align="center"><input type="submit" id="insert" name="insert" value="insert" /> </td> </tr> </form>
Добавьте preventDefault в функцию javascript
Function(e){ e.preventDefault() ... }
В вашем файле HTML вас есть action = 'insert.php' в <form> и вы также вызываете функцию при button click с insert id .
Оба делают то же самое – отправка значений с HTML страницы в insert.php . В случае <form> страница обновляется, поэтому перейдите к ajax . Сохраните сценарий для события click .
action="insert.php" и method="post" из <form> . type = "button" в <button> . Надеюсь, это поможет.