2014-09-14 6 views
1

Я сделал этот простой код для обновления строки базы данных, и Я хочу показать результат всего выражения эха на той же странице формы отправки без перезагрузка страницы (с помощью ajax).Как я могу показать результат эха на той же странице отправки формы с помощью 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> 
+0

так что вы хотите, чтобы ваш код был преобразован из обычной обычной формы представления (которая обновляется) до обновления AJAX? извините, что слишком широко, и по-своему, поскольку вы используете mysqli, просто используйте подготовленные инструкции. – Ghost

+0

Я просто не хочу, чтобы результат отображался на другой странице (/update.php) – WhiteOne

+0

Да, я понимаю, вам нужно xmlhttprequest на update.php вместо использования обработчика формы, которое у вас есть прямо сейчас, на ваша кнопка submit связывает это и запрашивает сервер вместе с t1 и d1, затем в ответ, эхо-разметку и представляет ее на стороне клиента, если вы хотите выполнить запрос ajax, вам понадобится javascript – Ghost

ответ

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> 
+0

, что я хочу, но может у, пожалуйста, объясните мне, как работает этот код? – WhiteOne

+0

Конечно, один секунда, позвольте мне добавить в мой ответ! –

+0

благодарит много :), и было бы лучше добавить объяснение внутри кода в качестве комментария, чтобы я мог знать, что делает каждая строка. – WhiteOne

Смежные вопросы