`
lvwenwen
  • 浏览: 953733 次
  • 性别: Icon_minigender_1
  • 来自: 魔都
社区版块
存档分类
最新评论

Jquery也是实现Ajax

阅读更多
在上一篇介绍MVC中的Ajax实现方法的时候,曾经提到了除了使用Ajax HTML Helper方式来实现之外,Jquery也是实现Ajax的另外一种方案。
通过get方法实现AJax请求
View
<script type="text/javascript">
    function GetTime() {
        $.get("Home/GetTime", function (response) {
            $("#myPnl").html(response);
        });

        return false;
    }
</script>
<div id="myPnl" style="width: 300px; height: 30px; border: 1px dotted silver;">
</div>
<a href="#" onclick="return GetTime();">Click Me</a>
Controller
public ActionResult GetTime()
{
    return Content(DateTime.Now.ToString());
}
通过post方法实现Form的Ajax提交
View
@model MvcAjax.Models.UserModel
@{
    ViewBag.Title = "AjaxForm";
}
<script type="text/javascript">
    $(document).ready(function () {
        $("form[action$='SaveUser']").submit(function () {
            $.post($(this).attr("action"), $(this).serialize(), function (response) {
                $("#myPnl").html(response);
            });

            return false;
        });
    });
   
</script>
<div id="myPnl" style="width: 300px; height: 30px; border: 1px dotted silver;">
</div>
@using (Html.BeginForm("SaveUser", "Home"))
{
    <table>
        <tr>
            <td>
                @Html.LabelFor(m => m.UserName)
            </td>
            <td>
                @Html.TextBoxFor(m => m.UserName)
            </td>
        </tr>
        <tr>
            <td>
                @Html.LabelFor(m => m.Email)
            </td>
            <td>
                @Html.TextBoxFor(m => m.Email)
            </td>
        </tr>
        <tr>
            <td>
                @Html.LabelFor(m => m.Desc)
            </td>
            <td>
                @Html.TextBoxFor(m => m.Desc)
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <input type="submit" value="Submit" />
            </td>
        </tr>
    </table>
}
Model
using System.ComponentModel.DataAnnotations;

namespace MvcAjax.Models
{
    public class UserModel
    {
        [Display(Name = "Username")]
        public string UserName { get; set; }

        [Display(Name = "Email")]
        public string Email { get; set; }

        [Display(Name = "Description")]
        public string Desc { get; set; }
    }
}
Controller
[HttpPost]
public ActionResult SaveUser(UserModel userModel)
{
    //Save User Code Here
    //......

    return Content("Save Complete!");
}  
以上代码实现了Jquery POST提交数据的方法。
通过查看以上两种Jquery方式的Ajax实现方法,和之前AJax HTML Helper比较可以发现其实Controller都是相同的。
采用Jquery方式提交数据的的主要实现方案就是通过Jquery的get或者post方法,发送请求到MVC的controller中,然后处理获取的response,更新到页面中。
注意点:
无论是使用超链接和form方式来提交请求,javascript的方法始终都有一个返回值false,用来防止超链接的跳转或者是form的实际提交。
这个地方就会出现一个疑问:
如果针对该页面禁止了Javascript脚本,那么该页面就是跳转或者是form就是提交,返回的ActionResult处理就会出现问题了。
这个时候就需要在Controller中判断该请求是否是Ajax请求,根据不同的情况返回不同的ActionResult:
[HttpPost]
public ActionResult SaveUser(UserModel userModel)
{
    //Save User Code Here
    //......

    if (Request.IsAjaxRequest())
        return Content("Save Complete!");
    else
        return View();
}  
分享到:
评论

相关推荐

    jquery.unobtrusive-ajax.rar

    这个库利用数据属性(data-* attributes)和jQuery事件来实现Ajax功能,使得页面的异步更新更加优雅和易于维护。 在传统的Web开发中,Ajax通常需要在JavaScript代码中添加大量细节,而jQuery Unobtrusive Ajax通过...

    Jquery AutoComplete组件+Ajax实现搜索框输入提示功能小记

    ### Jquery AutoComplete组件+Ajax实现搜索框输入提示功能详解 #### 前言 在当前Web应用开发中,提供良好的用户体验是至关重要的。本文主要介绍如何使用Jquery AutoComplete组件与Ajax技术来实现搜索框的实时输入...

    jQueryPager(JQuery分页插件pagination实现Ajax分页)

    **jQueryPager:基于JQuery的Ajax分页插件Pagination实现** 在Web开发中,当数据量庞大时,分页是一种常见的优化用户体验的方式。jQueryPager是一款轻量级的jQuery分页插件,它允许开发者通过Ajax无刷新的方式实现...

    jQuery+ajax实现三级级联

    在这个“jQuery+ajax实现三级级联”的实例中,我们主要探讨如何利用这两种技术来创建一个能够逐级联动的下拉菜单系统,这在数据筛选和表单填写中十分常见,如地区选择、部门分类等场景。 首先,jQuery是一个轻量级...

    利用Ajax+Jquery实现异步进度条效果

    "利用Ajax+Jquery实现异步进度条效果"这个主题正是围绕这一目标展开,它涉及到C#后端开发、.NET框架、Ajax技术以及Jquery库的前端应用。下面将详细阐述这些知识点。 首先,C#是一种面向对象的编程语言,广泛应用于...

    JQuery+AJAX实现用户名验证

    在IT行业中,前端开发...总的来说,结合jQuery和AJAX可以轻松实现动态的用户名验证功能,为用户提供即时的反馈,同时也提高了网站的交互性和响应速度。这种技术在现代Web应用中广泛应用,是前端开发者的必备技能之一。

    jQuery+Json 实现Ajax无刷新分类管理实例演示

    jQuery+Json 实现Ajax无刷新分类管理实例演示 基于jquery+json实现的网站后台管理中无刷新的分类管理功能演示,如上...相当不错的Json学习资料,也是ASP.NET结合jQuery实现Ajax无刷新操作技术的典型实例,有必要借鉴。

    SSH+jQuery+json 实现的Ajax操作,绝对精华,代码简练清晰,绝对能看明白

    这个压缩包中的资源,"SSH+jQuery+json 实现的Ajax操作,绝对精华,代码简练清晰,绝对能看明白",显然提供了一个使用这些技术实现Ajax级联操作的实例。下面将详细介绍这些技术及其在Ajax操作中的应用。 **SSH ...

    jQuery+php实现ajax文件即时上传

    "jQuery+php实现ajax文件即时上传"这个主题涉及了利用jQuery库来构建前端交互,配合PHP后端处理文件上传,以及如何实时反馈上传进度。以下是关于这一主题的详细知识解释: 1. **jQuery**:jQuery是一个广泛使用的...

    jQuery+Ajax实现排序效果

    在"jQuery+Ajax实现排序效果"这个主题中,我们将深入探讨如何利用这两者来实现用户交互性极强的动态排序功能。 首先,jQuery 提供了一种简便的方式来选择DOM元素,例如 `$("#elementID")` 选取ID为`elementID`的...

    jquery+ajax实现无刷新提交的功能

    ### 使用jQuery与Ajax实现网页无刷新提交功能 在现代Web开发中,为了提供更好的用户体验,很多网站都会采用Ajax技术来实现在不刷新整个页面的情况下进行数据的提交与更新。本篇文章将详细介绍如何利用jQuery库结合...

    struts2+json+jquery实现ajax数据的存取

    通过以上步骤,"Struts2+JSON+jQuery实现Ajax数据的存取"能够有效地提高Web应用的交互性和响应速度,使得用户在不刷新整个页面的情况下,也能获取并处理服务器的新数据。在实际项目中,这通常用于实现表格数据的分页...

    基于 jQuery 实现的 Ajax 异步分页

    本篇文章将详细介绍如何利用jQuery实现Ajax异步分页,以及其背后的原理和实践应用。 首先,让我们理解什么是Ajax。AJAX(Asynchronous JavaScript and XML)是一种在无需重新加载整个网页的情况下更新部分网页内容...

    jQuery+ajax实现简单登录验证

    在本文中,我们将深入探讨如何使用jQuery和Ajax技术实现一个简单的登录验证系统。这个系统能够实时检查用户输入的用户名和密码是否有效,而无需页面刷新,从而提供更流畅的用户体验。 首先,jQuery是一个轻量级的...

    springmvc利用jquery实现ajax的例子

    以上就是使用Spring MVC和jQuery实现Ajax的基本步骤。在实际开发中,你可能还需要处理更多细节,如错误处理、数据验证、页面局部刷新等。通过这种方式,你可以构建出更加动态、响应式的Web应用。

    jQuery的Ajax实现异步传输List、Map

    本话题将深入探讨如何使用jQuery的Ajax功能实现异步传输List和Map类型的数据,同时涉及JSON数据格式的使用。 首先,让我们了解JSON(JavaScript Object Notation),它是轻量级的数据交换格式,易于人阅读和编写,...

    Java通过jQuery实现ajax异步请求

    本示例工程"Java通过jQuery实现ajax异步请求"着重展示了如何利用jQuery的AJAX功能与后端Java服务器进行数据通信,从而实现页面的无刷新更新。以下将详细解释这个过程中涉及的关键知识点。 首先,jQuery是一个强大的...

    Jquery_ajax实现搜索

    在网页开发中,jQuery AJAX 是一种非常常用的技术,它允许我们实现异步数据交互,无需刷新整个页面即可从服务器获取或发送数据。本教程将详细讲解如何使用 jQuery AJAX 实现搜索功能。 首先,理解 AJAX...

    基于Servlet+JSP+Jquery+EL+Ajax的餐饮管理系统源码.zip

    基于Servlet+JSP+Jquery+EL+Ajax的餐饮管理系统源码.zip基于Servlet+JSP+Jquery+EL+Ajax的餐饮管理系统源码.zip基于Servlet+JSP+Jquery+EL+Ajax的餐饮管理系统源码.zip基于Servlet+JSP+Jquery+EL+Ajax的餐饮管理系统...

    jquery,jquery是Ajax的一个框架

    3. **简化的 AJAX 方法**:jQuery 还提供了如 `$.get()`, `$.post()`, `$.getJSON()` 等简化方法,适用于快速实现常见 AJAX 请求。这些方法通常比 `$.ajax()` 更简洁,但灵活性稍低。 4. **$.load() 函数**:对于只...

Global site tag (gtag.js) - Google Analytics