JQuery Send Ajax Request With ‘delete’ Method (Two Approaches)

Knowledge point:

$.post( url [, data ] [, success ] [, dataType ] ) is a shorthand Ajax function, which is equivalent to:
$.ajax({
type: ‘POST’,
url: url,
data: data,
success: success,
dataType: dataType
});

Two approaches:

1. a form with a hidden field ‘_method’ set to ‘delete’ and use JQuery $.post method:

1.1 form code:

<form action=”test url” accept-charset=”UTF-8″ method=”post” class=”form_example”>
  <input type=”hidden” name=”_method” value=”delete” />
  <label for=”Please_enter_the_username_that_you_want_to_delete:”>Please enter the username that you want to delete:   </label>
  <input type=”text” name=”name” id=”name” />
  <input type=”submit” name=”commit” value=”Send delete request” />
</form>

1.2 JQuery code:

$(‘.form_example’).submit(function(e) {
  var $this = $(this);
  var form = $this;
  var data = form.serialize();

  // Prevent form form submit normally
  e.preventDefault();

  // Use ajax to submit the form
  $.post(form.attr(‘action’), data).done(function(data) {
  // If ajax request succeed, code goes here
  });
});

2. a form without ‘_method’ hidden field and use JQuery $.ajax method with ‘type’ set to ‘delete’:

2.1 form code:

<form action=”test url” accept-charset=”UTF-8″ method=”post” class=”form_example”>
  <label for=”Please_enter_the_username_that_you_want_to_delete:”>Please enter the username that you want to delete:  </label> 
  <input type=”text” name=”name” id=”name” /> 
  <input type=”submit” name=”commit” value=”Send delete request” />
</form>

2.2 JQuery code:

$(‘.form_example’).submit(function(e) {
  var $this = $(this);
  var form = $this;
  var data = form.serialize();

  // Prevent form form submit normally
  e.preventDefault();

  // Use ajax to submit the form
  $.ajax({
    type: ‘delete’,
    url: url,
    data: data,
    success: success,
    dataType: dataType
  });
});

Advertisements

Rails Submit Form Using ‘delete’ Method Explanation

Sometimes we need to submit form using methods other than ‘post’, in this example, it’s ‘delete’.

For example, I wanted to delete a user when a form is submitted with the user name and ‘delete’ method.

1. I created the route like this:

delete ‘test url’, to: ‘users#destroy’

So I will handle the delete function in users controller, destroy action.

 

2. The view code:

<%= form_tag(‘test url’, method: :delete) do %>
  <%= label_tag ‘Please enter the username that you want to delete:’ %>
  <%= text_field_tag :name %>
  <%= submit_tag ‘Send delete request’ %>
<% end %>

 

2. This view code generates the following html code:

<form action=”test url” accept-charset=”UTF-8″ method=”post”>
  <input name=”utf8″ type=”hidden” value=”✓” />
  <input type=”hidden” name=”_method” value=”delete” />
  <input type=”hidden” name=”authenticity_token” value=”5Rj1osaYdsOkH94pyig99l5Ud64U1H25LCuK33plQuf2Lg+a/+Ub6VVlYBSOvDotOIrX3SCKB6mYsfZTyPkI+Q==” />
  <label for=”Please_enter_the_username_that_you_want_to_delete:”>Please enter the username that you want to delete:</label>
  <input type=”text” name=”name” id=”name” />
  <input type=”submit” name=”commit” value=”Send delete request” />
</form>

As you can see above, the form method is still ‘post’. I was really confused at this point, since the method didn’t turn out to be the ‘delete’ method I expected.

But actually rails generated a hidden input called _method that is supposed to carry the intended verb for the server to interpret. In this case, it’s ‘delete’, exactly what I need.

 

3. Let’s see the view, it looks like this:

view

I typed ‘test user name’ and hit ‘Send delete request’ button, it sent out this http request:

delete request

The request method is ‘Post’, with form data ‘_method’ set as ‘delete’ which sent my request to users controller, destroy action. Job done.