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 相关文章推荐
使两个iframe的高度与内容自适应,且相等
Nov 20 Javascript
网页编辑器ckeditor和ckfinder配置步骤分享
May 24 Javascript
JS判断页面加载状态以及添加遮罩和缓冲动画的代码
Oct 11 Javascript
自定义jQuery选项卡插件实例
Mar 27 Javascript
jQuery循环滚动新闻列表示例代码
Jun 17 Javascript
jQuery-1.9.1源码分析系列(十一)DOM操作续之克隆节点
Dec 01 Javascript
JavaScript的设计模式经典之代理模式
Feb 24 Javascript
原生js实现可拖动的登录框效果
Jan 21 Javascript
vue v-on监听事件详解
May 17 Javascript
React Native使用百度Echarts显示图表的示例代码
Nov 07 Javascript
Javascript中的作用域及块级作用域
Dec 08 Javascript
教你30秒发布一个TypeScript包到NPM的方法步骤
Jul 22 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
smarty的保留变量问题
2008/10/23 PHP
PHP 面向对象程序设计(oop)学习笔记 (四) - 异常处理类Exception
2014/06/12 PHP
学习php设计模式 php实现工厂模式(factory)
2015/12/07 PHP
php运行报错Call to undefined function curl_init()的最新解决方法
2016/11/20 PHP
javascript cookie解码函数(兼容ff)
2008/03/17 Javascript
JQuery 操作select标签实现代码
2010/05/14 Javascript
浅谈JavaScript Math和Number对象
2015/01/26 Javascript
使用DNode实现php和nodejs之间通信的简单实例
2015/07/06 NodeJs
在for循环中length值是否需要缓存
2015/07/27 Javascript
JSON+Jquery省市区三级联动
2016/01/13 Javascript
laypage分页控件使用实例详解
2016/05/19 Javascript
JavaScript知识点总结(十六)之Javascript闭包(Closure)代码详解
2016/05/31 Javascript
JS使用JSON作为参数实例分析
2016/06/23 Javascript
JS实现添加,替换,删除节点元素的方法
2016/06/30 Javascript
Angularjs 依赖压缩及自定义过滤器写法
2017/02/04 Javascript
JavaScript 中 apply 、call 的详解
2017/03/21 Javascript
vue.js  父向子组件传参的实例代码
2017/10/29 Javascript
vue 设置路由的登录权限的方法
2018/07/03 Javascript
Vue实现左右菜单联动实现代码
2018/08/12 Javascript
Vue2.x中利用@font-size引入字体图标报错的解决方法
2018/09/28 Javascript
vue实现设置载入动画和初始化页面动画效果
2019/10/28 Javascript
Electron+vue从零开始打造一个本地播放器的方法示例
2020/10/27 Javascript
[48:22]VGJ.S vs VG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
用Python抢过年的火车票附源码
2015/12/07 Python
python 通过类中一个方法获取另一个方法变量的实例
2019/01/22 Python
图解python全局变量与局部变量相关知识
2019/11/02 Python
python随机数分布random均匀分布实例
2019/11/27 Python
python 实现从高分辨图像上抠取图像块
2020/01/02 Python
Python paramiko 模块浅谈与SSH主要功能模拟解析
2020/02/29 Python
Python多线程操作之互斥锁、递归锁、信号量、事件实例详解
2020/03/24 Python
python利用opencv保存、播放视频
2020/11/02 Python
canvas 下载二维码和图片加水印的方法
2018/03/21 HTML / CSS
加拿大折扣、优惠券和交易网站:WagJag
2018/02/07 全球购物
工厂保安员岗位职责
2014/01/31 职场文书
洗发水广告词
2014/03/13 职场文书
幼儿园教师节感谢信
2015/01/23 职场文书