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获取元素样式属性值的方法
Dec 25 Javascript
如何获取JQUERY AJAX返回的JSON结果集实现代码
Dec 10 Javascript
使用bootstrap3开发响应式网站
May 12 Javascript
使用jquery/js获取iframe父子级、同级获取元素的方法
Aug 05 Javascript
js实现按钮控制带有停顿效果的图片滚动
Aug 30 Javascript
使用JavaScript为一张图片设置备选路径的方法
Jan 04 Javascript
bootstrap-table组合表头的实现方法
Sep 07 Javascript
深入理解ES6中let和闭包
Feb 22 Javascript
vue axios 表单提交上传图片的实例
Mar 16 Javascript
vue实现表单录入小案例
Sep 27 Javascript
vue中 数字相加为字串转化为数值的例子
Nov 07 Javascript
javascript设计模式 ? 代理模式原理与用法实例分析
Apr 16 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
人族 Terran 魔法与科技
2020/03/14 星际争霸
laravel 中如何使用ajax和vue总结
2017/08/16 PHP
php-fpm添加service服务的例子
2018/04/27 PHP
jquery.combobox中文api和例子,修复了上面的小bug
2011/03/28 Javascript
jQuery函数map()和each()介绍及异同点分析
2014/11/08 Javascript
JavaScript阻止事件冒泡示例分享
2014/12/28 Javascript
jquery遍历标签中自定义的属性方法
2016/09/17 Javascript
微信小程序 wx.request(object) API详解及实例代码
2016/09/30 Javascript
JavaScript生成.xls文件的代码
2016/12/22 Javascript
JS全角与半角转化实例(分享)
2017/07/04 Javascript
浅谈JS 数字和字符串之间相互转化的纠纷
2017/10/20 Javascript
angularjs实现柱状图动态加载的示例
2017/12/11 Javascript
JavaScript封装的常用工具类库bee.js用法详解【经典类库】
2018/09/03 Javascript
4个顶级JavaScript高级文本编辑器
2018/10/10 Javascript
浅谈Vue数据响应思路之数组
2018/11/06 Javascript
小程序实现上下移动切换位置
2019/09/23 Javascript
js获取url页面id,也就是最后的数字文件名
2020/09/25 Javascript
python实现颜色rgb和hex相互转换的函数
2015/03/19 Python
python连接远程ftp服务器并列出目录下文件的方法
2015/04/01 Python
Python正则表达式使用范例分享
2016/12/04 Python
用Python逐行分析文件方法
2019/01/28 Python
浅析python的Lambda表达式
2019/02/27 Python
在Django下测试与调试REST API的方法详解
2019/08/29 Python
Django 自动生成api接口文档教程
2019/11/19 Python
pytorch中tensor张量数据类型的转化方式
2019/12/31 Python
Python基础之变量基本用法与进阶详解
2020/01/03 Python
使用pth文件添加Python环境变量方式
2020/05/26 Python
美国卡车、吉普车和SUV零件网站:4 Wheel Parts
2016/11/24 全球购物
bonprix匈牙利:女士、男士和儿童服装
2019/07/19 全球购物
什么是事务?为什么需要事务?
2012/01/09 面试题
C#实现对任一张表的数据进行增,删,改,查要求,运用Webservice,体现出三层架构
2014/07/11 面试题
2015秋季开学典礼致辞
2015/07/16 职场文书
2016年优秀党务工作者先进事迹材料
2016/02/29 职场文书
MySQL主从搭建(多主一从)的实现思路与步骤
2021/05/13 MySQL
Python实现查询剪贴板自动匹配信息的思路详解
2021/07/09 Python
使用kubeadm命令行工具创建kubernetes集群
2022/03/31 Servers