AJAX Mit einem PHP-Skript über eine JavaScript-Funktion

Question

ich ohne Ziel haben auszuführen einen Anker-Link, aber es hat ein onClick event:

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

Ich verstehe, dass ich kann nicht direkt execure Blöcke PHP-Code in JavaScript durch Aufgrund der Art von PHP und der serverseitigen Sprache muss ich AJAX dafür verwenden.

Wenn die delete Link geklickt wird, muss ich es diese Abfrage (del_post.php)

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

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

?> 

ich versucht habe, auszuführen AJAX ähnliche Vergangenheit Fragen zu verstehen, aber da es sich um relativ neu, Ich kann seine Sprache nicht vollständig erfassen. Hier ist, was ich habe versucht:

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

Aber Klicken auf den Link ändert sich nur die URL http://localhost/.

Answer 1

Ich glaube, die (Haupt-) Problem ist, Ihre leeren "href" -Attribut. Entfernen Sie das oder ändern Sie es in href="#" oder alte Schule href="javascript:void()" (entfernen Sie es einfach, IMO).

Es ist eine Weile her, seit ich XMLHttpRequest verwendet und nicht so etwas wie jQuery's .ajax, aber ich denke, Sie es wie so tun müssen (meistens Sie .open/send müssen, bevor Sie für die Zustandsänderung sehen):

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

Können Sie bitte Ihre: del_post.php Datei? Normalerweise können Sie einen Text oder eine Warnung in einem von

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

zeigen Rückruf in einem AJAX-Request:

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

Answer 3

:

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

Diese Antwort wird von Ihrer PHP-Datei zum Beispiel kommen

Sie sollten das Attribut href aus dem Anchor-Tag entfernen und das Element mit CSS formatieren.

Auch sollte Ihr Skript wie folgt aussehen:

<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

Sie versuchen, die HTTP-Anforderung innerhalb des Rückrufs vorzunehmen. Sie müssen nur um es bewegen außen:

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

das href Attribut entfernen, wird die Refresh verhindern. Ich glaube, das ist in HTML5 gültig.

Answer 5

Ok ... Ich bin nur ein Bastler, so verzeihen Sie mir bitte etwaige Ungenauigkeiten in der Eingabe, aber dies funktioniert: Ein Format, das ich für einen Ajax-Aufruf in einem <a> Elemente ist:

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

So dass ich mehr Flexibilität habe (falls ich etwas überprüfen muss, bevor ich den Ajax sende).Nun, für einen Ajax-Aufruf benötigen Sie:

1. Welche Datei
zu nennen
2. Was mit der Antwort aus der Datei zu tun genannt Sie
3. Was tun, wenn ein E/A-Fehler

geschieht

So haben wir diese Funktion - nicht meins, unter tausenden von irgendwohin gebadet - wahrscheinlich hier :) - und wahrscheinlich gut bekannt, meine Entschuldigung an den Autor, er ist ein Genie: Das ist, was Sie für die Ajax-Sache, wo ' url 'ist die Datei, die Sie' ajax 'wollen,' success 'ist der Name der Funktion, die mit Ergebnissen arbeitet und der Fehler ist der Name der Funktion, die IO-Fehler behandelt.

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

Sie werden natürlich die Erfolg + Fehlerfunktionen umfassen müssen:

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

Und jetzt, wo du damit bewaffnet bist, das ist, wie Sie den eigentlichen Anruf innerhalb der Funktion Du genannt komponieren die <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); 
} 

ein Szenario könnte sein, wenn Sie eine Variable mit der PHP übergeben müssen Sie vorher nicht hatten. In diesem Fall würde der Aufruf:

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

Und Sie jetzt nicht nur haben Sachen zu JS PHP senden, haben Sie JS PHP Senden zu. Weeeee ...

Schlusswort: Ajax ist keine Sprache, es ist ein Javascript "Trick". Sie müssen nicht vollständig verstehen, was die erste "doAjaxThing" -Funktion tut, um dies zu verwenden, stellen Sie einfach sicher, dass Sie es richtig aufrufen. Sobald die Antwort vom Server eintrifft, wird die Funktion 'Deal WithResponse' automatisch 'angerufen'. Beachten Sie, dass Sie weiterhin Ihr Geschäft betreiben können (asynchron - Prozess nicht zeitgebunden), bis die Antwort ankommt - dann wird die "Deal WithResponse" ausgelöst - im Gegensatz zu einer Seite stoppen und warten (synchron - Zeit gebunden) bis Eine Antwort kommt an. Das ist die Magie von Ajax (Asynchronous JAVascript und Xml).

In Ihrem Fall möchten Sie das Echo ("Erfolg") hinzufügen - oder Fehler! - in PHP, damit die Funktion 'dealWithResponse' aufgrund dieser Information weiß was zu tun ist.

Das ist alles, was ich über Ajax weiß. Hoffe, das hilft :)