jQuery Ajax无刷新操作

简介: 下面是“无刷新登录”的例子,采用Ashx+jQuery Ajax实现。 //后台实例代码 ashx文件(可替换为从数据库中读取) public void Pr...

下面是“无刷新登录”的例子,采用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");//1标志login success
            }
            else
            {
                context.Response.Write("0");//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);
        }
    }
}

效果图:


目录
相关文章
|
5月前
|
前端开发 JavaScript
杨校老师课堂之基于Servlet整合JQuery中的Ajax进行表单提交[基于IDEA]
杨校老师课堂之基于Servlet整合JQuery中的Ajax进行表单提交[基于IDEA]
42 0
杨校老师课堂之基于Servlet整合JQuery中的Ajax进行表单提交[基于IDEA]
|
18天前
|
前端开发 JavaScript 数据处理
JQuery 拦截请求 | Ajax 请求拦截
【10月更文挑战第4天】
48 1
|
2月前
|
JSON 前端开发 JavaScript
jQuery AJAX 方法
jQuery AJAX 方法
30 1
|
2月前
|
JSON JavaScript 前端开发
Jquery常用操作汇总,dom操作,ajax请求
本文汇总了jQuery的一些常用操作,包括DOM元素的选择、添加、移除,表单操作,以及如何使用jQuery发送Ajax请求,涵盖了GET、POST请求和文件上传等常见场景。
|
2月前
|
JSON 前端开发 JavaScript
jQuery AJAX 方法
jQuery AJAX 方法
18 1
|
3月前
|
前端开发 JavaScript Java
SpringBoot+JQuery+Ajax实现表单数据传输和单文件或多文件的上传
关于如何在SpringBoot项目中结合JQuery和Ajax实现表单数据的传输以及单文件或多文件上传的教程。文章提供了完整的前后端示例代码,包括项目的`pom.xml`依赖配置、SpringBoot的启动类`App.java`、静态资源配置`ResourceConfig.java`、配置文件`application.yml`、前端HTML页面(单文件上传和多文件上传加表单内容)以及后端控制器`UserController.java`。文章最后展示了运行结果的截图。
117 0
SpringBoot+JQuery+Ajax实现表单数据传输和单文件或多文件的上传
|
3月前
|
XML JSON 前端开发
AJAX是什么?原生语法格式?jQuery提供分装好的AJAX有什么区别?
AJAX是什么?原生语法格式?jQuery提供分装好的AJAX有什么区别?
31 0
|
3月前
|
JavaScript 前端开发
Ajax的使用(jquery的下载)
这篇文章是关于Ajax学习笔记的分享,包括JQuery的下载方式、Ajax的主要参数说明,以及如何在网页中使用Ajax进行异步请求的示例代码。
|
4月前
|
前端开发 JavaScript API
惊天揭秘!AJAX与Fetch API如何让你的前后端交互秒变‘神级操作’!
【7月更文挑战第15天】在Web开发中,AJAX和Fetch API革新了前后端交互,告别了表单提交带来的页面刷新。AJAX利用XMLHttpRequest实现部分页面更新,开启无刷新时代;Fetch API作为现代替代,以其简洁和Promise支持简化异步操作。从AJAX的先驱地位到Fetch API的进化,两者提升了Web应用的性能和用户体验,成为现代开发的必备技能。
46 2
|
5月前
|
JavaScript 前端开发 安全
安全开发-JS应用&原生开发&JQuery库&Ajax技术&加密编码库&断点调试&逆向分析&元素属性操作
安全开发-JS应用&原生开发&JQuery库&Ajax技术&加密编码库&断点调试&逆向分析&元素属性操作