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 相关文章推荐
动态添加js事件实现代码
Mar 12 Javascript
JQuery 选择器、过滤器介绍
Feb 14 Javascript
js中各浏览器中鼠标按键值的差异
Apr 07 Javascript
浅析Ajax语法
Dec 05 Javascript
vue2.0父子组件及非父子组件之间的通信方法
Jan 21 Javascript
详解vue.js 开发环境搭建最简单攻略
Jun 12 Javascript
Form表单上传文件(type=&quot;file&quot;)的使用
Aug 03 Javascript
node.js 发布订阅模式的实例
Sep 10 Javascript
使用DataTable插件实现异步加载数据
Nov 19 Javascript
详解Angular5 服务端渲染实战
Jan 04 Javascript
vue插槽slot的理解和使用方法
Apr 03 Javascript
基于Vue sessionStorage实现保留搜索框搜索内容
Jun 01 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
php 防止单引号,双引号在接受页面转义
2008/07/10 PHP
PHP下通过file_get_contents的代理使用方法
2011/02/16 PHP
php控制linux服务器常用功能 关机 重启 开新站点等
2012/09/05 PHP
php中的PHP_EOL换行符详细解析
2013/10/26 PHP
PHP包含文件函数include、include_once、require、require_once区别总结
2014/04/05 PHP
PHP使用CURL获取302跳转后的地址实例
2014/05/04 PHP
php提取字符串中网站url地址的方法
2014/12/03 PHP
php+ajax实现文章自动保存的方法
2014/12/30 PHP
TP3.2.3框架文件上传操作实例详解
2020/01/23 PHP
IE中radio 或checkbox的checked属性初始状态下不能选中显示问题
2009/07/25 Javascript
jquery下利用jsonp跨域访问实现方法
2010/07/29 Javascript
jQuery Tools Dateinput使用介绍
2012/07/14 Javascript
走进javascript——不起眼的基础,值和分号
2017/02/24 Javascript
基于Koa2写个脚手架模拟接口服务的方法
2018/11/27 Javascript
Node.js + express实现上传大文件的方法分析【图片、文本文件】
2019/03/14 Javascript
vue实现记事本功能
2019/06/26 Javascript
javascript 代码是如何被压缩的示例代码
2020/05/06 Javascript
[02:35]DOTA2英雄基础教程 狙击手
2014/01/14 DOTA
[03:40]DOTA2亚洲邀请赛小组赛第二日 赛事回顾
2015/01/31 DOTA
[45:14]Optic vs VP 2018国际邀请赛淘汰赛BO3 第二场 8.24
2018/08/25 DOTA
python 如何快速找出两个电子表中数据的差异
2017/05/26 Python
python遍历文件夹,指定遍历深度与忽略目录的方法
2018/07/11 Python
Python常见的pandas用法demo示例
2019/03/16 Python
Python爬取智联招聘数据分析师岗位相关信息的方法
2019/08/13 Python
使用PyTorch将文件夹下的图片分为训练集和验证集实例
2020/01/08 Python
Python图像读写方法对比
2020/11/16 Python
Crabtree & Evelyn欧盟:豪华洗浴、身体和护发
2021/03/09 全球购物
优质飞蝇钓和渔具:RiverBum
2020/05/10 全球购物
企业内部培训方案
2014/02/04 职场文书
优秀应届毕业生推荐信
2014/02/18 职场文书
秋天的怀念教学反思
2014/04/28 职场文书
学校节能减排方案
2014/06/13 职场文书
高一地理教学工作总结
2015/08/12 职场文书
交通安全主题班会
2015/08/12 职场文书
2019最新版试用期劳动合同模板!
2019/07/04 职场文书
Nginx解决403 forbidden的完整步骤
2021/04/01 Servers