下面是“无刷新登录”的例子，采用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. android小笔记

    1.启动其他应用程序 Intent launchIntent = getPackageManager().getLaunchIntentForPackage(currentAppInfo.getPac ...

  2. leetcode解决问题的方法||Integer to Roman问题

    problem: Given an integer, convert it to a roman numeral. Input is guaranteed to be within the range ...

  3. yii 数据库迁移

    在我们开发程序的过程中,数据库的结构也是不断调整的.我们的开发中要保证代码和数据库库的同步.因为我们的应用离不开数据库.例如: 在开发过程中,我们经常需要增加一个新的表,或者我们后期投入运营的产品,可 ...

  4. Struts2中的类型转换

    1.     Struts2中的类型转换 我们知道通过HTTP提交到后台的数据,都是字符串的形式,而我们需要的数据类型当然不只字符串类型一种.所以,我们需要类型转换! 在Struts2中,类型转换的概 ...

  5. html5 list属性、autocomplete属性、pattern属性

    list属性的值为某个datalist元素的id,datalist也是html5中新增的属性,类似于选择框select,或者android中的autocomplete textview控件.datal ...

  6. HeaderTemplate

    前台代码: <asp:Repeater ID="rptList" runat="server" onitemdatabound="doSomet ...

  7. Android 自学之绝对布局 AbsoluteLayout

    绝对布局(AbsoluteLayout),绝对布局就像java AWT中的空布局:所谓的绝对布局就是Android不提供任何的布局控制,而是有开发人员自己通过X坐标和Y坐标来控制组件的位置.当使用绝对 ...

  8. aggregation 详解4（pipeline aggregations）

    概述 管道聚合处理的对象是其它聚合的输出(桶或者桶的某些权值),而不是直接针对文档. 管道聚合的作用是为输出增加一些有用信息. 管道聚合大致分为两类: parent 此类聚合的"输入&quo ...

  9. aggregation 详解3（bucket aggregation）

    概述 桶分聚合不进行权值的计算,他们对文档根据聚合请求中提供的判断条件(比如:{"from":0,  "to":100})来进行分组(桶分). 桶分聚合还会额外 ...

  10. 详细讲解Android对自己的应用代码进行混淆加密防止反编译

    1.查看项目中有没有proguard.cfg. 2.如果没有那就看看这个文件中写的什么吧,看完后将他复制到你的项目中. -optimizationpasses 5 -dontusemixedcasec ...