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 SHA-1:Secure Hash Algorithm
Dec 20 Javascript
JavaScript 继承详解(一)
Jul 13 Javascript
JS阻止冒泡事件以及默认事件发生的简单方法
Jan 17 Javascript
js获取内联样式的方法
Jan 27 Javascript
很实用的js选项卡切换效果
Aug 12 Javascript
Javascript Event(事件)的传播与冒泡
Jan 23 Javascript
vue+vux实现移动端文件上传样式
Jul 28 Javascript
webpack 模块热替换原理
Apr 09 Javascript
JS中的算法与数据结构之二叉查找树(Binary Sort Tree)实例详解
Aug 16 Javascript
详解用async/await来处理异步
Aug 28 Javascript
微信小程序完美解决scroll-view高度自适应问题的方法
Aug 08 Javascript
给原生html中添加水印遮罩层的实现示例
Apr 02 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/10/09 PHP
dedecms中常见问题修改方法总结
2007/03/21 PHP
将二维数组转为一维数组的2种方法
2014/05/26 PHP
php读取csv数据保存到数组的方法
2015/01/03 PHP
Zend Framework处理Json数据方法详解
2016/12/09 PHP
PHP dirname(__FILE__)原理及用法解析
2020/10/28 PHP
javaScript 读取和设置文档元素的样式属性
2009/04/14 Javascript
javascript中运用闭包和自执行函数解决大量的全局变量问题
2010/12/30 Javascript
jQuery + Flex 通过拖拽方式动态改变图片的代码
2011/08/03 Javascript
jQuery 瀑布流 绝对定位布局(二)(延迟AJAX加载图片)
2012/05/23 Javascript
js判读浏览器是否支持html5的canvas的代码
2013/11/18 Javascript
JS去除字符串两端空格的简单实例
2013/12/27 Javascript
js动画效果制件让图片组成动画代码分享
2014/01/14 Javascript
jQuery异步上传文件插件ajaxFileUpload详细介绍
2015/05/19 Javascript
基于JavaScript实现随机颜色输入框
2016/12/10 Javascript
JavaScript获取键盘按键的键码(参照表)
2017/01/10 Javascript
vue-router 导航钩子的具体使用方法
2017/08/31 Javascript
详解webpack-dev-server的简单使用
2018/04/02 Javascript
VUE前端从后台请求过来的数据进行转换数据结构操作
2020/11/11 Javascript
Python兔子毒药问题实例分析
2015/03/05 Python
python将字符串转换成数组的方法
2015/04/29 Python
在Python中处理字符串之isdigit()方法的使用
2015/05/18 Python
发布你的Python模块详解
2016/09/15 Python
python爬虫实现POST request payload形式的请求
2020/04/30 Python
如何基于python实现不邻接植花
2020/05/01 Python
Python Opencv轮廓常用操作代码实例解析
2020/09/01 Python
德国最大的网上鞋店之一:Schuhe24.de
2017/06/10 全球购物
Gap英国官网:Gap UK
2018/07/18 全球购物
毕业生求职信的经典写法
2014/01/31 职场文书
社团招新策划书
2014/02/04 职场文书
校运会口号
2014/06/18 职场文书
2014班子成员自我剖析材料思想汇报
2014/10/01 职场文书
2014司机年终工作总结
2014/12/05 职场文书
大国崛起日本观后感
2015/06/02 职场文书
python如何进行基准测试
2021/04/26 Python
MySQL系列之开篇 MySQL关系型数据库基础概念
2021/07/02 MySQL