下面是“无刷新登录”的例子，采用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 设置横屏或竖屏

    方法一:在AndroidManifest.xml中配置 如果不想让软件在横竖屏之间切换,最简单的办法就是在项目的AndroidManifest.xml中找到你所指定的activity中加上androi ...

  2. Distributed systems

    http://book.mixu.net/distsys/single-page.html

  3. 文件I/O（不带缓冲）之open函数

    调用open函数可以打开或创建一个文件. #include <fcntl.h> int open( const char *pathname, int oflag, ... /* mode ...

  4. Jordan Lecture Note-3: 梯度投影法

    Jordan Lecture Note-3:梯度投影法 在这一节,我们介绍如何用梯度投影法来解如下的优化问题: \begin{align} \mathop{\min}&\quad f(x)\n ...

  5. Java读取文本文件中文乱码问题 .转载

    最近遇到一个问题,Java读取文本文件(例如csv文件.txt文件等),遇到中文就变成乱码.读取代码如下: List<String> lines=new ArrayList<Stri ...

  6. Java基础知识强化之网络编程笔记10：TCP之客户端读取文本文件服务器控制台输出

    1. TCP之客户端读取文本文件服务器控制台输出 (1)客户端:(发送数据到服务端) package cn.itcast_10; import java.io.BufferedReader; impo ...

  7. JS类型（1）_JS学习笔记（2016.10.02）

    js类型 js中的数据类型有undefined,boolean,number,string,null,object等6种,前5种为原始类型(基本类型),基本类型的访问是按值访问的,就是说你可以操作保存 ...

  8. Android_listView_Listener

    layout.xml <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" x ...

  9. svn服务器的搭建

    subversion是优秀的版本管理工具,下面简单介绍svn服务器和客户端的下载.安装.搭建以及使用 一:下载svn服务器和客户端 1:下载地址服务器下载地址:http://subversion.ap ...

  10. java编程常用技术

    一:将String字符串放在最前面 防止发生NullPointerException异常,我们通常把String字符串放在equals方法的左边来比较,这样可以有效的避免 空指针异常的发生. 第一种情 ...