jQuery實(shí)現(xiàn)簡單的點(diǎn)贊效果
本文實(shí)例講解了jQuery實(shí)現(xiàn)簡單的點(diǎn)贊效果的詳細(xì)代碼,具體內(nèi)容如下
效果圖:
下面提供一個"點(diǎn)贊"的實(shí)例代碼,用ASP.NET MVC4+jQuery Ajax實(shí)現(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); //其它操作,比如每個登錄用戶只能點(diǎn)一次,按鈕禁用等 } }); }); }); </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)容,希望對大家學(xué)習(xí)jquery程序設(shè)計有所幫助。
- jQuery+CSS3實(shí)現(xiàn)點(diǎn)贊功能
- jquery心形點(diǎn)贊關(guān)注效果的簡單實(shí)現(xiàn)
- jQuery+ajax實(shí)現(xiàn)實(shí)用的點(diǎn)贊插件代碼
- php+jQuery+Ajax實(shí)現(xiàn)點(diǎn)贊效果的方法(附源碼下載)
- jQuery+ajax實(shí)現(xiàn)文章點(diǎn)贊功能的方法
- jQuery實(shí)現(xiàn)的超簡單點(diǎn)贊效果實(shí)例分析
- jQuery實(shí)現(xiàn)的給圖片點(diǎn)贊+1動畫效果(附在線演示及demo源碼下載)
- jQuery實(shí)現(xiàn)的點(diǎn)贊隨機(jī)數(shù)字顯示動畫效果(附在線演示與demo源碼下載)
- jQuery簡單實(shí)現(xiàn)QQ空間點(diǎn)贊已經(jīng)取消點(diǎn)贊
- jquery點(diǎn)贊功能實(shí)現(xiàn)代碼 點(diǎn)個贊吧!
相關(guān)文章
jQuery實(shí)現(xiàn)美觀的多級動畫效果菜單代碼
這篇文章主要介紹了jQuery實(shí)現(xiàn)多級動畫效果菜單代碼,涉及jquery針對頁面元素的遍歷及事件綁定操作頁面元素樣式變換的技巧,界面美觀實(shí)用,具有一定參考借鑒價值,需要的朋友可以參考下2015-09-09jquery實(shí)現(xiàn)紅色豎向多級向右展開的導(dǎo)航菜單效果
這篇文章主要介紹了jquery實(shí)現(xiàn)紅色豎向多級向右展開的導(dǎo)航菜單效果,涉及jquery鼠標(biāo)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-12jQueryUI如何自定義組件實(shí)現(xiàn)代碼
第一次自定義jQueryUI Widget 又是第一次,現(xiàn)在的感受是jQueryUI Widget能讓你代碼組織得更好,風(fēng)格更一致。2010-11-11jQuery實(shí)現(xiàn)鼠標(biāo)懸停顯示提示信息窗口的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)鼠標(biāo)懸停顯示提示信息窗口的方法,涉及jQuery操作鼠標(biāo)事件及show、hide等方法的使用技巧,需要的朋友可以參考下2015-04-04基于jQuery實(shí)現(xiàn)的圖片切換焦點(diǎn)圖整理
這篇文章主要介紹了基于jQuery實(shí)現(xiàn)的圖片切換焦點(diǎn)圖整理,需要的朋友可以參考下2014-12-12jquery的checkbox,radio,select等方法小結(jié)
jquery的checkbox,radio,和select是jquery操作的一個難點(diǎn)和重點(diǎn),很多前端新手對其了解不是很透徹。時間久了不用,我在寫的時候有時也難免對某些操作支支吾吾,記不清楚,現(xiàn)在,對其做一些簡單的總結(jié)2016-08-08jquery實(shí)現(xiàn)背景跟隨鼠標(biāo)滑動導(dǎo)航
這篇文章主要為大家詳細(xì)介紹了jquery背景跟隨鼠標(biāo)滑動導(dǎo)航,特別美觀,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2015-11-11