[ajax] jquery ajax和后台数据实现点击数字加1实例

jquery ajax和后台数据实现点击数字加1实例:
本章节分享一段代码实例，它实现了点击数字加1的效果，类似于常见的点赞功能。
由于涉及到后台和数据库的操作，这里无法实现演示，只能够贴出主要的代码，涉及到数据库的那一部分没有。
是ASP.NET结合ajax实现的:
Model:

[C#]  纯文本查看  复制代码

01 02 03 04 05 06 07 08 09 10 11 12 13

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:

[HTML]  纯文本查看  复制代码 运行代码

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32

@{   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:

[C#]  纯文本查看  复制代码

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22

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);    }   } }