Jquery Ajax方法传值到action的方法


Posted in Javascript onMay 11, 2014

假设cshtml文件中是这样的:

<script type="text/javascript">
        $(document).ready(function(){
            $("#btn").click(function(){
             $.ajax({
                type: 'POST',
                url: "/Home/MyAjax",
                data: {
                    val1: $("#txt1").val(),
                    val2: $("#txt2").val(),
                    val3: $("#txt3").val(),
                    val4: $("#txt4").val(),
                },
                dataType: "json"
            });
            });
        });  
</script>
<input id="btn" type="button" value="click" />
<input id="txt1" type="text" value="" />
<input id="txt2" type="text" value="" />
<input id="txt3" type="text" value="" />
<input id="txt4" type="text" value="" />

data是json数据。传递到的Action是/Home/MyAjax。那么在Action方法处接收的方式如下:

public ActionResult MyAjax(string val1)        {
            string val2 = Request["val2"].ToString();
            string val3 = Request.Form["val3"].ToString();
            string val4 = Request.Params["val4"].ToString();
            return Content("ViewUserControl1");
        }

 或者接收参数为FormCollection,也有同样的效果。

 public ActionResult MyAjax(FormCollection f)        {
            string val2 = f["val2"].ToString();
            string val3 = f["val3"].ToString();
            string val4 = f["val4"].ToString();
            return Content("ViewUserControl1");
        }

 MVC3的强悍之处,是它是基于变量参数命名匹配的机制,就是说它尽可能的查找能够有相同变量名字的值。对于上面的例子,我们甚至可以构造出一个class,如下:public class aclass {

    public string val1 { set; get; }
    public string val2 { set; get; }
    public string val3 { set; get; }
    public string val4 { set; get; }
}

那么就可以设置参数类型为aclass

    public ActionResult MyAjax(aclass f)        {
          return Content(f.val1+f.val2+f.val3+f.val4);
        }

注意,aclass类的属性名就是json的key的名字,只要符合一致,它就能匹配,不得不说强悍。

Javascript 相关文章推荐
计算新浪Weibo消息长度(还可以输入119字)
Jul 02 Javascript
jQuery聚合函数实例
May 21 Javascript
javascript实现日期时间动态显示示例代码
Sep 08 Javascript
jQuery ajax的功能实现方法详解
Jan 06 Javascript
Angular.JS利用ng-disabled属性和ng-model实现禁用button效果
Apr 05 Javascript
通过学习bootstrop导航条学会修改bootstrop颜色基调
Jun 11 Javascript
js+canvas实现验证码功能
Sep 21 Javascript
JS高级技巧(简洁版)
Jul 29 Javascript
在vue.js中使用JSZip实现在前端解压文件的方法
Sep 05 Javascript
实例分析vue循环列表动态数据的处理方法
Sep 28 Javascript
Vue.js的复用组件开发流程完整记录
Nov 29 Javascript
vue 列表页跳转详情页获取id以及详情页通过id获取数据
Mar 27 Javascript
json的定义、标准格式及json字符串检验
May 11 #Javascript
Jquery操作js数组及对象示例代码
May 11 #Javascript
Jquery+asp.net后台数据传到前台js进行解析的方法
May 11 #Javascript
如何防止回车(enter)键提交表单
May 11 #Javascript
js取整数、取余数的方法
May 11 #Javascript
浏览器窗口大小变化时使用resize事件对框架不起作用的解决方法
May 11 #Javascript
基于jquery实现的图片在各种分辨率下未知的容器内上下左右居中
May 11 #Javascript
You might like
DC动漫人物排行
2020/03/03 欧美动漫
解析posix与perl标准的正则表达式区别
2013/06/17 PHP
解析PHP提交后跳转
2013/06/23 PHP
php 强制下载文件实现代码
2013/10/28 PHP
IIS下PHP的三种配置方式对比
2014/11/20 PHP
解读PHP中的垃圾回收机制
2015/08/10 PHP
PHP实现linux命令tail -f
2016/02/22 PHP
js确认删除对话框效果的示例代码
2014/02/20 Javascript
JQuery设置时间段下拉选择实例
2014/12/30 Javascript
一不小心就做错的JS闭包面试题
2015/11/25 Javascript
深入理解jQuery之事件移除
2016/06/02 Javascript
javascript实现页面滚屏效果
2017/01/17 Javascript
详谈angularjs中路由页面强制更新的问题
2017/04/24 Javascript
ajax +NodeJS 实现图片上传实例
2017/06/06 NodeJs
select自定义小三角样式代码(实用总结)
2017/08/18 Javascript
js基于canvas实现时钟组件
2021/02/07 Javascript
vue3.0封装轮播图组件的步骤
2021/03/04 Vue.js
python生成随机mac地址的方法
2015/03/16 Python
python动态网页批量爬取
2016/02/14 Python
Python3实现的回文数判断及罗马数字转整数算法示例
2019/03/27 Python
python获取当前文件路径以及父文件路径的方法
2019/07/10 Python
anaconda中更改python版本的方法步骤
2019/07/14 Python
PyCharm第一次安装及使用教程
2020/01/08 Python
python 轮询执行某函数的2种方式
2020/05/03 Python
Python爬虫小例子——爬取51job发布的工作职位
2020/07/10 Python
如何使用Python自动生成报表并以邮件发送
2020/10/15 Python
关于前端上传文件全面基础扫盲贴(入门)
2019/08/01 HTML / CSS
Joe Fresh官网:加拿大时尚品牌和零售连锁店
2016/11/30 全球购物
TripAdvisor台湾:全球最大旅游网站
2018/08/26 全球购物
Linden Leaves官网:新西兰纯净护肤品
2020/12/20 全球购物
2014年计算机专业个人自我评价
2014/01/19 职场文书
有兼职工作经历的简历自我评价
2014/03/07 职场文书
房屋租赁合同解除协议书
2014/10/11 职场文书
2015年教师教学工作总结
2015/04/28 职场文书
《成长的天空》读后感3篇
2019/12/06 职场文书
Java中PriorityQueue实现最小堆和最大堆的用法
2021/06/27 Java/Android