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 相关文章推荐
学习javascript,实现插入排序实现代码
Jul 31 Javascript
字符串的replace方法应用浅析
Dec 06 Javascript
JavaScript中的连字符详解
Nov 28 Javascript
javaScript中的this示例学习详解及工作原理
Jan 13 Javascript
JavaScript中自定义事件用法分析
Dec 23 Javascript
使用JQuery实现Ctrl+Enter提交表单的方法
Oct 22 Javascript
Jqgrid之强大的表格插件应用
Dec 02 Javascript
jQuery+canvas实现简单的球体斜抛及颜色动态变换效果
Jan 28 Javascript
JS获取多维数组中相同键的值实现方法示例
Jan 06 Javascript
微信小程序学习之数据处理详解
Jul 05 Javascript
vue项目tween方法实现返回顶部的示例代码
Mar 02 Javascript
详解Typescript里的This的使用方法
Jan 08 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读取XML值的代码(推荐)
2011/01/01 PHP
php的mssql数据库连接类实例
2014/11/28 PHP
jQuery如何实现点击页面获得当前点击元素的id或其他信息
2014/01/09 Javascript
jQuery取消ajax请求的方法
2015/06/09 Javascript
纯javascript实现的小游戏《Flappy Pig》实例
2015/07/27 Javascript
jquery UI Datepicker时间控件的使用方法(终结版)
2015/11/07 Javascript
jQuery mobile转换url地址及获取url中目录部分的方法
2015/12/04 Javascript
基于Node.js的强大爬虫 能直接发布抓取的文章哦
2016/01/10 Javascript
jQuery xml字符串的解析、读取及查找方法
2016/03/01 Javascript
Struts2+jquery.form.js实现图片与文件上传的方法
2016/05/05 Javascript
jQuery中text() val()和html()的区别实例详解
2016/06/28 Javascript
js中scrollTop()方法和scroll()方法用法示例
2016/10/03 Javascript
javascript中this关键字详解
2016/12/12 Javascript
javascript 判断当前浏览器版本并判断ie版本
2017/02/17 Javascript
React Native中TabBarIOS的简单使用方法示例
2017/10/13 Javascript
AngularJS集合数据遍历显示的实例
2017/12/27 Javascript
Angular17之Angular自定义指令详解
2018/01/21 Javascript
Vue实现table上下移动功能示例
2019/02/21 Javascript
create-react-app使用antd按需加载的样式无效问题的解决
2019/02/26 Javascript
详解Node.JS模块 process
2020/08/31 Javascript
Vue项目配置跨域访问和代理proxy设置方式
2020/09/08 Javascript
python通过正则查找微博@(at)用户的方法
2015/03/13 Python
使用相同的Apache实例来运行Django和Media文件
2015/07/22 Python
Pandas 对Dataframe结构排序的实现方法
2018/04/10 Python
Python学习_几种存取xls/xlsx文件的方法总结
2018/05/03 Python
Python爬取qq空间说说的实例代码
2018/08/17 Python
详解pandas的外部数据导入与常用方法
2019/05/01 Python
Python爬虫requests库多种用法实例
2020/05/28 Python
使用HTML5原生对话框元素并轻松创建模态框组件
2019/03/06 HTML / CSS
大学生毕业自我鉴定范文
2013/11/03 职场文书
教师推荐信范文
2013/11/24 职场文书
社区清明节活动总结
2014/07/04 职场文书
邀请函范文
2015/02/02 职场文书
小组组名及励志口号
2015/12/24 职场文书
Pytorch中TensorBoard及torchsummary的使用详解
2021/05/12 Python
Spring中的@Transactional的工作原理
2022/06/05 Java/Android