当前位置：首页 > news >正文

jQuery Ajax无刷新操作

news 来源：原创 2024/5/6 11:46:37

下面是“无刷新登录”的例子，采用Ashx+jQuery Ajax实现。

//后台实例代码 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  
    }  
}

//前台实例代码 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>

分别在前台aspx页面和后台ashx页面中输入如上代码，就实现了一个超级简单的Ajax登录，很简单吧？

——————————————————————————————————————————————————————————————————————

下面提供一个"点赞"的实例代码，用ASP.NET MVC4+jQuery Ajax实现。

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);  
                    //其它操作，比如每个登录用户只能点一次，按钮禁用等  
                }  
            });  
        });  
    });  
</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++;//数量+1  
            db.SaveChanges();  
            return Json(newClickCountModel);  
        }  
    }  
}