JQuery + ajax method for implementing the document like function _ jquery

This article describes how to use jQuery + ajax to implement the like feature in this article. It involves the specific steps and related skills for jQuery to implement the like Feature Based on ajax without refreshing new post submission, if you need it, refer to the example in this article to describe how to use jQuery + ajax to implement the thumb up function. We will share this with you for your reference. The details are as follows:

A few days ago, some children's shoes asked me for the thumbs-up feature in the upper-right corner of the site. I decided to share this feature. I hope this feature will be convenient for you.

The code is simple, implemented by jQuery + php.

JQuery code:

jQuery(document).ready(function($) {$(".zan").click(function(e){var $i=$(".zan i"), $b=$("").text("+1"), n=parseInt($i.text());$b.css({"bottom":0,"z-index":999,});$i.text(n+1);$(".zan").append($b);$b.animate({"bottom":100,"opacity":0},1000,function(){$b.remove();});var d = setInterval(function(){clearInterval(d);if($(".zan b").length == 1){$.post("",{zan:$i.text()})}},1000)e.stopPropagation();});});

Php code:

<?php$path = "zan.txt";if(isset($_POST['zan'])){$num = (int)$_POST['zan'];$save = fopen($path,"w");fwrite($save,$num);fclose($save);echo "good";exit();$zan = file_exists($path) ? intval(file_get_contents($path)) : 0;}?>

Html code:

The audience gave<? Php echo $ zan;?>Likes

With appropriate css styles:

.main { position: relative; font-size: 10pt; line-height: 18px; margin: 40px auto; width: 800px; height: 170px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none;}.zan { position: absolute; top: 20%; left: 45%; width: 160px; height: 110px; background: url("zan.jpg") center no-repeat; cursor: pointer; opacity: 0.85; }.zan:active { opacity: 1; }.zan em { position: absolute; color: #333; font-style: normal; bottom: -15px; width: 100%; text-align: center; }.zan i { font-style: normal; color: #E94F06; }.zan b { position: absolute; color: #E94F06; font-style: normal; bottom: -15px; width: 100%; text-align: center; }

That's it. It's easy!

The complete code is as follows:

<? Php $ path = "zan.txt"; if (isset ($ _ POST ['zance']) {$ num = (int) $ _ POST ['za']; $ save = fopen ($ path, "w"); fwrite ($ save, $ num); fclose ($ save); echo "good"; exit ();} $ zan = file_exists ($ path )? Intval (file_get_contents ($ path): 0;?>
  I want to like
The audience gave<? Php echo $ zan;?>Likes