下面是“无刷新登录”的例子，采用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无刷新操作的更多相关文章

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

    //前台实例代码 aspx文件 <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="ser ...

  2. JQUERY AJAX无刷新异步上传文件

    AJAX无刷新上传文件并显示 http://blog.csdn.net/gao3705512/article/details/9330637?utm_source=tuicool jQuery For ...

  3. LigerUi框架+jquery+ajax无刷新留言板系统的实现

    前些天发布了LigerUi框架的增.删.改代码,一堆代码真的也没一张图片.有的网友推荐上图,所有今天把涉及到这个框架的开源的留言板共享给大家.在修改的过程中可能有些不足的地方希望大家拍砖. 因为留言板 ...

  4. JQuery+AJax - 无刷新使用验证码

    最终效果: 项目目录: Default.aspx前端代码: <%@ Page Language="C#" AutoEventWireup="true" C ...

  5. jquery+ajax无刷新加载数据，新闻浏览更多

      <script type="text/javascript"> $(document).ready(function (){ $(window).scroll(fu ...

  6. jquery ajax 无刷新上传

    var form = new FormData(); form.append('file', $("#submitmaterials").find("input" ...

  7. jQuery实现form表单基于ajax无刷新提交方法详解

    本文实例讲述了jQuery实现form表单基于ajax无刷新提交方法.分享给大家供大家参考,具体如下: 首先,新建Login.html页面: <!DOCTYPE html PUBLIC &quo ...

  8. js中对arry数组的各种操作小结 瀑布流AJAX无刷新加载数据列表--当页面滚动到Id时再继续加载数据 web前端url传递值 js加密解密 HTML中让表单input等文本框为只读不可编辑的方法 js监听用户的键盘敲击事件，兼容各大主流浏览器 HTML特殊字符

    js中对arry数组的各种操作小结   最近工作比较轻松,于是就花时间从头到尾的对js进行了详细的学习和复习,在看书的过程中,发现自己平时在做项目的过程中有很多地方想得不过全面,写的不够合理,所以说啊 ...

  9. ajaxfileupload.js插件结合一般处理文件实现Ajax无刷新上传

    先上几张图更直观展示一下要实现的功能.本功能主要通过Jquery ajaxfileupload.js插件结合ajaxUpFile.ashx一般应用程序处理文件实现Ajax无刷新上传功能,结合NPOI2 ...

随机推荐

  1. MongDB简介

    一.基本概念 MongoDB 是一个高性能,开源,无模式的文档型数据库,是当前NoSQL 数据库产品中最热门的一种.它在许多场景下可用于替代传统的关系型数据库或键/值存储方式,MongoDB 使用C+ ...

  2. nonce和timestamp在Http安全协议中的作用

    前段时间给客户网站做新浪微博账号登录功能,对OAuth协议以及相关的一些安全协议做了一些研究,顺便就记录一下学习心得吧.在这里就不打算具体讲OAuth的协议流程了,而是针对OAuth请求头里的nonc ...

  3. POJ_1365_Prime_Land

    //懒得解释 #include <iostream> #include <cstring> #include <cmath> #include <cstdio ...

  4. iOS开发——UI篇&提示效果

    提示效果 关于iOS开发提示效果是一个很常见的技术,比如我们平时点击一个按钮,实现回馈,或者发送网络请求的时候! 技术点: 一:View UIAlertView UIActionSheet 二:控制器 ...

  5. iOS开发——MVC详解&Swift＋OC

    MVC 设计模式 这两天认真研究了一下MVC设计模式,在iOS开发中这个算是重点中的重点了,如果对MVC模式不理解或者说不会用,那么你iOS肯定学不好,或者写不出好的东西,当然本人目前也在学习中,不过 ...

  6. android利用zbar二维码扫描-(解决中文乱码及扫描区域定义)

    写在最前(这是对上一篇博文的问题做的更新[android利用zbar二维码扫描]) project下载   zbarLib编译project  project下载0积分 bug 在2.3的系统中Hol ...

  7. air 中的 LocalStore

    <ignore_js_op> 在AIR客户端程序中有时需要将用户的一些信息保存在本地,如果信息没有涉及到隐私那么一般用SharedObject类即可将数据存储在本地.由于SharedObj ...

  8. error: /usr/include/objc/objc-class.h: No such file or directory

    When i use the example of ShareKit package,i have come across this error:"error: /usr/include/o ...

  9. 自定义控件（视图）1期笔记02：View的绘制流程

    1. 引言: 来自源码的3个方法: (1)public final void measure():测量,用来控制控件的大小,final不建议覆写 (2)public void layout():布局, ...

  10. SVN服务器搭建和使用（二)

      上一篇介绍了VisualSVN Server和TortoiseSVN的下载,安装,汉化.这篇介绍一下如何使用VisualSVN Server建立版本库,以及TortoiseSVN的使用. 首先打开 ...