jQuery Ajax无刷新操作一般处理程序 ashx

  1. //前台实例代码 aspx文件  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head runat="server">  
  4.     <title></title>  
  5.    
  6.     <script src="js/jquery-1.4.2.js" type="text/javascript"></script>  
  7.    
  8.     <script type="text/javascript">  
  9.         $(function() {  
  10.             $("#test").live("click", function() {  
  11.                 //alert(0);  
  12.                 $.ajax({  
  13.                     type: 'POST',  
  14.                     url: 'Handler1.ashx',  
  15.                     data: { "name": $("#name").val() },  
  16.                     success: function(data) {  
  17.                         if (1 == data)  
  18.                             alert('login success');  
  19.                         else  
  20.                             alert('login fail');  
  21.                     }  
  22.                 });  
  23.             });  
  24.         });  
  25.     </script>  
  26.    
  27. </head>  
  28. <body>  
  29.     <form id="form1" runat="server">  
  30.     <div>  
  31.         <input type="text" name="name" id="name" />  
  32.         <input type="button" name="test" id="test" value="validate" />  
  33.     </div>  
  34.     </form>  
  35. </body>  
  36. </html>  

-------------------------------

  1. //后台实例代码 ashx文件（可替换为从数据库中读取）  
  2. public void ProcessRequest(HttpContext context)  
  3. {  
  4.     context.Response.ContentType = "text/plain";  
  5.     //context.Response.Write("Hello World");  
  6.   
  7.     string name = context.Request.Params["name"].ToString().Trim();  
  8.     if ("china".Equals(name))  
  9.     {  
  10.         context.Response.Write("1");//1标志login success  
  11.     }  
  12.     else  
  13.     {  
  14.         context.Response.Write("0");//0标志login fail  
  15.     }  
  16. }  

 

——————view 和control

  1. @{  
  2.     ViewBag.Title = "Index";  
  3. }  
  4. @model MvcAjaxAdd.Models.ClickCountModel  
  5. <script src="~/Scripts/jquery-1.7.1.js" type="text/javascript"></script>  
  6. <script type="text/javascript">  
  7.     $(function () {  
  8.         var obj = {  
  9.             "num": $("#lblnum").text(),  
  10.             "url": window.location.pathname//获取/Home/Index  
  11.         };  
  12.         $("#addnum").click(function () {  
  13.             $.ajax({  
  14.                 type: 'POST',  
  15.                 url: '/Home/ClickGood',  
  16.                 data: obj,  
  17.                 success: function (data) {  
  18.                     $("#lblnum").text(data.Num);  
  19.                     //其它操作，比如每个登录用户只能点一次，按钮禁用等  
  20.                 }  
  21.             });  
  22.         });  
  23.     });  
  24. </script>  
  25. <div id="addnum" style="width: 70px; height: 70px; background-color: #FF9900">  
  26.     <div align="center" style="margin-top: 10px;">  
  27.         <label style="color: White; font-size: 20pt;">  
  28.             顶</label></div>  
  29.     <div align="center">  
  30.         <label id="lblnum" style="color: White; font-size: 10pt;">  
  31.             @Model.Num</label></div>  
  32. </div>  

----------------------------control

  1. namespace MvcAjaxAdd.Controllers  
  2. {  
  3.     public class HomeController : Controller  
  4.     {  
  5.         private ClickCountContext db = new ClickCountContext();  
  6.   
  7.         public ActionResult Index()  
  8.         {  
  9.             ClickCountModel ClickCountModel = db.ClickCountModels.FirstOrDefault(x => x.URL == "/");  
  10.             return View(ClickCountModel);  
  11.         }  
  12.   
  13.         [HttpPost]  
  14.         public JsonResult ClickGood(ClickCountModel ClickCountModel)  
  15.         {  
  16.             ClickCountModel newClickCountModel = db.ClickCountModels.FirstOrDefault(x => x.URL == ClickCountModel.URL);  
  17.             newClickCountModel.Num++;//数量+1  
  18.             db.SaveChanges();  
  19.             return Json(newClickCountModel);  
  20.         }  
  21.     }  
  22. }  

 

//标准的写法：
$.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);
     }
});

 

posted @ 2016-07-29 18:28  fightingyy  阅读(217)  评论(0)  编辑  收藏  举报