Как я могу показать результат эха на той же странице отправки формы с помощью AJAX
я сделал этот простой код для обновления строки базы данных, и я хочу показать результат всех операторов echo на той же странице формы отправки без перезагрузки страницы (используя ajax).
HTML-код формы:
<html>
<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Update Status</title>
</head>
<body>
<form method="POST" action="update.php">
<p>Order ID: <input type="text" name="T1" size="5" required></p>
<p>Status: <select size="1" name="D1">
<option selected value="In Progresss">In Progresss</option>
<option value="Finished">Finished</option>
</select></p>
<p><input type="submit" value="Update" name="B1"></p>
</form>
</body>
</html>
файл update.php:
<html>
<head>
<title>Update Status</title>
<?php
$connection = new mysqli("localhost","root","T00r", "sells");
// Check connection
if($connection->connect_errno){
echo "Failed to connect to MySQL: (" . $mysqli->connect_errno . ") " . $mysqli->connect_error;;
}
//select database to use
$db_select = mysqli_select_db($connection,"sells");
if(!$db_select){
die("Database selection failed: " . mysqli_error());
}
$T1=$_POST['T1']; $D1=$_POST['D1'];
//check if Order ID is available
$check1=mysqli_query($connection,"SELECT Order_ID FROM clients WHERE Order_ID = '$T1' ");
if (mysqli_num_rows($check1) == 0) {
echo " <b> == No Order With This ID == </b>";
}
else {
//insert value into database
$sql=mysqli_query($connection,"UPDATE Clients SET Status = '$D1' WHERE Order_ID = '$T1'");
//check if the Status is Updated
$check2=mysqli_query($connection,"SELECT Status FROM clients WHERE Order_ID = '$T1' ");
//get the value of Satuts to check if it's equal to the input data
while($row = mysqli_fetch_array($check2)){
if($row["Status"] != $D1){
echo " <b> == Status Not Updated == </b>";
}
else echo"<b> == Status Updated == </b>";
}
if(!$sql){
die("Database query failed: " . mysqli_error());
}
}mysqli_close($connection);
?>
</head>
</html>
Решение
Правда, вы должны использовать AJAX. Это не так сложно, попробуйте это:
<html>
<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Update Status</title>
</head>
<body>
<form method="POST" id="updateForm" action="update.php">
<p>Order ID: <input type="text" name="T1" size="5" required></p>
<p>Status: <select size="1" name="D1">
<option selected value="In Progresss">In Progresss</option>
<option value="Finished">Finished</option>
</select></p>
<p><input type="submit" value="Update" name="B1"></p>
</form>
<div id="ajaxResponse"></div>
<!-- Include the JQuery library !-->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
<!-- Add a listener. This will be invoked when the form is submitted, 'submit' is the action, and '#updateForm' is the context it is listening !-->
$(document).on('submit','#updateForm',function(e){
<!-- This stops the original event. So that's the original submit action of the form. !-->
e.preventDefault();
<!-- Get the form data and serialize it into an array. !-->
var data = $('#updateForm').serializeArray();
<!-- The AJAX request. '.post' indicates that it should be a POST request. 'data' add the serialized array in the POST request. 'htmlResponse' is the response you get from the POST request, in your case your echo rules. !-->
$.post('update.php',data,function(htmlResponse){
<!-- The POST request is finished and the response is putted in the htmlResponse variable. So display this by setting the content(html) of the ajaxResponse div to the htmlResponse variable
$('#ajaxResponse').html(htmlResponse);
});
});
</script>
</form>
</body>
</html>
Другие решения
Других решений пока нет …