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 相关文章推荐
用js实现的抽象CSS圆角效果!!
May 03 Javascript
基于jQuery+HttpHandler实现图片裁剪效果代码(适用于论坛, SNS)
Sep 02 Javascript
jQuery学习笔记 操作jQuery对象 属性处理
Sep 19 Javascript
页面刷新时记住滚动条的位置jquery代码
Jun 17 Javascript
jQuery简单实现隐藏以及显示特效
Feb 26 Javascript
JS实现仿微博可关闭弹出层效果
Sep 21 Javascript
jQuery EasyUI Dialog拖不下来如何解决
Sep 28 Javascript
原生js和jquery分别实现横向导航菜单效果
May 13 Javascript
对javascript继承的理解
Oct 11 Javascript
Vue组件和Route的生命周期实例详解
Feb 10 Javascript
深入学习js函数的隐式参数 arguments 和 this
Jun 24 Javascript
ES6 Iterator遍历器原理,应用场景及相关常用知识拓展详解
Feb 15 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
PHP 配置open_basedir 让各虚拟站点独立运行
2009/11/12 PHP
Linux服务器下PHPMailer发送邮件失败的问题解决
2017/03/04 PHP
JS JSON对象转为字符串的简单实现方法
2013/11/18 Javascript
DOM节点删除函数removeChild()用法实例
2015/01/12 Javascript
jquery渐隐渐显的图片幻灯闪烁切换实现方法
2015/02/26 Javascript
AngularJS中的API(接口)简单实现
2016/07/28 Javascript
防止Node.js中错误导致进程阻塞的办法
2016/08/11 Javascript
基于vue2实现左滑删除功能
2017/11/28 Javascript
element-ui中select组件绑定值改变,触发change事件方法
2018/08/24 Javascript
jquery实现垂直无限轮播的方法分析
2019/07/16 jQuery
深入浅析ng-bootstrap 组件集中 tabset 组件的实现分析
2019/07/19 Javascript
ES6基础之 Promise 对象用法实例详解
2019/08/22 Javascript
Vue中使用matomo进行访问流量统计的实现
2019/11/05 Javascript
vue+springboot图片上传和显示的示例代码
2020/02/14 Javascript
zbar解码二维码和条形码示例
2014/02/07 Python
Python中的复制操作及copy模块中的浅拷贝与深拷贝方法
2016/07/02 Python
对python 矩阵转置transpose的实例讲解
2018/04/17 Python
pandas中去除指定字符的实例
2018/05/18 Python
python生成n个元素的全组合方法
2018/11/13 Python
python实现基于信息增益的决策树归纳
2018/12/18 Python
Python + OpenCV 实现LBP特征提取的示例代码
2019/07/11 Python
django-rest-framework 自定义swagger过程详解
2019/07/18 Python
python3.6、opencv安装环境搭建过程(图文教程)
2019/11/05 Python
导入tensorflow:ImportError: libcublas.so.9.0 报错
2020/01/06 Python
浅谈pytorch中torch.max和F.softmax函数的维度解释
2020/06/28 Python
美国最佳在线航班预订网站:LookupFare
2019/03/26 全球购物
小学生开学第一课活动方案
2014/03/27 职场文书
优秀语文教师事迹
2014/05/18 职场文书
绘画专业自荐信
2014/07/04 职场文书
民族学专业职业生涯规划范文:积跬步以至千里
2014/09/11 职场文书
2014年财政工作总结
2014/12/10 职场文书
2015应届毕业生求职信范文
2015/03/20 职场文书
Python基础知识之变量的详解
2021/04/14 Python
html5调用摄像头实例代码
2021/06/28 HTML / CSS
Springboot配置suffix指定mvc视图的后缀方法
2021/07/03 Java/Android
Java中的Kafka为什么性能这么快及4大核心详析
2022/09/23 Java/Android