下面是“无刷新登录”的例子，采用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);
}
}
}
效果图：
![杨校老师课堂之基于Servlet整合JQuery中的Ajax进行表单提交[基于IDEA]](https://ucc.alicdn.com/pic/developer-ecology/xsqfoqm5pyibg_09d05e48e8364b9588701e9347609934.gif?x-oss-process=image/resize,h_160,m_lfit)
