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 相关文章推荐
在修改准备发的批量美化select+可修改select时,在非IE下发现了几个问题
Jan 09 Javascript
javascript delete 使用示例代码
Mar 29 Javascript
window.location.href的用法(动态输出跳转)
Aug 09 Javascript
Jquery对象和Dom对象的区别分析
Nov 20 Javascript
jQuery找出网页上最高元素的方法
Mar 20 Javascript
js图片轮播特效代码分享
Sep 07 Javascript
JS实现状态栏跑马灯文字效果代码
Oct 24 Javascript
jQuery+Ajax实现无刷新操作
Jan 04 Javascript
JS组件系列之Bootstrap table表格组件神器【终结篇】
May 10 Javascript
在点击div中的p时,如何阻止事件冒泡
Feb 07 Javascript
layer ui插件显示tips时,修改字体颜色的实现方法
Sep 11 Javascript
解决layui富文本编辑器图片上传无法回显的问题
Sep 18 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
thinkphp验证码显示不出来的解决方法
2014/03/29 PHP
PHP缓存机制Output Control详解
2014/07/14 PHP
php 截取utf-8格式的字符串实例代码
2016/10/30 PHP
php-msf源码详解
2017/12/25 PHP
laravel 字段格式化 modle 字段类型转换方法
2019/09/30 PHP
ExtJS 2.0实用简明教程 之Ext类库简介
2009/04/29 Javascript
js 操作css实现代码
2009/06/11 Javascript
document.onreadystatechange事件的用法分析
2009/10/17 Javascript
jQuery源码分析之Event事件分析
2010/06/07 Javascript
JavaScript判断变量是否为undefined的两种写法区别
2013/12/04 Javascript
js上传图片及预览功能实例分析
2015/04/24 Javascript
Javascript监视变量变化的方法
2015/06/09 Javascript
jquery form表单获取内容以及绑定数据
2016/02/24 Javascript
jqGrid用法汇总(全经典)
2016/06/28 Javascript
vuejs2.0实现一个简单的分页示例
2017/02/22 Javascript
Jquery把获取到的input值转换成json
2017/05/15 jQuery
vue单页面打包文件大?首次加载慢?nginx带你飞,从7.5M到1.3M蜕变过程(推荐)
2018/01/16 Javascript
jQuery实现table表格checkbox全选的方法分析
2018/07/04 jQuery
微信小程序实现图片上传放大预览删除代码
2020/06/28 Javascript
原生JS实现获取及修改CSS样式的方法
2018/09/04 Javascript
详解webpack之图片引入-增强的file-loader:url-loader
2018/10/08 Javascript
layui清空,重置表单数据的实例
2019/09/12 Javascript
微信小程序开发之获取用户手机号码(php接口解密)
2020/05/17 Javascript
python算法学习之基数排序实例
2013/12/18 Python
Python优化技巧之利用ctypes提高执行速度
2016/09/11 Python
python实现单链表中删除倒数第K个节点的方法
2018/09/28 Python
python语言的优势是什么
2020/06/17 Python
使用tkinter实现三子棋游戏
2021/02/25 Python
Quiksilver荷兰官方网站:冲浪和滑雪板
2019/11/16 全球购物
服务生自我鉴定
2014/01/22 职场文书
周年庆典邀请函范文
2014/01/24 职场文书
战友聚会策划方案
2014/06/13 职场文书
欢迎新生标语
2014/10/06 职场文书
幼儿园中班班级总结
2015/08/10 职场文书
PyTorch中permute的使用方法
2022/04/26 Python
Win11使用CAD卡顿或者致命错误怎么办?Win11无法正常使用CAD的解决方法
2022/07/23 数码科技