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的用鼠标画出可移动的div
Sep 06 Javascript
js操作CheckBoxList实现全选/反选(在客服端完成)
Feb 02 Javascript
js超时调用setTimeout和间歇调用setInterval实例分析
Jan 28 Javascript
javascript中的Function.prototye.bind
Jun 25 Javascript
jQuery如何使用自动触发事件trigger
Nov 29 Javascript
jQuery的deferred对象使用详解
Sep 25 Javascript
vue.js初学入门教程(2)
Nov 07 Javascript
javascript深拷贝和浅拷贝详解
Feb 14 Javascript
微信小程序如何获知用户运行小程序的场景教程
May 17 Javascript
vue.js学习之UI组件开发教程
Jul 03 Javascript
浅谈JavaScript 代码整洁之道
Oct 23 Javascript
JS算法题之查找数字在数组中的索引位置
May 15 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
php设计模式 FlyWeight (享元模式)
2011/06/26 PHP
php基于str_pad实现卡号不足位数自动补0的方法
2014/11/12 PHP
PHP防止刷新重复提交页面的示例代码
2015/11/11 PHP
一些mootools的学习资源
2010/02/07 Javascript
轻量级 JS ToolTip提示效果
2010/07/20 Javascript
in.js 一个轻量级的JavaScript颗粒化模块加载和依赖关系管理解决方案
2011/07/26 Javascript
javascript实现图像循环明暗变化的方法
2015/02/25 Javascript
基于Css3和JQuery实现打字机效果
2015/08/11 Javascript
jQuery实现点击查看大图并以弹框的形式居中
2016/08/08 Javascript
解决node.js安装包失败的几种方法
2016/09/02 Javascript
node.js学习之交互式解释器REPL详解
2016/12/08 Javascript
EditPlus中的正则表达式 实战(4)
2016/12/15 Javascript
Javascript基础回顾之(三) js面向对象
2017/01/31 Javascript
javascript表单正则应用
2017/02/04 Javascript
JS使用面向对象技术实现的tab选项卡效果示例
2017/02/28 Javascript
Angular4实现动态添加删除表单输入框功能
2017/08/11 Javascript
在vue2.0中引用element-ui组件库的方法
2018/06/21 Javascript
node express使用HTML模板的方法示例
2019/08/22 Javascript
vue canvas绘制矩形并解决由clearRec带来的闪屏问题
2019/09/02 Javascript
javascript 函数的暂停和恢复实例详解
2020/04/25 Javascript
js实现省级联动(数据结构优化)
2020/07/17 Javascript
python使用tensorflow保存、加载和使用模型的方法
2018/01/31 Python
Python实现分段线性插值
2018/12/17 Python
python实现自动化上线脚本的示例
2019/07/01 Python
django 实现celery动态设置周期任务执行时间
2019/11/19 Python
python3中数组逆序输出方法
2020/12/01 Python
html5 标签
2009/07/16 HTML / CSS
教你打造完美的创业计划书
2014/01/06 职场文书
小学生感恩演讲稿
2014/04/25 职场文书
学习实践科学发展观心得体会
2014/09/10 职场文书
2015年高一班主任工作总结
2015/05/13 职场文书
葬礼主持词
2015/07/02 职场文书
学校运动会感想
2015/08/10 职场文书
Python中tkinter的用户登录管理的实现
2021/04/22 Python
Tensorflow与RNN、双向LSTM等的踩坑记录及解决
2021/05/31 Python
vue如何实现关闭对话框后刷新列表
2022/04/08 Vue.js