jQuery实现简单的点赞效果

本文实例讲解了jQuery实现简单的点赞效果的详细代码，具体内容如下

效果图：

下面提供一个"点赞"的实例代码，用ASP.NET MVC4+jQuery Ajax实现。
Model：

namespace MvcAjaxAdd.Models
{
 public class ClickCountModel
 {
  [Key]
  [DatabaseGeneratedAttribute(System.ComponentModel.DataAnnotations.Schema.DatabaseGeneratedOption.Identity)]
  public int ID { get; set; } 

  public string URL { get; set; } 

  public int? Num { get; set; }
 }
} 

View：

@{
 ViewBag.Title = "Index";
}
@model MvcAjaxAdd.Models.ClickCountModel
<script src="~/Scripts/jquery-1.7.1.js" type="text/javascript"></script>
<script type="text/javascript">
 $(function () {
  var obj = {
   "num": $("#lblnum").text(),
   "url": window.location.pathname//获取/Home/Index
  };
  $("#addnum").click(function () {
   $.ajax({
    type: 'POST',
    url: '/Home/ClickGood',
    data: obj,
    success: function (data) {
     $("#lblnum").text(data.Num);
     //其它操作，比如每个登录用户只能点一次，按钮禁用等
    }
   });
  });
 });
</script>
<div id="addnum" style="width: 70px; height: 70px; background-color: #FF9900">
 <div align="center" style="margin-top: 10px;">
  <label style="color: White; font-size: 20pt;">
   顶</label></div>
 <div align="center">
  <label id="lblnum" style="color: White; font-size: 10pt;">
   @Model.Num</label></div>
</div>

Controller：

namespace MvcAjaxAdd.Controllers
{
 public class HomeController : Controller
 {
  private ClickCountContext db = new ClickCountContext(); 

  public ActionResult Index()
  {
   ClickCountModel ClickCountModel = db.ClickCountModels.FirstOrDefault(x => x.URL == "/");
   return View(ClickCountModel);
  } 

  [HttpPost]
  public JsonResult ClickGood(ClickCountModel ClickCountModel)
  {
   ClickCountModel newClickCountModel = db.ClickCountModels.FirstOrDefault(x => x.URL == ClickCountModel.URL);
   newClickCountModel.Num++;//数量+1
   db.SaveChanges();
   return Json(newClickCountModel);
  }
 }
}

以上就是本文的全部内容，希望对大家学习jquery程序设计有所帮助。