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 相关文章推荐
理解JavaScript中的事件
Sep 23 Javascript
[原创]js与自动伸缩图片 自动缩小图片的多浏览器兼容的方法总结
Mar 12 Javascript
js内置对象 学习笔记
Aug 01 Javascript
ie下$.getJSON出现问题的解决方法
Feb 12 Javascript
createTextRange()的使用示例含文本框选中部分文字内容
Feb 24 Javascript
jquery动态添加元素事件失效问题解决方法
May 23 Javascript
jQuery对html元素的取值与赋值实例详解
Dec 18 Javascript
javascript 实现文本使用省略号替代(超出固定高度的情况)
Feb 21 Javascript
微信小程序实现多选功能
Nov 04 Javascript
在微信小程序中使用图表的方法示例
Apr 25 Javascript
24行JavaScript代码实现Redux的方法实例
Nov 17 Javascript
Angular短信模板校验代码
Sep 23 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
详解:――如何将图片储存在数据库里
2006/12/05 PHP
php+curl 发送图片处理代码分享
2015/07/09 PHP
PHP实现广度优先搜索算法(BFS,Broad First Search)详解
2017/09/16 PHP
laravel解决迁移文件一次删除创建字段报错的问题
2019/10/24 PHP
javascript Discuz代码中的msn聊天小功能
2008/05/25 Javascript
jQuery基于扩展实现的倒计时效果
2016/05/14 Javascript
Bootstrap零基础学习第一课之模板
2016/07/18 Javascript
AngularJS开发教程之控制器之间的通信方法分析
2016/12/25 Javascript
jQuery实现字体颜色渐变效果的方法
2017/03/29 jQuery
在iframe中使bootstrap的模态框在父页面弹出问题
2017/08/07 Javascript
vue获取当前激活路由的方法
2018/03/17 Javascript
浅谈vue-cli 3.0.x 初体验
2018/04/11 Javascript
vue 循环加载数据并获取第一条记录的方法
2018/09/26 Javascript
jQuery使用bind动态绑定事件无效的处理方法
2018/12/11 jQuery
jQuery 筛选器简单操作示例
2019/10/02 jQuery
python学习手册中的python多态示例代码
2014/01/21 Python
python基础教程之数字处理(math)模块详解
2014/03/25 Python
Python实现的数据结构与算法之链表详解
2015/04/22 Python
Python爬虫代理IP池实现方法
2017/01/05 Python
在Pycharm中将pyinstaller加入External Tools的方法
2019/01/16 Python
Python类的继承、多态及获取对象信息操作详解
2019/02/28 Python
详解Python time库的使用
2019/10/10 Python
使用python 将图片复制到系统剪贴中
2019/12/13 Python
pytorch torchvision.ImageFolder的用法介绍
2020/02/20 Python
Python函数必须先定义,后调用说明(函数调用函数例外)
2020/06/02 Python
谈谈python垃圾回收机制
2020/09/27 Python
使用layui实现左侧菜单栏及动态操作tab项的方法
2020/11/10 HTML / CSS
欧洲最大的球衣网上商店:Kitbag
2017/11/11 全球购物
世界排名第一的运动鞋市场:Flight Club
2020/01/03 全球购物
四年大学生活的个人自我评价
2013/12/11 职场文书
竞选班长演讲稿
2013/12/30 职场文书
咖啡店的创业计划书,让你hold不住
2014/01/03 职场文书
2014年话务员工作总结
2014/11/19 职场文书
2014业务员年终工作总结
2014/12/09 职场文书
2015年质量月活动总结报告
2015/03/27 职场文书
详解Mysql 函数调用优化
2021/04/07 MySQL