jQuery实现简单的点赞效果


Posted in Javascript onMay 29, 2020

本文实例讲解了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程序设计有所帮助。

Javascript 相关文章推荐
IE中直接运行显示当前网页中的图片 推荐
Aug 31 Javascript
一些不错的js函数ajax
Aug 20 Javascript
js 内存释放问题
Apr 25 Javascript
jquery下动态显示jqGrid以及jqGrid的属性设置容易出现问题的解决方法
Oct 22 Javascript
JavaScript运行时库属性一览表
Mar 14 Javascript
利用angular.copy取消变量的双向绑定与解析
Nov 25 Javascript
JQuery学习总结【一】
Dec 01 Javascript
Bootstrap 下拉多选框插件Bootstrap Multiselect
Jan 22 Javascript
jQuery获取复选框选中的当前行的某个字段的值
Sep 15 jQuery
js实现多个倒计时并行 js拼团倒计时
Feb 25 Javascript
详解ES6 Promise的生命周期和创建
Aug 18 Javascript
Vue使用富文本编辑器Vue-Quill-Editor(含图片自定义上传服务、清除复制粘贴样式等)
May 15 Javascript
jQuery+Ajax实现无刷新操作
Jan 04 #Javascript
使用微信内置浏览器点击下拉框出现页面乱跳转现象(iphone),该怎么办
Jan 04 #Javascript
javascript从定义到执行 你不知道的那些事
Jan 04 #Javascript
基于jQuery实现交互体验社会化分享代码附源码下载
Jan 04 #Javascript
jquery中cookie用法实例详解(获取,存储,删除等)
Jan 04 #Javascript
深入探究AngularJS框架中Scope对象的超级教程
Jan 04 #Javascript
学习使用grunt来打包JavaScript和CSS程序的教程
Jan 04 #Javascript
You might like
松下Panasonic RF-B65电路分析
2021/03/02 无线电
PHP文件及文件夹操作之创建、删除、移动、复制
2016/07/13 PHP
PHP自定义多进制的方法
2016/11/03 PHP
PHP在弹框中获取foreach中遍历的id值并传递给地址栏
2017/06/13 PHP
网页设计常用的一些技巧
2006/12/22 Javascript
JS批量修改PS中图层名称的方法
2014/01/26 Javascript
jquery scroll()区分横向纵向滚动条的方法
2014/04/04 Javascript
JavaScript打印网页指定区域的例子
2014/05/03 Javascript
详细总结Javascript中的焦点管理
2016/09/17 Javascript
JavaScript简单计算人的年龄示例
2017/04/15 Javascript
Vue项目添加动态浏览器头部title的方法
2018/07/11 Javascript
socket io与vue-cli的结合使用的示例代码
2018/11/01 Javascript
JavaScript实现无限级递归树的示例代码
2019/03/29 Javascript
webpack-mvc 传统多页面组件化开发详解
2019/05/07 Javascript
Node.js 实现简单的无侵入式缓存框架的方法
2019/07/21 Javascript
基于Echarts图表在div动态切换时不显示的解决方式
2020/07/20 Javascript
pandas.loc 选取指定列进行操作的实例
2018/05/18 Python
Python生成短uuid的方法实例详解
2018/05/29 Python
python 统计列表中不同元素的数量方法
2018/06/29 Python
详解Python下Flask-ApScheduler快速指南
2018/11/04 Python
python实现flappy bird小游戏
2018/12/24 Python
一文了解Python并发编程的工程实现方法
2019/05/31 Python
pytorch查看torch.Tensor和model是否在CUDA上的实例
2020/01/03 Python
Django之腾讯云短信的实现
2020/06/12 Python
Kmeans均值聚类算法原理以及Python如何实现
2020/09/26 Python
python利用appium实现手机APP自动化的示例
2021/01/26 Python
华润集团网上药店:健一网
2016/09/19 全球购物
军校本科大学生自我评价
2014/01/14 职场文书
教师档案管理制度
2014/01/23 职场文书
《跨越海峡的生命桥》教学反思
2014/02/24 职场文书
班风口号
2014/06/18 职场文书
民主生活会剖析材料
2014/09/30 职场文书
党员批评与自我批评发言稿
2014/10/14 职场文书
2014年评职称工作总结
2014/11/20 职场文书
收费员岗位职责
2015/02/14 职场文书
领导干部学习心得体会
2016/01/23 职场文书