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

最新推荐文章于 2024-05-03 11:08:18 发布

weixin_30949361

最新推荐文章于 2024-05-03 11:08:18 发布

阅读量69

点赞数

文章标签： javascript json 数据库 ViewUI

原文链接：http://www.cnblogs.com/momjs/p/5719391.html

版权

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

转载于:https://www.cnblogs.com/momjs/p/5719391.html

weixin_30949361

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery Ajax无刷新操作一般处理程序 ashx

//前台实例代码aspx文件<htmlxmlns="http://www.w3.org/1999/xhtml"><headrunat="server"><title></title><scriptsrc="js/jquery-1.4.2.js"type="text/java...
复制链接

扫一扫