JQuery通过Ajax提交表单并返回结果


Posted in Javascript onJuly 31, 2011

如下:

1:非Ajax

前台:

JQuery通过Ajax提交表单并返回结果

对应后台:

JQuery通过Ajax提交表单并返回结果

2:JQuery之Ajax

在介绍使用JQuery提交表单前,我们需要首先引用jquery.form.js,它来自于http://www.malsup.com/jquery/form/,至此,我们需要引用的JS文件有:

JQuery通过Ajax提交表单并返回结果

功能要求:Ajax提交表单,在控制器HelloWorld4Controller中处理请求,并返回若干数据,数据格式为JSON。

首先,我们假设返回的JSON实体为:

public class LoginResultDTO 
{ 
public bool Success { get; set; } 
public string Message { get; set; } 
public string ReturnUrl { get; set; } 
}

控制器部分的代码为:
public class HelloWorld4Controller : Controller 
{ 
public ActionResult Index() 
{ 
if (Request.IsAjaxRequest()) 
{ 
string str1 = Request.Form["Text33"]; 
string str2 = Request.Form["Text44"]; 
return Json(new MvcApplication5.Controllers.HelloWorld3Controller.LoginResultDTO { Success = true, Message = str1 + str2, ReturnUrl = "SomeUrl" }); 
} 
else 
{ 
return View(); 
} 
} 
}

上面的代码告诉我们,如果我们想要返回别的实体,也是很方便的的。

前台部分代码:

Javascript 相关文章推荐
jQuery 中使用JSON的实现代码
Dec 01 Javascript
两个listbox实现选项的添加删除和搜索
Mar 01 Javascript
js常用数组操作方法简明总结
Jun 20 Javascript
node.js中的fs.fstatSync方法使用说明
Dec 15 Javascript
JavaScript中的对象的extensible属性介绍
Dec 30 Javascript
jquery文档操作wrap()方法实例简述
Jan 10 Javascript
JavaScript取得键盘按下方向键是哪个的方法
Aug 04 Javascript
浅谈jquery中next与siblings的区别
Oct 27 Javascript
微信小程序左滑删除效果的实现代码
Feb 20 Javascript
使用express获取微信小程序二维码小记
May 21 Javascript
Vue解析剪切板图片并实现发送功能
Feb 04 Javascript
webpack介绍使用配置教程详解webpack介绍和使用
Jun 25 Javascript
Dreamweaver jQuery智能提示插件,支持版本提示,支持1.6api
Jul 31 #Javascript
动态加载外部javascript文件的函数代码分享
Jul 28 #Javascript
工作需要写的一个js拖拽组件
Jul 28 #Javascript
基于Jquery的开发个代阴影的对话框效果代码
Jul 28 #Javascript
jQuery.get、jQuery.getJSON、jQuery.post无法返回JSON问题的解决方法
Jul 28 #Javascript
js中使用DOM复制(克隆)指定节点名数据到新的XML文件中的代码
Jul 27 #Javascript
另一个javascript小测验(代码集合)
Jul 27 #Javascript
You might like
日本十大科幻动漫 宇宙骑士垫底,第一已成经典
2020/03/04 日漫
PHP实现采集程序原理和简单示例代码
2007/03/18 PHP
获取远程文件大小的php函数
2010/01/11 PHP
解析phpstorm + xdebug 远程断点调试
2013/06/20 PHP
php读取图片内容并输出到浏览器的实现代码
2013/08/08 PHP
实用javaScript技术-屏蔽类
2006/08/15 Javascript
jquery中使用$(#form).submit()重写提交表单无效原因分析及解决
2013/03/25 Javascript
jquery中的常用事件bind、hover、toggle等示例介绍
2014/07/21 Javascript
JS+CSS3实现超炫的散列画廊特效
2016/07/16 Javascript
JavaScript中最常见的三个面试题解析
2017/03/04 Javascript
Javascript实现信息滚动效果
2017/05/18 Javascript
vue.js实现数据动态响应 Vue.set的简单应用
2017/06/15 Javascript
详解vue2.0+vue-video-player实现hls播放全过程
2018/03/02 Javascript
vue实现点击追加选中样式效果
2019/11/01 Javascript
解决vue.js提交数组时出现数组下标的问题
2019/11/05 Javascript
微信小程序利用button控制条件标签的变量问题
2020/03/15 Javascript
jQuery实现中奖播报功能(让文本滚动起来) 简单设置数值即可
2020/03/20 jQuery
Nuxt的路由动画效果案例
2020/11/06 Javascript
[07:20]2018DOTA2国际邀请赛寻真——逐梦Mineski
2018/08/10 DOTA
Python中使用第三方库xlutils来追加写入Excel文件示例
2015/04/05 Python
5种Python单例模式的实现方式
2016/01/14 Python
基于Python实现对PDF文件的OCR识别
2016/08/05 Python
Python程序退出方式小结
2017/12/09 Python
如何在python中写hive脚本
2019/11/08 Python
通过 Python 和 OpenCV 实现目标数量监控
2020/01/05 Python
python实现五子棋程序
2020/04/24 Python
Django+Django-Celery+Celery的整合实战
2021/01/20 Python
Python datetime模块的使用示例
2021/02/02 Python
详解HTML5新增标签
2017/11/27 HTML / CSS
任意存:BOXFUL
2018/05/21 全球购物
巴西最大的在线约会网站:ParPerfeito
2018/07/11 全球购物
德国便宜的宠物店:Brekz.de
2020/10/23 全球购物
Ajax请求总共有多少种Callback
2016/07/17 面试题
个人应聘自我评价分享
2013/11/18 职场文书
2015年六一儿童节活动方案
2015/05/05 职场文书
JavaScript实现外溢动态爱心的效果的示例代码
2022/03/21 Javascript