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)點贊功能
- jquery心形點贊關注效果的簡單實現(xiàn)
- 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實現(xiàn)紅色豎向多級向右展開的導航菜單效果
這篇文章主要介紹了jquery實現(xiàn)紅色豎向多級向右展開的導航菜單效果,涉及jquery鼠標hover事件結(jié)合class樣式動態(tài)添加與刪除的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-08-08利用jQuery接受和處理xml數(shù)據(jù)的代碼(.net)
以下使用jQuery+Servlet接受和處理xml數(shù)據(jù),模擬判斷用戶名是否存在2011-03-03Colortip基于jquery的信息提示框插件在IE6下面的顯示問題修正方法
今天看到了MK的這篇文章,然后其中的Colortip這個jQuery插件引起了我的注意,倒不是因為它新奇,而是我之前看到過,沒想到它就成了2010年最佳之一了2010-12-12jquery的checkbox,radio,select等方法小結(jié)
jquery的checkbox,radio,和select是jquery操作的一個難點和重點,很多前端新手對其了解不是很透徹。時間久了不用,我在寫的時候有時也難免對某些操作支支吾吾,記不清楚,現(xiàn)在,對其做一些簡單的總結(jié)2016-08-08