How to send a link through AJAX?

Question

How to send a link through AJAX?

Navigation

#1 by (2 votes)

0

What I need specifically is that by clicking on a <div> or the label that was, act as a link, but only to request a JSON request, that is, it is a link that does not direct to any specific side, only performs a write job on the server. So I need to use AJAX with a click() function that somehow acts below as a <a> tag but I have not found how to do it. Here is a minimal example of the "heart" I want to click.

$(document).ready(function(){

  $(this).find(".img-hover").mouseenter(function(){
  
    $(this).css({"background-color": "rgba(255, 255, 255, 0.5)"});
    $(this).find("i").css({"color": "rgb(27, 27, 28)"});
    $(this).find("i").stop().removeClass("fa-2x");
    $(this).find("i").stop().addClass("fa-4x");
    $(this).find("span").stop().fadeIn(200);
  
  });
  
  $(this).find(".img-hover").mouseleave(function(){
  
    $(this).css({"background-color": "rgba(0, 0, 0, 0)"});
    $(this).find("i").css({"color": "rgba(0, 0, 0, 0)"});
    $(this).find("i").stop().removeClass("fa-4x");
    $(this).find("i").stop().addClass("fa-2x");
    $(this).find("span").stop().fadeOut(200);
  
  });
  
  $(this).find(".fa-heart").mouseenter(function(){
  
    $(this).css({"color": "rgb(234, 96, 86)"});
    
  });
  
  $(this).find(".fa-heart").mouseleave(function(){
  
    $(this).css({"color": "rgb(27, 27, 28)"});
    
  });

});

*{
 padding: 0;
 margin: 0;
 font-family: sans-serif;
}

.contenedor {
 position: relative;
 width: 250px;
 height: 450px;
}

img {
 max-width: 100%;
 position: absolute;
}

.img-hover {
 width: 100%;
 height: 99%;
 position: absolute;
 top: 0;
 left: 0;
 z-index: 100;
 transition: .2s;
 background-color: rgba(0, 0, 0, 0);
 text-align: center;
}

.fa-heart {
 color: rgba(0, 0, 0, 0);
 position: absolute;
 top: 40%;
 left: 40%;
 transition: .2s;
}

.fa-heart:hover {
 cursor: pointer;
}

.cuenta {
 padding: 3px 8px;
 background-color: rgb(247, 247, 247);
 border-radius: 3px;
 color: rgb(27, 27, 28);
 font-size: 12px;
 right: 0;
 bottom: 0;
 margin-right: 5px;
 margin-bottom: 6px;
 position: absolute;
 display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://use.fontawesome.com/acad8e21f9.js"></script>
<div class="contenedor">
  <img src="https://s-media-cache-ak0.pinimg.com/736x/0f/61/18/0f6118f167ccca50dff9e06f5b27146b.jpg" alt="img">
  <div class="img-hover">
    <!--Este es el "div" del click-->
    <i class="fa fa-heart fa-2x"></i>
    <!--Este es el "span" del resultado-->
    <span class="cuenta">716</span>
  </div>
</div>

jquery html ajax

asked by Dєηyη Crawford 23.06.2017 в 16:34

source

1 answer

Create 2 references to the same model in another Rails: 4 I have a problem with my PHP, apparently when I enter anything in username and password can log in even without being a user

score 2 · Accepted Answer

Apparently you already work with jQuery but I do not know if with AJAX from jQuery so I'll leave you the documentation just in case.

Regarding the question, a code like this should suffice:

$(".img-hover").on("click", function(){
    $.ajax({
        url: "/Direccion/de/la/accion",
        data: {
                  dato: "lo que envíes"
              }
        type: "POST",
        /*
         * Todo lo demás que quieras que suceda
         * con ese AJAX
         */
    });
});

Thus, with each click on an element ( div , link, whatever) that has the class .img-hover should perform the action.

You can also put your own class and change the $(".img-hover") by $(".tu-clase") to make it more specific.