Using AJAX to execute a PHP script through a JavaScript function

Question

I have an anchor link with no destination, but it does have an onClick event:

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

I understand that I cannot directly execure PHP code blocks in JavaScript due to the nature of PHP and it being a server side language, so I have to utilize AJAX to do so.

When the delete link is clicked, I need it to execute this query (del_post.php)

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

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

?>

I have tried to understand AJAX using similar past questions, but due to being relatively new, I cannot completely grasp it's language. Here is what I have tried:

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

But clicking the link just changes the URL to http://localhost/.

Answer 1

I believe the (main) problem is your empty "href" attribute. Remove that, or change it to href="#" or old school href="javascript:void()" (just remove it, imo).

It's been a while since I used XMLHttpRequest and not something like jQuery's .ajax, but I think you need to do it like so (mostly you need to .open/send before you watch for the state change):

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

Can you please provide your : del_post.php file? Normally you can show a text or alert in a

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

by using callback in an AJAX request :

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

This response is coming from your PHP file for example :

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