Estoy codificando una aplicación de restaurante donde los clientes pueden pedir comida en una página web. El problema que tengo es que cuando los clientes terminaron de ordenar la comida, la web mostrará que el pedido aún no se pagó hasta que los clientes se lo pagaron al personal del restaurante y el personal del restaurante actualizó el pedido en la base de datos desde otro dispositivo. Quiero que esta página web verifique constantemente la base de datos con el mismo "order_id" y verifique el campo "estado". El campo de estado tendrá un valor entero (0=no he pagado, 1=pagado) Así es como funciona el pedido
esta es mi pagina web
<div class="modal-header"> <h5 class="modal-title" id="">Waiting for payment</h5> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> <p class="h5">Transaction is on going <span class='spinner-border spinner-border-sm'></span></p> <p class='h5'>total price = Rp. <?php echo $_SESSION['totalprice'];?> ,-</p> <div class="overflow-auto mb-3" style="height: 400px;"> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">cancel</button> </div>
Estoy planeando usar ajax para este, pero soy realmente nuevo en ajax y el otro hilo parece no ser exactamente lo que busco porque implica un clic de botón o una entrada del usuario, pero quiero que esto sea en tiempo real y no tener alguna entrada de los clientes. estoy usando mysql para la base de datos.
Su llamada AJAX se puede realizar a intervalos establecidos utilizando la función setInterval()
de Javascript, acertadamente nombrada.
El método setInterval(), que se ofrece en las interfaces Window y Worker, llama repetidamente a una función o ejecuta un fragmento de código, con un retraso de tiempo fijo entre cada llamada.
Este método devuelve un ID de intervalo que identifica de forma única el intervalo, por lo que puede eliminarlo más tarde llamando a clearInterval().
Bueno, estarás lidiando con algo como
<script> function checkOrderStatus(){ // Instantiate an new XHR Object const xhr = new XMLHttpRequest(); // we call the file responsible for checking the db xhr.open("GET","check_order.php", true); // When response is ready xhr.onload = function () { if (this.status === 200) { // we check the data return if(this.responseText === 1){ // Getting the element where we will display our response message let feedback = getElementsByClassName("h5"); feedback.innerHTML = "Payment Received"; clearInterval(timer); // we stop checking the database } else { console.log('Still waiting...'); }; } else { console.log("Something went wrong!"); } } // At last send the request xhr.send(); } } // now we want call this function every 3 seconds let timer = setInterval(() => checkOrderStatus(), 3000);
Por supuesto, tendrá que pasar una ID de pedido, ya sea adjuntando a la URL de check_order.php o como una variable de sesión.