jQuery Ajax无刷新操作
下面是“无刷新登录”的例子，采用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标志login success
}
else
{
context.Response.Write("");//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);
}
}
}
jQuery Ajax无刷新操作的更多相关文章
- jQuery Ajax无刷新操作一般处理程序 ashx
//前台实例代码 aspx文件 <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="ser ...
- JQUERY AJAX无刷新异步上传文件
AJAX无刷新上传文件并显示 http://blog.csdn.net/gao3705512/article/details/9330637?utm_source=tuicool jQuery For ...
- LigerUi框架+jquery+ajax无刷新留言板系统的实现
前些天发布了LigerUi框架的增.删.改代码,一堆代码真的也没一张图片.有的网友推荐上图,所有今天把涉及到这个框架的开源的留言板共享给大家.在修改的过程中可能有些不足的地方希望大家拍砖. 因为留言板 ...
- JQuery+AJax - 无刷新使用验证码
最终效果: 项目目录: Default.aspx前端代码: <%@ Page Language="C#" AutoEventWireup="true" C ...
- jquery+ajax无刷新加载数据，新闻浏览更多
<script type="text/javascript"> $(document).ready(function (){ $(window).scroll(fu ...
- jquery ajax 无刷新上传
var form = new FormData(); form.append('file', $("#submitmaterials").find("input" ...
- jQuery实现form表单基于ajax无刷新提交方法详解
本文实例讲述了jQuery实现form表单基于ajax无刷新提交方法.分享给大家供大家参考,具体如下: 首先,新建Login.html页面: <!DOCTYPE html PUBLIC &quo ...
- js中对arry数组的各种操作小结 瀑布流AJAX无刷新加载数据列表--当页面滚动到Id时再继续加载数据 web前端url传递值 js加密解密 HTML中让表单input等文本框为只读不可编辑的方法 js监听用户的键盘敲击事件，兼容各大主流浏览器 HTML特殊字符
js中对arry数组的各种操作小结 最近工作比较轻松,于是就花时间从头到尾的对js进行了详细的学习和复习,在看书的过程中,发现自己平时在做项目的过程中有很多地方想得不过全面,写的不够合理,所以说啊 ...
- ajaxfileupload.js插件结合一般处理文件实现Ajax无刷新上传
先上几张图更直观展示一下要实现的功能.本功能主要通过Jquery ajaxfileupload.js插件结合ajaxUpFile.ashx一般应用程序处理文件实现Ajax无刷新上传功能,结合NPOI2 ...
随机推荐
- nginx,FastCGI启动语句
/etc/init.d/nginx restart spawn-fcgi -a 127.0.0.1 -p 9000 -C 10 -u www-data -f /usr/bin/php-cgi
- eclipse+webservice开发实例
1.參考文献: 1.利用Java编写简单的WebService实例 http://nopainnogain.iteye.com/blog/791525 2.Axis2与Eclipse整合开发Web ...
- 2013 ACM/ICPC Asia Regional Changsha Online J Candies
AC了,但是不知道为什么,但是恶心的不得了~最近写代码,思路都非常清晰,但是代码各种bug~T.T~说说思路吧:二分~330ms~ 小队友fribbi的思路是离线250msAC~ 预处理solve函数 ...
- 给定一个字符串，仅由a,b,c 3种小写字母组成。
package com.boco.study; /** * 题目详情 给定一个字符串,仅由a,b,c 3种小写字母组成. 当出现连续两个不同的字母时,你可以用另外一个字母替换它,如 有ab或ba连续出 ...
- 关于Log4j的初始化
1Log4j是什么 Log4j是Apache比較优秀的开源项目.在各个平台和项目中有较为广泛的应用.是为JAVA平台开发的日志管理平台.同一时候,Log4j也是JAVA开发项目中使用比較普遍的日 ...
- 关于jQuery对象与DOM对象
今天遇到了关于jQuery对象与dom对象的区分问题.具体如下:对于元素<span id="aa" class="aa">hyz</span& ...
- 利用Multipeer Connectivity框架进行WiFi传输
什么是Multipeer Connectivity? 在iOS7中,引入了一个全新的框架——Multipeer Connectivity(多点连接).利用Multipeer Connectivity框 ...
- Java设计模式10：设计模式之 值对象
1. 场景和问题: 在Java程序中,需要在对象之间交互大量的数据,比如要为方法传入参数,也要获取方法的返回值,请问如何能更好的进行数据的交互? 2. 解决方案: 值对象 3. 值对象的本质 ...
- 关于iOS自定义返回按钮右滑返回手势失效的解决:
在viewDidLoad方法里面添加下面这一句代码即可 self.navigationController.interactivePopGestureRecognizer.delegate=(id)s ...
- Linux基础（一）
一.安装linux系统可以用的5种方法 1.光盘 2.硬盘 3.NFS 映像 4.FTP 5.HTTP 硬盘安装分两种情况: A.是从Win系统上安装 B.是从别的Linux启动安装 这里介绍大多数人 ...