MVC 使用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!");elsereturn View(); }
转载于:https://www.cnblogs.com/celery94/archive/2011/01/17/1937494.html
MVC 使用Jquery实现AJax相关推荐
- Spring MVC和JQuery用于Ajax表单验证
在本教程中,我们将看到如何使用Ajax和Spring MVC和JQuery在服务器端验证表单. Spring MVC为通过注释驱动的配置采用Ajax提供了非常方便的过程. 我们将使用此注释驱动的配置以 ...
- .net mvc ajax 用html()怎么出来正个页面呀,如何使用jquery或ajax为MVC项目更新c#/ asp.net中的razor部分视图...
在MVC部分视图文件中,我构建了一个Html.TextBox和两个提交按钮.单击这两个按钮将增加/减少Html.TextBox值.Html.TextBox显示的值将相应地更改.但是,一旦我需要单击后根 ...
- JQuery和Ajax在ASP.NET MVC中的基本应用
当我们在开发Web应用程序中使用JQuery和Ajax异步调用来实现很多功能时,不仅提高了程序的性能,而且给用户一个更好的交互式界面操作体验.接下来我们依旧用简单的实例来学习下它们的应用. 创建一个A ...
- .net mvc ajax重定向,如何在MVC3 JQuery的Ajax调用重定向到新的页面(连同模型)(How to redirec...
我已经忘记密码页面,当用户输入用户名并点击"验证"按钮来检查他是在哪个组的基础上,我们需要显示不同的局部视图(现在让我们说,这是电话号码)的组这一页. 填写有效信息后, 成功我会重 ...
- ajax post提交数组6,jQuery的ajax()、post()方法提交数组,参数[] 问题
当用$.ajax()向后台提交参数时,如果参数中数组的话一般在后台会用List,或Integer[] 等数组对象进行接收. 比如: $.ajax({ type: "POST", u ...
- c .net ajax,Asp.net mvc 2中使用Ajax的三种方式
在Asp.net MVC中,我们能非常方便的使用Ajax.这篇文章将介绍三种Ajax使用的方式,分别为原始的Ajax调用.Jquery.Ajax Helper.分别采用这三种方式结合asp.net m ...
- ajax离开页面方法,jQuery中ajax调用当前页面方法
$.ajax({ type: 'POST', url: 'AddressManager.aspx/GetProvince',//AddressManager.aspx当前页面 data: '{cach ...
- ajax type是get请求,jQuery的Ajax请求数据时type无法使用GET
写一个ASP.NET MVC例子,它是使用jQuery的$.Ajax来呼叫控制器的数据. 创建一个视图: 运行结果: 一切正常,但是本例子我们只是获取数据,并没有做任何数据POST上传至控制器,我们尝 ...
- JQuery 中 AJAX 如何实现 Excel 文件 下载
我们知道,JQuery的ajax函数的返回类型只有xml.text.json.html等类型,没有"流"类型,所以我们要实现ajax下载,不能够使用相应的ajax函数进行文件下载. ...
最新文章
- 为什么大公司还在采用过时的技术?
- C++中的二阶构造模式
- Vue.js-localhost:8080-无法显示此网页-【已经初始化的项目,如何再次在服务器上运行?】
- 背景图片随着浏览器拖动而变化
- python pp模块_Python模块--Pexpect
- laravel关于路径的函数
- CSS表单元素样式设置
- python列表初始化长度_在Python中预先初始化列表内容和长度的实现
- java 表单字段扩展_如何从Chrome扩展程序填写网页表单中的文本字段?
- unitywebplayer 32/64 5.3版本
- pxc部署和配置详解
- EXCEL表格中数字金额很大时后面零很多,如何设置直接以万元为单位显示,不显示后面的零
- CNCC2020丨5G边缘智能与智慧城市论坛
- Deferred Decal
- 基于mochiweb的chatty聊天室1
- 服务器流量异常的原因分析和解决办法
- 无线网主域名服务器,主域名服务器和网关的关系
- DevC++ 下载和安装
- oracle 判断重复次数,sql 查询 某字段 重复次数 最多的记录
- 计算机网络基础——WWW万维网