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 相关文章推荐
20款超赞的jQuery插件 Web开发人员必备
Feb 26 Javascript
分享一个用Mootools写的鼠标滑过进度条改变进度值的实现代码
Dec 12 Javascript
js实现带按钮的上下滚动效果
May 12 Javascript
使用jquery实现仿百度自动补全特效
Jul 23 Javascript
两种JS实现屏蔽鼠标右键的方法
Aug 20 Javascript
谈谈JavaScript中的几种借用方法
Aug 09 Javascript
JS锚点的设置与使用方法
Sep 05 Javascript
JavaScript循环_动力节点Java学院整理
Jun 28 Javascript
jquery无缝图片轮播组件封装
Nov 25 jQuery
layui表格数据复选框回显设置方法
Sep 13 Javascript
JavaScript实现省市联动效果
Nov 22 Javascript
ant design charts 获取后端接口数据展示
May 25 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
世界收音机发展史
2021/03/01 无线电
5种PHP创建数组的实例代码分享
2014/01/17 PHP
高质量PHP代码的50个实用技巧必备(下)
2016/01/22 PHP
ThinkPHP框架实现的邮箱激活功能示例
2018/06/15 PHP
JavaScript 学习 - 提高篇
2007/02/02 Javascript
动态载入/删除/更新外部 JavaScript/Css 文件的代码
2010/07/03 Javascript
JavaScript OOP面向对象介绍
2010/12/02 Javascript
javascript实现des解密加密全过程
2014/04/03 Javascript
javascript中var的重要性分析
2015/02/11 Javascript
js+html5获取用户地理位置信息并在Google地图上显示的方法
2015/06/05 Javascript
使用javaScript动态加载Js文件和Css文件
2015/10/24 Javascript
JavaScript实现阿拉伯数字和中文数字互相转换
2016/06/12 Javascript
jQuery多个版本和其他js库冲突的解决方法
2016/08/11 Javascript
JS数组去掉重复数据只保留一条的实现代码
2016/08/11 Javascript
js数组与字符串常用方法总结
2017/01/13 Javascript
微信小程序开发之数据存储 参数传递 数据缓存
2017/04/13 Javascript
Webpack框架核心概念(知识点整理)
2017/12/22 Javascript
微信小程序之事件交互操作实例分析
2018/12/03 Javascript
Vue.js构建你的第一个包并在NPM上发布的方法步骤
2019/05/01 Javascript
手把手15分钟搭一个企业级脚手架
2019/09/16 Javascript
[03:43]2014DOTA2西雅图国际邀请赛 newbee战队巡礼
2014/07/07 DOTA
浅谈Python中的私有变量
2018/02/28 Python
浅析PyTorch中nn.Linear的使用
2019/08/18 Python
Python 使用指定的网卡发送HTTP请求的实例
2019/08/21 Python
Python中BeautifuSoup库的用法使用详解
2019/11/15 Python
flask框架json数据的拿取和返回操作示例
2019/11/28 Python
win10安装tensorflow-gpu1.8.0详细完整步骤
2020/01/20 Python
python利用xpath爬取网上数据并存储到django模型中
2021/02/26 Python
总结html5自定义属性有哪些
2020/04/01 HTML / CSS
婚鞋、新娘鞋、礼服鞋、童鞋:Nina Shoes
2019/09/04 全球购物
大唐面试试题(CPU,UNIX等等)
2012/01/11 面试题
个人学习群众路线心得体会
2014/11/05 职场文书
人与自然的观后感
2015/06/18 职场文书
高三毕业感言
2015/07/30 职场文书
科级干部培训心得体会
2016/01/06 职场文书
Java中API的使用方法详情
2022/04/06 Java/Android