Utilizzando AJAX per eseguire uno script PHP tramite una funzione JavaScript

Question

Ho un legame ancora senza una meta, ma ha un onClick event:

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

ho capito che posso blocchi di codice PHP non direttamente execure in JavaScript causa alla natura di PHP ed essendo un linguaggio lato server, quindi devo usare AJAX per farlo.

Quando il collegamento viene cliccato delete, ne ho bisogno per eseguire questa query (del_post.php)

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

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

?> 

ho cercato di capire AJAX usando le domande precedenti simili, ma a causa di essere relativamente nuovo, Non riesco a coglierne completamente il linguaggio. Ecco quello che ho provato:

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

Ma cliccando sul link cambia solo l'URL da http://localhost/.

Answer 1

Credo che il (principale) problema è l'attributo vuoto "href". Rimuoverlo o modificarlo in href="#" o nella vecchia scuola href="javascript:void()" (rimuoverlo, basta).

E 'stato un po' che ho usato XMLHttpRequest e non qualcosa di simile jQuery's .ajax, ma penso che hai bisogno di farlo in questo modo (per lo più è necessario .open/send prima di guardare per il cambiamento di stato):

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

Potete per favore fornire il file del_post.php? Normalmente si può mostrare un testo o un avviso in un

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

utilizzando richiamata in una richiesta AJAX:

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

Questa risposta è venuta dal file PHP ad esempio:

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

Answer 3

È necessario rimuovere l'attributo href dal tag di ancoraggio e stile l'elemento con CSS.

Inoltre, lo script dovrebbe essere simile a questo:

<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

Stai tentando di effettuare la richiesta http all'interno del callback. Hai solo bisogno di muoversi al di fuori:

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(); 
} 

Rimozione l'attributo href impedirà l'aggiornamento. Credo che sia valido in HTML5.

Answer 5

Ok ... Sono solo un hobbista, quindi per favore mi perdoni eventuali imprecisioni nella digitazione, ma questo funziona: Un formato che uso per una chiamata AJAX in un elemento <a> è:

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

Così che ho più flessibilità (nel caso in cui ho bisogno di controllare qualcosa prima di inviare l'ajax).Ora, per una chiamata AJAX è necessario:

1. Che lima per chiamare
2. cosa fare con la risposta dal file chiamato
3. Cosa fare se un errore di I/O accade

Quindi abbiamo questa funzione - non mia, sanguisuga tra migliaia da qualche parte - probabilmente qui :) - e probabilmente ben nota, le mie scuse all'autore, lui è un genio: questo è ciò che chiami per la cosa ajax, dove " url 'è il file che vuoi' ajax ',' success 'è il nome della funzione che riguarda i risultati e l'errore è il nome della funzione che gestisce gli errori 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; 
} 

sarà naturalmente necessario includere il successo + errore funzioni:

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"); 
} 

E ora che sei armato con questo, questo è il modo di comporre la vera chiamata all'interno della funzione hai chiamato a il <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); 
} 

uno scenario potrebbe essere quando è necessario passare una variabile per il PHP non è stato fatto prima. In questo caso, la chiamata sarebbe diventato:

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

E ora non solo è stato l'invio di PHP roba da JS, devi JS invio a PHP troppo. Weeeee ...

Parole finali: ajax non è un linguaggio, è un "trucco" javascript. Non è necessario comprendere appieno come funziona la prima funzione "doAjaxThing", ma assicurati di chiamarla correttamente. Automaticamente chiamerà la funzione 'deal WithResponse' una volta arrivata la risposta dal server. Si noti che è possibile continuare a svolgere la propria attività (processo asincrono - non legato al tempo) fino all'arrivo della risposta - ovvero quando viene attivato l''affare WithResponse', anziché avere una pagina ferma e attendere (sincrono - tempo legato) fino a quando arriva una risposta. Questa è la magia di ajax (Asincrono JAvascript e Xml).

Nel tuo caso si desidera aggiungere l'eco ("successo") - o errore! - nel PHP, in modo che la funzione 'dealWithResponse' sappia cosa fare in base a tali informazioni.

Questo è tutto ciò che so su ajax. Spero che questo aiuti :)