CODEWITHSUNDEEP
javascriptphpjqueryajax
Freddy
Freddy

Reputation: 867

Using AJAX to execute a PHP script through a JavaScript function

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/.

Upvotes: 6

Views: 280

Answers (5)

Jorge Al Najjar
Jorge Al Najjar

Reputation: 93

Ok... I'm just a hobbyist, so please forgive me any inaccuracies in the typing but this works: A format I use for an ajax call in an <a> element is:

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

So that I have more flexibility(in case I need to check something before I send the ajax). Now, for an ajax call you need:

  1. What file to call
  2. What to do with the response from the file you called
  3. What to do if an I/O error happens

So we have this function - not mine, leeched amongst thousands from somewhere - probably here :) - and probably well known, my apologies to the author, he is a genius: This is what you call for the ajax thing, where 'url' is the file you want to 'ajax', 'success' is the name of the function that deals with results and error is the name of the function that deals with IO errors. 

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

You will naturally need to include the success+error functions:

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

And now that you're armed with that, this is how you compose the real call inside the function you called at the <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);
}

One scenario might be when you need to pass a variable to the PHP you didn't have before. In this case, the call would become:

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

And now not only you have PHP sending stuff to JS, you have JS sending to PHP too. Weeeee...

Final words: ajax is not a language, its a javascript 'trick'. You don't need to fully understand what the first 'doAjaxThing' function does to use this, just make sure you are calling it properly. It will automatically 'call' the 'deal WithResponse' function once the response from the server arrives. Notice that you can continue doing your business (asynchronous - process not time-tied) till the response arrives - which is when the 'deal WithResponse' gets triggered -, as opposed to having a page stop and wait (synchronous - time tied) until a response arrives. That is the magic of ajax (Asynchronous JAvascript and Xml).

In your case you want to add the echo("success") - or error! - in the PHP, so that the function 'dealWithResponse' knows what to do based on that info.

That's all I know about ajax. Hope this helps :)

Upvotes: 2

Davis
Davis

Reputation: 846

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

Upvotes: 4

Duncan Tidd
Duncan Tidd

Reputation: 1220

You are trying to make the http request inside the callback. You just need to move it outside:

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

Removing the href attribute will prevent the refresh. I believe that is valid in HTML5.

Upvotes: 3

Dhawal
Dhawal

Reputation: 47

You should remove href attribute from anchor tag and style the element with CSS.

Also, your script should look like this:

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

Upvotes: 3

Ramin
Ramin

Reputation: 391

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

Upvotes: 3

Related Questions