- //前台实例代码 aspx文件
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head runat="server">
- <title></title>
- <script src="js/jquery-1.4.2.js" type="text/javascript"></script>
- <script type="text/javascript">
- $(function() {
- $("#test").live("click", function() {
- //alert(0);
- $.ajax({
- type: 'POST',
- url: 'Handler1.ashx',
- data: { "name": $("#name").val() },
- success: function(data) {
- if (1 == data)
- alert('login success');
- else
- alert('login fail');
- }
- });
- });
- });
- </script>
- </head>
- <body>
- <form id="form1" runat="server">
- <div>
- <input type="text" name="name" id="name" />
- <input type="button" name="test" id="test" value="validate" />
- </div>
- </form>
- </body>
- </html>
-------------------------------
- //后台实例代码 ashx文件（可替换为从数据库中读取）
- public void ProcessRequest(HttpContext context)
- {
- context.Response.ContentType = "text/plain";
- //context.Response.Write("Hello World");
- string name = context.Request.Params["name"].ToString().Trim();
- if ("china".Equals(name))
- {
- context.Response.Write("1");//1标志login success
- }
- else
- {
- context.Response.Write("0");//0标志login fail
- }
- }
——————view 和control
- @{
- 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>
----------------------------control
- 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);
- }
- }
- }
//标准的写法：
$.ajax({
type: "post",
dataType: "json",
contentType: "application/json", //注意：WebMethod()必须加这项，否则客户端数据不会传到服务端
data:{如上所述},//注意：data参数可以是string个int类型
url: "List.aspx/DeleteNews",//模拟web服务，提交到方法
// 可选的 async:false,阻塞的异步就是同步
beforeSend:function(){
// do something.
// 一般是禁用按钮等防止用户重复提交
$("#btnClick").attr({disabled:"disabled"});
// 或者是显示loading图片
},
success: function (data) {
alert("success: " + data.d);//注意这里：必须通过data.d才能获取到服务器返回的值
// 服务端可以直接返回Model，也可以返回序列化之后的字符串，如果需要反序列化：string json = JSON.parse(data.d);
// 有时候需要嵌套调用ajax请求，也是可以的
},
complete: function(){
//do something.
$("#btnClick").removeAttr("disabled");
// 隐藏loading图片
}，
error: function (data) {
alert("error: " + data.d);
}
});