onclick删除文件和MySQL

Question

So, I really love coding in php now, and I'm currently working against a database.

I think I might need to learn some AJAX too, but I'll ask you guys before I jump into another language.

Ok, so I'm currently coding an "edit.php" page to edit details about a project. The project can have several image files attached to it, and it's all linked up and working.

On each of these files, I have a delete button, so that the user is able to delete the files that are already uploaded (and remove the entry from the database).

For now, my code only reads and displays the content in the database, but no feedback is given to actually delete the image if the user clicks the delete icon.

Here is the image code:

<p>
    <a href="#" onclick="this.parentNode.parentNode.removeChild(this.parentNode)"><img src="assets/ux/delete_12px.png" width="12px" height="12px" style="margin:0px 5px -2px 0px" /></a>
    <span style="font-weight:bold">[<span style="color:#36F">Picture</span>]</span>&nbsp; 
    <span style="color:#666"><?=$rowImgFile['fileURL']?></span>
</p>

So, when you hit delete icon now, the image will be gone visually. I also need to delete it on the server.

I do know how to do this with php and mysqli, but how do I do that inside a function? What would be the best way to do this?

I've seen in another page that the onclick function of the delete icon is triggering a page refresh, adding ?deletepicture="picture" to the URL. Is this the best way to do it? (i dont want the page to refresh when deleting an image. I just want to execute my php code and mysqli code and get it away =)

Thanks in advance!

Answer 1

I think I might need to learn some AJAX too, but I'll ask you guys before I jump into another language.

AJAX is a protocol, not a language (yep). The language is called "JavaScript" and you're already using it: it is just a matter of a few lines of code.

---

(i dont want the page to refresh when deleting an image. I just want to execute my php code and mysqli code and get it away =)

If you want to prevent the page from reloading you can either open the delete request in a new window (which is horrible) or learn to code an AJAX request. In your case, it would be something similar.

Replace

onclick="this.parentNode.parentNode.removeChild(this.parentNode)"

with

onclick="deleteImage(this)"

and put this JS anywhere in your page (I assume you have jQuery included).

<script>
function deleteImage(domEl){
domEl.parentNode.parentNode.removeChild(domEl.parentNode);
var imageNumber = "-- retrieve here the image identifier you'll need in the PHP page";
$.post("/yourServer/deleteImage.php", imageNumber);
}
</script>

Using this script you may call actions on a PHP file without reloading the entire HTML page. Note that, in order to delete an image from a mysqli database, you'd probably need a unique identifier of this image. Since you didn't asked, I assume you already know how to get it in javascript. I also assume you already know how to code the file deleteImage.php in order to delete the data from the db after retrieving the image identifier from $_POST or $_GET.

How would I send 2 variables with that POST functions? projectID and imageURL

$.post("url", {projectID : "123", imageURL: "234"});

This {} is standard js object literal notation. So also this syntax is valid.

var args = {};
args.projectID = "123";
args.imageURL = "234";
$.post("url", args );