Question

我创建了这个简单的代码来更新数据库行，而我希望在提交表单的同一页面中显示所有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:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <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>

Answer 1

是的，你应该使用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:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <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>

如何使用ajax在提交表单的同一页面中显示echo结果

1 个答案: