Wywołanie kodu php poprzez przycisk w oknie confirm w javascripcie

Question

Witajcie. Robię prostą stronkę, taki niby bank i chcę zrobić możliwość czyszczenia historii przelewów, ale tak aby przed wykonaniem skryptu czyszczącego dane z bazy, wyskoczyło okienko z potwierdzeniem. Obecnie mam czyszczenie pod zwykłym submitem, a chciałbym okienko do potwierdzenia. Wyczytałem już że służy do tego confirm() w JS, lecz nie wiem jak zrobić aby po kliknięciu 'OK', czyli po nadaniu zmiennej wartości 'true' wykonał się skrypt php czyszczący historię. Gdy po prostu wkleiłem ten skrypt w znacznikach do if'a w JS to działy się jakieś dziwne rzeczy, cała zawartość strony znikała. Słyszałem coś o użyciu AJAX'a ale w ogóle nie wiem co to jest i jak się to je, prosiłbym zatem o nie podsyłanie gołych linków do AJAX'a bo i tak mi to nie pomoże. Chciałbym się czegoś nauczyć. Tutaj dla ciekawskich ten skrypt czyszczenia:

<?php 
		if(isset($_POST['czyszczenie']))
		{
			$czyszczenie = $polaczenie->query("DELETE FROM transakcje WHERE konto_nad = $nr_konta OR konto_odb = $nr_konta");
			header ("Location: historia.php");
		};
		?>

 

Answer 1

KISS mój drogi:

Zrób prostego linka (np. 'http://mojastrona.pl/history/delete' lub jesli jestes nowicjuszem i nie uzywasz rewrite engine: 'http://mojastrona.pl/history/delete.php' i kod trzymasz w delete.php).

<a role="button" class="btn btn-danger pull-left" onclick="return confirm('Are you sure');" href="http://mojastrona.pl/history/delete.php">

Jak ktoś wejdzie w tego linka i potwierdzi alert, to wykona się kod:

- Sprawdź, czy aktualny user może usunąć swoją historie.

- Usuń historie.

- Zredirectuj do referera (poprzedniej strony), lub do listy z historią.

Tam niżej odnośnie ajaxa. A co jeśli user ma problemy z js, lub serwer z assetami padł, lub używa lynxa, lub nie załadował mu sie js, bo jechał w momencie ładowania strony wjechał do tunelu i mu się nie załadował ... etc. etc. etc.?

Pamiętajmy, by zawsze mieć jakiegoś fallbacka.

 

Comments

Proste i skuteczne. Dzięki! :D Widzę że znasz się na rzeczy, masz może jakieś większe doświadczenie z php?

Answer 2

var xhr = new XMLHttpRequest(), data = new FormData();
data.append('czyszczenie', 'wartość');
xhr.onreadystatechange = function () {
  if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
      console.log(xhr.responseText);
  }
};
xhr.open(POST, 'skrypt.php', true);
xhr.send(data);

Tak wygląda ajax w czystym js. Żeby dodać kolejne zmienne możesz to zapisać tak:

data.append('czyszczenie', 'wartość');
data.append('zmienna2', 'wartość');
data.append('zmienna3', 'wartość');
/* ... */

Odpowiedź, którą możesz w php przekazać przy pomocy echo masz w zmiennej xhr.responseText.

Comments

Nie rozumiem tego ajaxa :/ Czemu xhr.open (który, jak rozumiem wykonuje skrypt w php) jest poza funkcją? I czemu w wyniku funkcji warunkowej jest console.log (wpisanie tekstu do konsoli? po co? ). I gdzie mam umieścić ten cały skrypt, w tagach <script> ? I czy skrypt php musi być w osobnej stronie? Z góry dziękuję jeśli uda Ci się mi to wyjaśnić.

---

Żeby zrozumieć ten kod musisz znać pojęcie obiektu. Załóżmy, że tworzysz grę przeglądarkową typu MMORPG. Za pewne będziesz chciał pozwolić graczowi na interakcje przeciwnikami. I teraz tworzysz przykładowego przeciwnika - nazwijmy go mob1. Może on mieć swoje punkty życia, poziom, atak, pancerz ... Zapisując te wartości w postaci zmiennych można to zrobić w ten sposób:

var mob1Zdrowie = 100;
var mob1Poziom = 4;
var mob1Atak = 40;
var mob1Pancerz = 20;

Na początku to rozwiązanie może się wydawać dobre, ale co jeżeli takich przeciwników chciałbyś stworzyć na przykład 50? Skoro nazwy zmiennych tworzysz według wzoru

nazwamobaNazwawłaściwości 

To łatwiej było by tworzyć konkretnego przeciwnika, i odwoływać się do jego właściwości. Czyli po prostu stworzyć obiekt.

var mob1 = {
  zdrowie: 100,
  poziom: 4,
  atak: 40,
  pancerz: 20
}

Teraz dostęp do zmiennych masz poprzez zapis

mob1.zdrowie

Pisząc w javascript pracujesz na obiektach przez cały czas. Zapewne już widziałeś niekoniecznie poprawny zapis 

document.getElementById('przycisk').onclick = function() {
    /* ... */
}

Teraz też odwołujesz się do 'zmiennej' obiektu (pola) przypisując do niej funkcje, która ma się wykonać gdy użytkownik naciśnie na przycisk o id = "przycisk". Dokładnie to samo robisz, tworząc obiekt XMLHttpRequest i podpinając funkcje pod zdarzenie onreadystatechange. Warunkiem

if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
      /* ... */
}

oraz tworzeniem obiektów w ten sposób

new FormData()

nie musisz się teraz zajmować. Kod który umieścisz zamiast

console.log(this.responseText)

wykona się w momencie, gdy połączenie przebiegnie poprawnie, a wartość którą może zwrócić (nie jest to wymagane) plik php masz dostępną pod zmienną this.responseText. console.log() wpisałem tam dla przykładu, aby pokazać Ci jak dostać odpowiedź od skryptu php. 

xhr.open() "jest poza funkcją" dlatego że funkcja przypisana do zdarzenia (on)readystatechange wykona się w momencie tego zdarzenia, czyli po nawiązaniu połączenia co robisz po przez funkcję xhr.open(). Ta funkcja nie wykonuje skryptu php, dlatego że skrypt php musi zostać wykonany przez znajdujący się na serwerze interpreter php, a nie kod javascript umieszczony w przeglądarce użytkownika. Ajax ma za zadanie 'odpytać' plik php dokładnie w ten sam sposób, jak robisz to Ty wchodząc na stronę http://localhost/skrypt.php (w tym przypadku akurat wchodząc na stronę przy pomocy metody get, a ajax korzysta z post).

Answer 3

Nie musisz korzystać z ajaxa. Stwórz funkcję wyświetlającą okno diqlogowe sprawdzającą jego odpowiedź i zwracającą false gdy użytkownik nie potwierdzi przejścia dalej.

Potem w formularzu dodajesz atrybut onsubmit="return twoja_funkcja()" i gotowe.

A skorochcesz się trochę poduczyć to tu jest świetna stronka:klik

Comments

<html>
<body>

<form action= "skrypt.php" onsubmit="return confirm('Na pewno');">
<input type="submit" value="submit"/>
</form>

</body>
</html

u mnie coś takiego działa

---

Nie rozumiesz xD U mnie też to doskonale bangla ale nie wiem jak później wywołać skrypt php tym działaniem :P

---

formularz sam powinien przekierować cie do skryptu

---

Jak wstawisz kod formularza może coś więcej będziemy mogli pomóc

---

Już rozwiązałem problem. Dzięki za pomoc! :D