Using AJAX to execute a PHP script using a JavaScript function

Question

I have an anchor link without a destination, but it has an onClick event :

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

I understand that I cannot directly execute PHP blocks of code in JavaScript due to the nature of PHP, and this is a server-side language, so I have to use AJAX for this.

When I click on the delete link, I need to execute this request ( del_post.php )

 <?php include("connect.php"); $delete_query = mysqli_query ($connect, "DELETE FROM user_thoughts WHERE id = 'id' "); ?> 

I tried to understand AJAX using similar past questions, but because of the relatively new, I cannot fully understand its language. Here is what I 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. Delete it or change it to href="#" or the old school href="javascript:void()" (just delete it, imo).

Some time has passed since I used XMLHttpRequest and not something like jQuery.ajax , but I think you need to do it like this (basically you need .open/send before looking at 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 provide your del_post.php file? You can usually show a text or alert in

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

using the callback in an AJAX request:

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

This answer comes from your PHP file, for example:

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

Answer 3

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

In addition, 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> 

Answer 4

You are trying to make an HTTP request inside a 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 upgrade. I believe this is valid in HTML5.

Answer 5

Ok ... I'm just an amateur, so please forgive me for any inaccuracies in typing, but it works: The format that I use to call ajax in the <a> element is:

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

So I have more flexibility (in case I need to check something before sending ajax). Now to call ajax you need:

• What file to call
• What to do with the answer from the file you named
• What to do if an I / O error has occurred

So, we have this function, and not mine, because of which I erupted from somewhere - perhaps here :) - and, probably, it is well known, my apologies to the author, he is a genius: This is what you call ajax, where "url" is the file you want "ajax", "success" is the name of the function that deals with the results, and error is the name of the function that deals with I / O 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; } 

Naturally, you need to enable 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 are armed with this, you are creating a real call inside the function that you called in <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 may be when you need to pass a variable to PHP that you did not have before. In this case, the call will look like this:

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

And now you have PHP sending stuff to JS, you also send JS to PHP. Weeeee ...

Final words: ajax is not a language, its a javascript trick. You do not need to fully understand what the first doAjaxThing function does to use this, just make sure you call it correctly. It will automatically “call” the “WithResponse Deal” function after receiving a response from the server. Please note that you can continue to carry out your activity (asynchronously - the process is not time-bound) until you receive an answer - this is when the "WithResponse transaction" is triggered - as opposed to stopping the page and waiting (synchronously - time is bound) until the answer comes. This is the magic of ajax (asynchronous JAvascript and Xml).

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

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