Ask server to delete record

Question

I'm pretty new to web development, so bear with me. I've also simplified the code to try to get the best answer.

<a href="/item/1">Item</a>
<img src="x.png" alt="Delete">

Basically, if someone clicks "Item" they get taken to /item/1. If they click the img x.png, it should ask the server to delete /item/1.

Obviously nothing is going to happen if I click x.png with the code as it is, but that's the big question:

I can make my web server recognize the DELETE method for /item/:id, but how do I submit DELETE from a browser? If I can't that makes POST or GET as the only options.

Wrapping the img around a href=... would be easy, but that only does a GET and would break RESTfulness, so it looks like I need to use POST. How can I do this cleanly?

Second question:

I'm assuming I would also have to refresh the page after submitting the delete to get fresh data. Is there a way to avoid this?

HTML, JavaScript, JQuery answers are all welcome.

Use Ajax if you do not want your web page to refresh after POST — Joseph, Feb 18 '17 at 22:16
Possible duplicate of [http delete request from browser](http://stackoverflow.com/questions/1908693/http-delete-request-from-browser) — Dan Lowe, Feb 18 '17 at 22:17

score 0 · Accepted Answer · answered Feb 18 '17 at 22:32

Use jquery ajax

Lets say

Method 1

<a href="/item/1" class="delete_anchor">Item</a>

$(document).ready(function()
{
    $(".delete_anchor").click(function(e)
    {
         e.preventDefault();
         var url = $(this).attr('href');
          $.ajax(
          {
             url: url,
             method: 'POST',
             success: function()
             {
                 alert("done");
             }
          });
     });
});

Method 2

<a href="#" id="1" class="delete_anchor">Item</a>

$(document).ready(function()
{
    $(".delete_anchor").click(function(e)
    {
         e.preventDefault();
         var id = $(this).attr('id');
          $.ajax(
          {
             url: '/item/,
             data: {"id":id},
             method: 'POST',
             success: function()
             {
                 alert("done");
             }
          });
     });
});

This is exactly what I wanted. Couple comments: to keep with restful practices, I changed method to 'DELETE' instead of 'POST', added error: function(), so I can capture the error, and used window.location.reload() in success to refresh the page so the deleted item goes away. — CompEng88, Feb 20 '17 at 15:54

tony gil · Answer 2 · 2017-02-18T22:59:31.400

What you want to do is part of database management's most basic activities, aka CRUD (Create Read Update Delete).

I recommend that you use a tool like PHP Scaffold which will create the basic code* for you. Using phpmyadmin export your table's structure and copy that (for example):

CREATE TABLE `phone` (
  `Id_Phone` int(11) NOT NULL AUTO_INCREMENT,
  `Ds_Phone` varchar(20) COLLATE utf8_bin DEFAULT NULL,
  `Nr_Phone_Country_Code` int(3) NOT NULL DEFAULT '55',
  `Nr_Phone_Area_Code` int(3) NOT NULL DEFAULT '11',
  `Nr_Phone_Number` int(10) NOT NULL
)

You must have file with your database connection info (PHP Scaffold will place the include for you)

<?php 
$username = "who"; // your username
$password = "aPassword"; // yor password
$database = "mydbName"; // your db name
$server = "localhost";  // leave this

// Opens a connection to a MySQL server
$connection = mysql_connect ($server, $username, $password) or die(mysql_error());
// Set the active MySQL database
$db_selected = mysql_select_db($database, $connection) or die(mysql_error());
?>

Instead of copying this in your code, save this file (i called it ConnDB.php and include it at the beginning of each new php page - if you use a tool like the one above, it will do it for you)

include ('ConnDB.php');

Examine the code and you will find the answers to your doubts. Play around with it, include selects and populate them from your db. Have fun.

Ask server to delete record

2 Answers2

Method 1

Method 2