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

来源：互联网发布：贝多芬第九交响曲知乎编辑：程序博客网时间：2024/06/04 00:27

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

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

01
02
03
04
05
06
07
08
09
10
11
12
13
namespaceMvcAjaxAdd.Models 
{
 publicclass ClickCountModel 
 {
  [Key]
  [DatabaseGeneratedAttribute(System.ComponentModel.DataAnnotations.Schema.DatabaseGeneratedOption.Identity)]
  publicint ID { get;set; } 
   
  publicstring URL { get;set; } 
   
  publicint? 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 
<scriptsrc="~/Scripts/jquery-1.7.1.js"type="text/javascript"></script>
<scripttype="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>
<divid="addnum"style="width: 70px; height: 70px; background-color: #FF9900">
 <divalign="center"style="margin-top: 10px;">
  <labelstyle="color: White; font-size: 20pt;">
   顶</label></div>
 <divalign="center">
  <labelid="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
namespaceMvcAjaxAdd.Controllers 
{
 publicclass HomeController : Controller 
 {
  privateClickCountContext db = newClickCountContext(); 
   
  publicActionResult Index() 
  {
   ClickCountModel ClickCountModel = db.ClickCountModels.FirstOrDefault(x => x.URL == "/");
   returnView(ClickCountModel); 
  }
   
  [HttpPost]
  publicJsonResult ClickGood(ClickCountModel ClickCountModel) 
  {
   ClickCountModel newClickCountModel = db.ClickCountModels.FirstOrDefault(x => x.URL == ClickCountModel.URL);
   newClickCountModel.Num++;//数量+1
   db.SaveChanges();
   returnJson(newClickCountModel); 
  }
 }
}

0 0