jQuery實(shí)現(xiàn)簡(jiǎn)單的點(diǎn)贊效果
本文實(shí)例講解了jQuery實(shí)現(xiàn)簡(jiǎn)單的點(diǎn)贊效果的詳細(xì)代碼,具體內(nèi)容如下
效果圖:

下面提供一個(gè)"點(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);
//其它操作,比如每個(gè)登錄用戶只能點(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);
}
}
}
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家學(xué)習(xí)jquery程序設(shè)計(jì)有所幫助。
- jQuery+CSS3實(shí)現(xiàn)點(diǎn)贊功能
- Spring服務(wù)注解有哪些
- 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)的超簡(jiǎn)單點(diǎn)贊效果實(shí)例分析
- jQuery實(shí)現(xiàn)的給圖片點(diǎn)贊+1動(dòng)畫效果(附在線演示及demo源碼下載)
- jQuery實(shí)現(xiàn)的點(diǎn)贊隨機(jī)數(shù)字顯示動(dòng)畫效果(附在線演示與demo源碼下載)
- jQuery簡(jiǎn)單實(shí)現(xiàn)QQ空間點(diǎn)贊已經(jīng)取消點(diǎn)贊
- jquery點(diǎn)贊功能實(shí)現(xiàn)代碼 點(diǎn)個(gè)贊吧!
相關(guān)文章
jQuery position() 函數(shù)詳解以及jQuery中position函數(shù)的應(yīng)用
position()函數(shù)用于返回當(dāng)前匹配元素相對(duì)于其被定位的祖輩元素的偏移,也就是相對(duì)于被定位的祖輩元素的坐標(biāo)。該函數(shù)只對(duì)可見元素有效,通過(guò)本文給大家介紹jQuery position() 函數(shù)詳解以及jQuery中position函數(shù)的應(yīng)用,感興趣的朋友一起學(xué)習(xí)吧2015-12-12
jQuery實(shí)現(xiàn)簡(jiǎn)單彈幕制作
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)簡(jiǎn)單彈幕制作,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-12-12
jQuery+CSS3折疊卡片式下拉列表框?qū)崿F(xiàn)效果
這是一款使用jQuery和CSS3制作的效果非常炫酷的折疊卡片式下拉列表框特效,感興趣的小伙伴們可以參考一下2015-11-11
jQuery EasyUI框架中的Datagrid數(shù)據(jù)表格組件結(jié)構(gòu)詳解
jQuery EasyUI是一個(gè)旨在輔助HTML5打造更好的Web界面的框架,而其中的Datagrid組件也是非常強(qiáng)大,這里我們就來(lái)看一下jQuery EasyUI框架中的Datagrid數(shù)據(jù)表格組件結(jié)構(gòu)詳解2016-06-06
jquery 校驗(yàn)中國(guó)身份證號(hào)碼實(shí)例詳解
這篇文章主要介紹了jquery 校驗(yàn)中國(guó)身份證號(hào)碼實(shí)例詳解的相關(guān)資料,需要的朋友可以參考下2017-04-04
jquery scrollTop方法根據(jù)滾動(dòng)像素顯示隱藏頂部導(dǎo)航條
使用jquery的scrollTop方法監(jiān)視頁(yè)面垂直滾動(dòng)像素,并根據(jù)像素隱藏或者顯示頂部的導(dǎo)航條,具體實(shí)現(xiàn)代碼如下,感興趣的朋友可以參考下哈2013-05-05
使用jquery庫(kù)實(shí)現(xiàn)電梯導(dǎo)航效果
這篇文章主要為大家詳細(xì)介紹了使用jquery庫(kù)實(shí)現(xiàn)電梯導(dǎo)航效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-02-02

