Why does my browser send two requests in a post ajax call?

Question

I have put a link in my web page with the following a tag:

<a href="" onclick="FiltrarxUnidadPolitica(1)">
   <label class="filter-item-title">
      Distrito Capital
   </label>
   <label class="filter-item-quantity">
      (3)
   </label>
</a>

And the js function that is called when the link is clicked is as follow:

function FiltrarxUnidadPolitica(iIdUnidadPolitica, bLimpiarPropiedad) {
   $.ajax({
      data: { iIdUnidadPolitica, bLimpiarPropiedad },
      url: "/Home/ListadoInmuebles",
      type: 'POST',
   });
}

The issue that I have is when the link is clicked and the js function is executed the browser makes two requests to the server as you can see in the picture inserted (pending calls), the first one the POST call included in the js function and the second one that is a GET call that I don't know how is initiated.

Does anyone know where is comming from the GET call?

Could anyone give me a clue about where I have to look for?

Answer 1

Your link is being followed by the browser, because you haven't told it not to follow it. ( href="" is the same as "the current page.")

Several ways you can prevent that:

• Don't use a link for something that isn't a link, use an input type="button" or button and style it to look how you want it to look (this will also help with assistive software).
  (If you use button , make sure it's either not in a form or it has type="button" ; the default type of buttons is, bizarrely, "submit" .)

• Hook up your function with jQuery instead of an onclick attribute and call preventDefault on the event object.

• Set href to javascript:;

   <a href="javascript:;" onclick="FiltrarxUnidadPolitica(1);"> 

  (Or to href="javascript:void(0)" .)

• Set href to #anchor-that-does-not-exist

  (Don't use href="#" unless you want the page to scroll to the top when the link is followed.)

• Add a return false to the onclick :

   <a href="" onclick="FiltrarxUnidadPolitica(1); return false;"> 

  Returning false from a DOM0 attribute-style handler prevents the default action; more on my blog: The true story on return false .

Probably others as well...

Answer 2

Preflighted requests

Unlike simple requests (discussed above), "preflighted" requests first send an HTTP OPTIONS request header to the resource on the other domain, in order to determine whether the actual request is safe to send. Cross-site requests are preflighted like this since they may have implications to user data. In particular, a request is preflighted if:

It uses methods other than GET or POST. Also, if POST is used to send request data with a Content-Type other than application/x-www-form-urlencoded, multipart/form-data, or text/plain, eg if the POST request sends an XML payload to the server using application/xml or text/xml, then the request is preflighted. It sets custom headers in the request (eg the request uses a header such as X-PINGOTHER)

Source: MDN