[PHP AJAX] Doładowanie Konta a następnie wyświetlenie wyniku na stronie internetowej

Question

Witam mam utworzony moduł do doładowywania konta

<!-- Moduł do doladowywania konta -->
<div class="modal fade" id="Doładuj" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
		<div class="modal-dialog modal-dialog-centered" role="document">
		<div class="modal-content">
			<div class="modal-header">
		        <h5 class="modal-title" id="ZapHas">Doładuj Konto</h5>
			 </div>
			 <form action="/?action=doladuj" method="post">
			  <div class="modal-body">
			  <div class="form-group">
				   <b style="color:#fff">Podaj Kwotę jaką chcesz doładować </b>
			    </div>
				<div class="form-group">
				   <input type="number" class="form-control rounded-pill form-control-lg" name="doladuj" placeholder="Doładuj" min="1">
			    </div>
			 </div>
			 <div class="modal-footer">
			 <button type="button" data-dismiss="modal" class="btn" id="przyciskZamknijj">Zamknij</button>
			 <button type="submit" class="btn" name="PotwierdzDane" id="przyciskWyślij">Doładuj</button>
			</div>
			</form>
		</div>
	  </div>
    </div>
<!-- Koniec modułu do doładowywania konta  -->

Chciałbym zrobić tak gdy wprowadzę jakąś kwotę np 200 to żeby to było widoczne na stronie internetowej słyszałem że można to zrobić ajaxem ale nie wiem jak to zrobić czy ktoś mógłby mi pomóc 

Wyświetlenie zawartości portfela jest w zmiennej sesyjnej

funkcja która doładowywuje konto użytkownika 

 public function TopUpYourAccount(array $date): void
    {
        try {
            $doladuj = $this->conn->quote($date['doladuj']);
            $query = "UPDATE uzytkownicy SET uzytkownicy.Portfel = uzytkownicy.Portfel + $doladuj";
            $this->conn->exec($query);
        } catch (Throwable $e) {
            throw new StorageException('Nie udało się doładować konta, przepraszamy !!!!', 400, $e);
        }
    }

Kontroler który wykonuje operację 
 public function doladujAction(): void
    {
        if($this->request->hasToPost()) {
            $Data = [
                'doladuj' => $this->request->postIndex('doladuj'),
            ];
            $this->shopModel->TopUpYourAccount($Data);
        }
        $this->view->display('doladuj', $viewParams ?? []);
    }

<ul class="navbar-nav ml-2">
					
                    <li class="nav-item active">
                    <?php 
                           echo '<span style="color:white; text-shadow: 0 0 10px #ff0000"">'." Portfel: ".'</span>'.'<span style="color:white; text-shadow: 0 0 10px #ff0000"">'.$_SESSION['Portfel'].' zł '.'</span>';
                    ?>
                    </li>		
                </ul>

 

Answer 1

Musisz mieć skrypt PHP (lub innego języka działającego na backendzie), który po otrzymaniu żądania ze strony skryptu JS zaktualizuje dane w bazie, pobierze nową wartość portfela i odeśle ją do skryptu JS. Skrypt JS wypisze nowe dane na stronie. Funkcjonalność zadziała ci bez przeładowania strony.

Jeżeli dopuszczasz przeładowanie strony, to klasyczny skrypt PHP załatwia sprawę.

Link do dokumentacji: https://developer.mozilla.org/en-US/docs/Web/Guide/AJAX

Inne link do dokumentacji: https://www.w3resource.com/ajax/introduction.php

A tu przykład: https://www.w3schools.com/js/js_ajax_intro.asp

 

Comments

Witam @SzkolnyAdmin

Musisz mieć skrypt PHP (lub innego języka działającego na backendzie), który po otrzymaniu żądania ze strony skryptu JS zaktualizuje dane w bazie, pobierze nową wartość portfela i odeśle ją do skryptu JS. Skrypt JS wypisze nowe dane na stronie. Funkcjonalność zadziała ci bez przeładowania strony.

Czy mógłbyś mi rozrysować jak to ma wyglądać bo nie rozumiem 

Pozdrawiam