jQuery實現(xiàn)簡單的點贊效果
更新時間:2020年05月29日 09:33:52 投稿:lijiao
這篇文章主要介紹了jQuery實現(xiàn)簡單的點贊效果的相關資料,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
本文實例講解了jQuery實現(xiàn)簡單的點贊效果的詳細代碼,具體內(nèi)容如下
效果圖:

下面提供一個"點贊"的實例代碼,用ASP.NET MVC4+jQuery Ajax實現(xiàn)。
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++;//數(shù)量+1
db.SaveChanges();
return Json(newClickCountModel);
}
}
}
以上就是本文的全部內(nèi)容,希望對大家學習jquery程序設計有所幫助。
您可能感興趣的文章:
- jQuery+CSS3實現(xiàn)點贊功能
- Spring服務注解有哪些
- jQuery+ajax實現(xiàn)實用的點贊插件代碼
- php+jQuery+Ajax實現(xiàn)點贊效果的方法(附源碼下載)
- jQuery+ajax實現(xiàn)文章點贊功能的方法
- jQuery實現(xiàn)的超簡單點贊效果實例分析
- jQuery實現(xiàn)的給圖片點贊+1動畫效果(附在線演示及demo源碼下載)
- jQuery實現(xiàn)的點贊隨機數(shù)字顯示動畫效果(附在線演示與demo源碼下載)
- jQuery簡單實現(xiàn)QQ空間點贊已經(jīng)取消點贊
- jquery點贊功能實現(xiàn)代碼 點個贊吧!
相關文章
jQuery position() 函數(shù)詳解以及jQuery中position函數(shù)的應用
position()函數(shù)用于返回當前匹配元素相對于其被定位的祖輩元素的偏移,也就是相對于被定位的祖輩元素的坐標。該函數(shù)只對可見元素有效,通過本文給大家介紹jQuery position() 函數(shù)詳解以及jQuery中position函數(shù)的應用,感興趣的朋友一起學習吧2015-12-12
jQuery+CSS3折疊卡片式下拉列表框實現(xiàn)效果
這是一款使用jQuery和CSS3制作的效果非常炫酷的折疊卡片式下拉列表框特效,感興趣的小伙伴們可以參考一下2015-11-11
jQuery EasyUI框架中的Datagrid數(shù)據(jù)表格組件結構詳解
jQuery EasyUI是一個旨在輔助HTML5打造更好的Web界面的框架,而其中的Datagrid組件也是非常強大,這里我們就來看一下jQuery EasyUI框架中的Datagrid數(shù)據(jù)表格組件結構詳解2016-06-06
jquery scrollTop方法根據(jù)滾動像素顯示隱藏頂部導航條
使用jquery的scrollTop方法監(jiān)視頁面垂直滾動像素,并根據(jù)像素隱藏或者顯示頂部的導航條,具體實現(xiàn)代碼如下,感興趣的朋友可以參考下哈2013-05-05

