下面是“无刷新登录”的例子，采用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. C# 之 OpenFileDialog的使用

    一.打开文件对话框(OpenFileDialog) 1. OpenFileDialog控件有以下基本属性 [1]InitialDirectory:对话框的初始目录 [2]Filter:要在对话框中显示 ...

  3. GitHub 建立远程仓库

    终端所有信息: Last login: Fri Aug 14 08:58:01 on console wuxiaoyuan:~ lan$ ls -al ~/.ssh ls: /Users/lan/.s ...

  4. 2014年6月5日 深圳 IBM 安全解决方案会议通知

    2014年6月5日 深圳 IBM 安全解决方案会议通知 http://gdtesting.com/news.php?id=191 时间: 2014年6月5日 地点: 深圳大中华喜来登 议程: IBM安 ...

  5. linux__升级java版本

    java下载地址:http://www.oracle.com/index.html 使用which java查看到,Java的环境变量指向的还是/usr/bin/java,问题找到了.于是就进行了下面 ...

  6. 在mac中怎么显示隐藏文件夹

    缺省情况下,在 Mac 下是不显示隐藏文件的,Finder 也未提供设置是否显示隐藏文件的选项,不像 Windows 下,有一个“文件夹选项“设置界面里可以控制,但这并不表示 Mac 下无法显示隐藏文 ...

  7. android之APP+JNI+Drv框架

    以LED为例 APP: JNI之java JNI之c DRV 项目组成:1.应用部分 1.1 APK(android工程) 1.1.1 java(功能) 1.1.2 xml(界面) 1.1.3 JNI ...

  8. HTTP层 —— 请求

    1.访问请求实例 要通过依赖注入获取当前 HTTP 请求实例,需要在控制器的构造函数或方法中对 Illuminate\Http\Request 类进行类型提示,这样当前请求实例会被服务容器自动注入: ...

  9. (原创)openvswitch实验连载1-fedora 17下安装openvswitch

    1 软件安装 1.1测试环境和网络拓朴 大部分朋友估计也没有一个真实环境来完全整个的测试,所以我也是使用了在一台PC机上使用Vmware Workstation的方式来进行实验.总体结构是在PC机上安 ...

  10. dedecms内容管理

    dedecms中的内容模型是指文章.软件.商品等类型的文章字段模板.在dedecms中,文章数据由文章主表和文章附加表构成,主表存放文章公共拥有的信息,比如标题,添加时间,点击量等,文章附加表存放文章 ...