下面是“无刷新登录”的例子，采用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. mysqlnd cannot connect to MySQL 4.1+ using the old insecure authentication的解决方法

    直接命令行操作没有问题,但是PHP连接就会报上面的错误. SET old_passwords =0; USE mysql; UPDATE user SET password =PASSWORD('yo ...

  2. glog摘记

    projcet url:https://code.google.com/p/google-glog/ usage: application-level logging setting flags GL ...

  3. Xposed知识

    最近闹得沸沸扬扬的MIUI抄袭Xposed不署名事件,为此在这里普及一下相关的Xposed的知识. 相关资源 source code: https://github.com/rovo89 online ...

  4. ubuntu下设置开机自启动项

    可用一些小工具来管理 Ubuntu 的启动选项: 小工具 rcconf: #sudo apt-get rcconf #sudo apt-get install rcconf root 下运行: #su ...

  5. iOS开发——适配篇&iOS9适配

    iOS9适配 1. Demo1_iOS9网络适配_ATS:改用更安全的HTTPS [摘要]iOS9把所有的http请求都改为https了:iOS9系统发送的网络请求将统一使用TLS 1.2 SSL.采 ...

  6. 数据库性能测试---前阿里数据库团队资深DBA杨奇龙

    杨奇龙 前阿里数据库团队资深DBA 主要负责淘宝业务线,经历多次11.11,有海量业务访问DB架构设计经验. 目前就职于有赞科技DBA,负责数据库运维工作,熟悉MySQL 性能优化,故障诊断,性能压测 ...

  7. 文件I/O（不带缓冲）之write函数

    调用write函数向打开的文件写数据. #include <unistd.h> ssize_t write( int filedes, const void *buf, size_t nb ...

  8. 第十一章 Function类型

    在ECMAScript中,Function(函数)类型实际上是对象.每个函数也是Function类型的实例,而且都与其它引用类型一样具有属性和方法.由于是函数对象,因此函数名实际上也是一个指向函数对象 ...

  9. Mechanism of Loading Resources

    Mechanism of Loading Resources 1. Distributed strategy 1.1. Developer guilde 1.2. Notes 2. Centraliz ...

  10. 给iOS 模拟器“安装”app文件

    前言 刚刚接触iOS的时候,我就一直很好奇,模拟器上面能不能直接安装app呢?如果可以,我们就直接在模拟器上面聊QQ和微信了.直到昨天和朋友们聊到了这个话题,没有想到还真的可以给模拟器“安装”app! ...