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 相关文章推荐
Javascript判断对象是否相等实现代码
Mar 18 Javascript
jquery实现在页面加载完毕后获取图片高度或宽度
Jun 16 Javascript
js获取元素外链样式的方法
Jan 27 Javascript
Bootstrap组件学习之导航、标签、面包屑导航(精品)
May 17 Javascript
AngularJS基础 ng-mouseleave 指令详解
Aug 02 Javascript
Javascript中的 “&” 和 “|” 详解
Feb 02 Javascript
webpack处理 css\less\sass 样式的方法
Aug 21 Javascript
默认浏览器设置及vue自动打开页面的方法
Sep 21 Javascript
浅谈vue项目4rs vue-router上线后history模式遇到的坑
Sep 27 Javascript
Vue 报错TypeError: this.$set is not a function 的解决方法
Dec 17 Javascript
js实现select下拉框选择
Jan 11 Javascript
Vue使用鼠标在Canvas上绘制矩形
Dec 24 Vue.js
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分多步骤填写发布信息的简单方法实例代码
2012/09/23 PHP
PHP反向代理类代码
2014/08/15 PHP
PHP技术开发微信公众平台
2015/07/22 PHP
PHP图片加水印实现方法
2016/05/06 PHP
PHP使用星号替代用户名手机和邮箱的实现代码
2018/02/07 PHP
TP5框架实现签到功能的方法分析
2020/04/05 PHP
jQuery对表单元素的取值和赋值操作代码
2011/05/19 Javascript
JavaScript通过RegExp实现客户端验证处理程序
2013/05/07 Javascript
jQuery固定浮动侧边栏实现思路及代码
2014/09/28 Javascript
jquery右下角自动弹出可关闭的广告层
2015/05/08 Javascript
跟我学习javascript的浮点数精度
2015/11/16 Javascript
Jquery插件之Fancybox丰富的弹出层效果附源码下载
2015/12/02 Javascript
详解BootStrap中Affix控件的使用及保持布局的美观的方法
2016/07/08 Javascript
Bootstrap实现弹性搜索框
2016/07/11 Javascript
AngularJS入门教程之双向绑定详解
2016/08/18 Javascript
浅谈Angular2 ng-content 指令在组件中嵌入内容
2017/08/18 Javascript
vue实现按需加载组件及异步组件功能
2019/05/27 Javascript
vue.js 打包时出现空白页和路径错误问题及解决方法
2019/06/26 Javascript
原生js实现自定义消息提示框
2020/11/19 Javascript
django启动uwsgi报错的解决方法
2018/04/08 Python
浅谈基于Canvas的手绘风格图形库Rough.js
2018/03/19 HTML / CSS
美体小铺加拿大官方网站:The Body Shop加拿大
2016/10/30 全球购物
美国棒球装备和用品商店:Baseball Savings
2018/06/09 全球购物
电子商务专业学生的自我鉴定
2013/11/28 职场文书
室内设计专业个人的自我评价
2013/12/18 职场文书
播音主持专业个人自我评价
2014/01/09 职场文书
公司门卫的岗位职责
2014/02/19 职场文书
《哪吒闹海》教学反思
2014/02/28 职场文书
目标责任书范文
2014/04/14 职场文书
计算机专业毕业生求职信
2014/04/30 职场文书
装配出错检讨书
2014/09/23 职场文书
遗失说明具结保证书
2015/02/26 职场文书
2016大学迎新欢迎词
2015/09/29 职场文书
Python3 如何开启自带http服务
2021/05/18 Python
使用react-virtualized实现图片动态高度长列表的问题
2021/05/28 Javascript
教你如何用cmd快速登录服务器
2022/06/10 Servers