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中URL编码函数代码
Jan 11 Javascript
Jquery的hide及toggle方法让超链接慢慢消失
Sep 06 Javascript
javascript中的undefined和not defined区别示例介绍
Feb 26 Javascript
js语法学习之判断一个对象是否为数组
May 13 Javascript
浅析JavaScript中的变量复制、参数传递和作用域链
Jan 13 Javascript
由浅入深剖析Angular表单验证
Jul 14 Javascript
jQueryUI Datepicker组件设置日期高亮
Oct 13 Javascript
Ionic学习日记实现验证码倒计时
Feb 08 Javascript
详解各版本React路由的跳转的方法
May 10 Javascript
Vuex modules模式下mapState/mapMutations的操作实例
Oct 17 Javascript
vue使用element-ui实现表单验证
Dec 13 Vue.js
微信小程序之高德地图多点路线规划过程示例详解
Jan 18 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
使用 eAccelerator加速PHP代码的目的
2007/03/16 PHP
PHP 函数学习简单小结
2010/07/08 PHP
php判断当前操作系统类型
2015/10/28 PHP
thinkphp项目部署到Linux服务器上报错“模板不存在”如何解决
2016/04/27 PHP
php插件Xajax使用方法详解
2017/08/31 PHP
原生php实现excel文件读写的方法分析
2018/04/25 PHP
DOM精简教程
2006/10/03 Javascript
JavaScript中String和StringBuffer的速度之争
2010/04/01 Javascript
jQuery EasyUI API 中文文档 - MenuButton菜单按钮使用介绍
2011/10/06 Javascript
jQuery EasyUI API 中文文档 - Tree树使用介绍
2011/11/19 Javascript
JavaScript 浏览器对象模型BOM使用介绍
2015/04/13 Javascript
javascript 数组去重复(在线去重工具)
2016/12/17 Javascript
Angular在一个页面中使用两个ng-app的方法(二)
2017/02/20 Javascript
利用n工具轻松管理Node.js的版本
2017/04/21 Javascript
使用原生js+canvas实现模拟心电图的实例
2017/09/20 Javascript
vue、react等单页面项目应该这样子部署到服务器
2018/01/03 Javascript
vue-cli结合Element-ui基于cropper.js封装vue实现图片裁剪组件功能
2018/03/01 Javascript
微信小程序实现星级评分和展示
2018/07/05 Javascript
小程序指纹验证的实现代码
2018/12/04 Javascript
Vue 实现登录界面验证码功能
2020/01/03 Javascript
小程序实现列表展开收起效果
2020/07/29 Javascript
js实现验证码干扰(动态)
2021/02/23 Javascript
[04:27]2014DOTA2国际邀请赛 NAVI战队官方纪录片
2014/07/21 DOTA
Python操作RabbitMQ服务器实现消息队列的路由功能
2016/06/29 Python
Python字符串、列表、元组、字典、集合的补充实例详解
2019/12/20 Python
浅谈Tensorflow 动态双向RNN的输出问题
2020/01/20 Python
Python3爬虫里关于识别微博宫格验证码的知识点详解
2020/07/30 Python
HTML5 embed 标签使用方法介绍
2013/08/13 HTML / CSS
亚洲颇具影响力的男性在线购物零售商:His
2019/11/24 全球购物
采购内勤岗位职责
2013/12/10 职场文书
二年级体育教学反思
2014/01/15 职场文书
创先争优活动方案
2014/02/12 职场文书
北大自主招生自荐信
2015/03/04 职场文书
html5 录制mp3音频支持采样率和比特率设置
2021/07/15 Javascript
高并发下Redis如何保持数据一致性(避免读后写)
2022/03/18 Redis
Java Spring Boot 正确读取配置文件中的属性的值
2022/04/20 Java/Android