在上一篇介绍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!");elsereturn View();
}   
Celery 标签: MVC

转载于:https://www.cnblogs.com/celery94/archive/2011/01/17/1937494.html

MVC 使用Jquery实现AJax相关推荐

  1. Spring MVC和JQuery用于Ajax表单验证

    在本教程中,我们将看到如何使用Ajax和Spring MVC和JQuery在服务器端验证表单. Spring MVC为通过注释驱动的配置采用Ajax提供了非常方便的过程. 我们将使用此注释驱动的配置以 ...

  2. .net mvc ajax 用html()怎么出来正个页面呀,如何使用jquery或ajax为MVC项目更新c#/ asp.net中的razor部分视图...

    在MVC部分视图文件中,我构建了一个Html.TextBox和两个提交按钮.单击这两个按钮将增加/减少Html.TextBox值.Html.TextBox显示的值将相应地更改.但是,一旦我需要单击后根 ...

  3. JQuery和Ajax在ASP.NET MVC中的基本应用

    当我们在开发Web应用程序中使用JQuery和Ajax异步调用来实现很多功能时,不仅提高了程序的性能,而且给用户一个更好的交互式界面操作体验.接下来我们依旧用简单的实例来学习下它们的应用. 创建一个A ...

  4. .net mvc ajax重定向,如何在MVC3 JQuery的Ajax调用重定向到新的页面(连同模型)(How to redirec...

    我已经忘记密码页面,当用户输入用户名并点击"验证"按钮来检查他是在哪个组的基础上,我们需要显示不同的局部视图(现在让我们说,这是电话号码)的组这一页. 填写有效信息后, 成功我会重 ...

  5. ajax post提交数组6,jQuery的ajax()、post()方法提交数组,参数[] 问题

    当用$.ajax()向后台提交参数时,如果参数中数组的话一般在后台会用List,或Integer[] 等数组对象进行接收. 比如: $.ajax({ type: "POST", u ...

  6. c .net ajax,Asp.net mvc 2中使用Ajax的三种方式

    在Asp.net MVC中,我们能非常方便的使用Ajax.这篇文章将介绍三种Ajax使用的方式,分别为原始的Ajax调用.Jquery.Ajax Helper.分别采用这三种方式结合asp.net m ...

  7. ajax离开页面方法,jQuery中ajax调用当前页面方法

    $.ajax({ type: 'POST', url: 'AddressManager.aspx/GetProvince',//AddressManager.aspx当前页面 data: '{cach ...

  8. ajax type是get请求,jQuery的Ajax请求数据时type无法使用GET

    写一个ASP.NET MVC例子,它是使用jQuery的$.Ajax来呼叫控制器的数据. 创建一个视图: 运行结果: 一切正常,但是本例子我们只是获取数据,并没有做任何数据POST上传至控制器,我们尝 ...

  9. JQuery 中 AJAX 如何实现 Excel 文件 下载

    我们知道,JQuery的ajax函数的返回类型只有xml.text.json.html等类型,没有"流"类型,所以我们要实现ajax下载,不能够使用相应的ajax函数进行文件下载. ...

最新文章

  1. 为什么大公司还在采用过时的技术?
  2. C++中的二阶构造模式
  3. Vue.js-localhost:8080-无法显示此网页-【已经初始化的项目,如何再次在服务器上运行?】
  4. 背景图片随着浏览器拖动而变化
  5. python pp模块_Python模块--Pexpect
  6. laravel关于路径的函数
  7. CSS表单元素样式设置
  8. python列表初始化长度_在Python中预先初始化列表内容和长度的实现
  9. java 表单字段扩展_如何从Chrome扩展程序填写网页表单中的文本字段?
  10. unitywebplayer 32/64 5.3版本
  11. pxc部署和配置详解
  12. EXCEL表格中数字金额很大时后面零很多,如何设置直接以万元为单位显示,不显示后面的零
  13. CNCC2020丨5G边缘智能与智慧城市论坛
  14. Deferred Decal
  15. 基于mochiweb的chatty聊天室1
  16. 服务器流量异常的原因分析和解决办法
  17. 无线网主域名服务器,主域名服务器和网关的关系
  18. DevC++ 下载和安装
  19. oracle 判断重复次数,sql 查询 某字段 重复次数 最多的记录
  20. 计算机网络基础——WWW万维网

热门文章

  1. mysql 表与表之间的条件比对_《MySQL数据库》关联查询
  2. android 获取芯片版本_谷歌:未来Android手机将获得4年软件更新
  3. (41)FPGA四种常用逻辑门(异或门)
  4. python3写网络爬虫_python3写网络爬虫
  5. STM32 BOOT 引脚配置
  6. QT5日志功能(qDebug、qWarnng、qCritical、qFatal)
  7. linux下ip层的一些概念
  8. 中断触发流程三(中断控制器)
  9. 结构体:struct关键字
  10. linux mutex 数量上限,互斥量mutex