Korzystanie AJAX wykonać skrypt PHP za pomocą funkcji JavaScript

Question

mam linku kotwicy bez przeznaczenia, ale to nie mieć onClick event:

<li><a href onClick='deletePost()'> Delete </a> </li> 

Rozumiem, że nie mogę bezpośrednio execure bloki kodu PHP w JavaScript należytym do natury PHP i jest to język po stronie serwera, więc muszę użyć AJAX, aby to zrobić.

Gdy łącze delete kliknięciu, muszę go wykonać to zapytanie (del_post.php)

<?php include("connect.php"); 

$delete_query = mysqli_query ($connect, "DELETE FROM user_thoughts WHERE id = 'id' "); 

?> 

Próbowałem zrozumieć AJAX przy użyciu podobnych wcześniejszych pytań, ale ze względu na to stosunkowo nowa, Nie mogę w pełni pojąć tego języka. Oto co próbowałem:

function deletePost() { 
     xmlhttp=new XMLHttpRequest(); 
     xmlhttp.onreadystatechange = function() { 
     if (xmlhttp.readyState == 4 && xmlhttp.status == 200){ 
      xmlhttp.open("GET", "del_post.php", false); 
      xmlhttp.send(); 
     } 
     }  
} 

Ale kliknięcie linku tylko zmienia adres URL http://localhost/.

Answer 1

wierzę (główną) Problemem jest twój pusty atrybut "href". Usuń to lub zmień na href="#" lub starą szkołę href="javascript:void()" (po prostu ją usuń, imo).

Minęło trochę czasu odkąd wykorzystywane XMLHttpRequest, a nie coś podobnego jQuery's .ajax, ale myślę, że trzeba to zrobić jak tak (przeważnie trzeba .open/send przed obserwować zmiany stanu):

var xmlHttpReq = new XMLHttpRequest(); 
if (xmlHttpReq) { 
    xmlHttpReq.open('GET', 'your-uri-here.php', true/false); 
    xmlHttpReq.onreadystatechange = function() { 
     if (xmlHttpReq.readyState == 4 && xmlHttpReq.status == 200) { 
      console.log('success! delete the post out of the DOM or some other response'); 
     } 
     else { 
      console.log('there was a problem'); 
     } 
    } 
    xmlHttpReq.send(); 
} 

Answer 2

Czy możesz podać swój plik: del_post.php? Normalnie można pokazać tekst lub wpisu w

<div id="yourname"></div> 

za pomocą zwrotnego w żądania AJAX:

if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { 
      document.getElementById("yourname").innerHTML = xmlhttp.responseText; 
     } 

Ta odpowiedź jest pochodzące z pliku PHP na przykład:

function remove_record(ARG){ 
    if ($condition==true) 
     echo "TRUE"; 
    else 
     echo "FALSE"; 
} 

Answer 3

Powinieneś usunąć atrybut href ze znacznika zakotwiczenia i nadać elementowi styl CSS.

Ponadto, skrypt powinien wyglądać następująco:

<script> 
function deletePost() { 
    var xhttp = new XMLHttpRequest(); 
    xhttp.onreadystatechange = function() { 
    if (xhttp.readyState == 4 && xhttp.status == 200) { 
     // Do something if Ajax request was successful 
    } 
    }; 
    xhttp.open("GET", "del_post.php", true); 
    xhttp.send(); 
} 
</script> 

Answer 4

Próbujesz wykonać żądanie http wewnątrz wywołania zwrotnego. Wystarczy przesunąć go na zewnątrz:

function deletePost() { 
    var xmlhttp = new XMLHttpRequest(); 
     xmlhttp.onreadystatechange = function() { 
      if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { 
       alert(xmlhttp.responseText); 
      } 
     }  
     xmlhttp.open("GET", "del_post.php", false); 
     xmlhttp.send(); 
} 

Usunięcie atrybutu href uniemożliwi odświeżania. Uważam, że jest poprawny w HTML5.

Answer 5

Ok ... Jestem tylko amatorem, więc proszę mi wybaczyć ewentualne błędy w typowania ale to działa: Format używać do wywołania AJAX w elemencie <a> jest:

<a href="javascript:" onclick="functionThatReallyCallsAjax()"> 

Tak że mam większą elastyczność (na wypadek, gdy muszę coś sprawdzić, zanim wyślę ajax).Teraz, dla wywołania AJAX trzeba:

1. Co plik zadzwonić
2. Co zrobić z odpowiedzią z pliku o nazwie
3. Co zrobić, jeśli błąd I/O dzieje

Mamy więc tę funkcję - nie moją, skądś wyrzuconą pośród tysięcy - prawdopodobnie tutaj :) - i chyba dobrze znaną, przepraszam autora, on jest geniuszem: to jest to, co nazywacie rzeczą ajaxową, gdzie " url 'to plik, który chcesz "ajax", "sukces" to nazwa funkcji, która zajmuje się wynikami, a błąd jest nazwa funkcji, która zajmuje się błędami IO.

function doAjaxThing(url, success, error) { 
    var req = false; 
    try{ 
     // most browsers 
     req = new XMLHttpRequest(); 
    } catch (e){ 
     // IE 
     try{ 
      req = new ActiveXObject("Msxml2.XMLHTTP"); 
     } catch(e) { 
      // try an older version 
      try{ 
       req = new ActiveXObject("Microsoft.XMLHTTP"); 
      } catch(e) { 
       return false; 
      } 
     } 
    } 
    if (!req) return false; 
    if (typeof success != 'function') success = function() {}; 
    if (typeof error!= 'function') error = function() {}; 
    req.onreadystatechange = function(){ 
     if(req.readyState == 4) { 
      return req.status === 200 ? 
       success(req.responseText) : error(req.status); 
     } 
    } 
    req.open("GET", url, true); 
    req.send(null); 
    return req; 
} 

Będziesz naturalnie muszą zawierać sukcesu + błędach funkcje:

function dealWithResponse(textFromURL) 
{ 
    //textFromURL is whatever, say, a PHP you called in the URL would 'echo' 
} 


function ohNo() 
{ 
    //stuff like URL not found, etc. 
    alert("I/O error"); 
} 

a teraz, że jesteś uzbrojony, że to jest jak komponowanie prawdziwego połączenia wewnątrz funkcji, którą w nazwie <a>:

function functionThatReallyCallsAjax() 
{ 
    //there are probably many scenarios but by having this extra function, 
    //you can perform any processing you might need before the call 

    doAjaxThing("serverFile.php",dealWithResponse,ohNo); 
} 

Jeden scenariusz może być, gdy trzeba przekazać zmienną do PHP nie miałeś wcześniej. W tym przypadku, połączenie staną:

doAjaxThing("serverFile.php?parameter1=dogsRock",dealWithResponse,ohNo); 

a teraz nie tylko masz PHP wysyłanie rzeczy do JS, masz JS PHP do wysyłania zbyt. Weeeee ...

Ostatnie słowa: ajax nie jest językiem, jest "sztuczką" javascript. Nie musisz w pełni rozumieć, co robi pierwsza funkcja "DoActiveThing", tylko upewnij się, że wywołujesz ją poprawnie. Automatycznie "wywoła" funkcję "deal WithResponse" po otrzymaniu odpowiedzi od serwera. Zauważ, że możesz kontynuować prowadzenie swojej działalności (asynchronicznie - proces nie jest związany czasowo) do momentu otrzymania odpowiedzi - czyli wtedy, gdy zostanie uruchomiona "transakcja WithResponse" - w przeciwieństwie do zatrzymywania i oczekiwania strony (synchronicznie - czas związany) do nadchodzi odpowiedź. To jest magia ajax (Asynchronous JAvascript i Xml).

W twoim przypadku chcesz dodać echo ("sukces") - lub błąd! - w PHP, aby funkcja "dealWithResponse" wiedziała, co robić w oparciu o te informacje.

To wszystko, co wiem o ajax. Mam nadzieję, że to pomoże :)