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 本页面传值实现代码
May 17 Javascript
JavaScript Event学习第七章 事件属性
Feb 07 Javascript
Jquery ajax执行顺序 返回自定义错误信息(实例讲解)
Nov 06 Javascript
JavaScript中数组去除重复的三种方法
Apr 22 Javascript
浅谈jquery中的each方法$.each、this.each、$.fn.each
Jun 23 Javascript
微信小程序实现红包功能(后端PHP实现逻辑)
Jul 11 Javascript
vue项目搭建以及全家桶的使用详细教程(小结)
Dec 19 Javascript
微信小程序实现图片选择并预览功能
Jul 25 Javascript
VUE实现自身整体组件销毁的示例代码
Jan 13 Javascript
解决vue 退出动画无效的问题
Aug 09 Javascript
jQuery实现增删改查
Dec 22 jQuery
typescript编写微信小程序创建项目的方法
Jan 29 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
一个程序下载的管理程序(二)
2006/10/09 PHP
Windows下部署Apache+PHP+MySQL运行环境实战
2012/08/31 PHP
盘点PHP和ASP.NET的10大对比!
2015/12/24 PHP
php封装的验证码工具类完整实例
2016/10/19 PHP
Laravel5.1 框架响应基本用法实例分析
2020/01/04 PHP
初学JavaScript第二章
2008/09/30 Javascript
jquery插件validate验证的小例子
2013/05/08 Javascript
JavaScript中的prototype.bind()方法介绍
2014/04/04 Javascript
初识Node.js
2014/09/03 Javascript
angularjs中的e2e测试实例
2014/12/06 Javascript
浅谈javascript中return语句
2015/07/15 Javascript
学习javascript的闭包,原型,和匿名函数之旅
2015/10/18 Javascript
Javascript打印局部页面实例
2016/06/21 Javascript
基于jQuery实现歌词滚动版音乐播放器的代码
2016/09/17 Javascript
js canvas实现QQ拨打电话特效
2017/05/10 Javascript
基于vue-router 多级路由redirect 重定向的问题
2018/09/03 Javascript
利用JavaScript缓存远程窃取Wi-Fi密码的思路详解
2018/11/05 Javascript
JS跨域请求的问题解析
2018/12/03 Javascript
jQuery实现的鼠标拖动浮层功能示例【拖动div等任何标签】
2018/12/29 jQuery
vue引用外部JS的两种种方法
2020/01/28 Javascript
vue基于better-scroll仿京东分类列表
2020/06/30 Javascript
JavaScript实现像雪花一样的Hexaflake分形
2020/07/07 Javascript
Python实现单词翻译功能
2017/06/06 Python
Python实现批量读取图片并存入mongodb数据库的方法示例
2018/04/02 Python
python 编码规范整理
2018/05/05 Python
python常见字符串处理函数与用法汇总
2019/10/30 Python
python实现智能语音天气预报
2019/12/02 Python
经典c++面试题五
2014/12/17 面试题
体育系毕业生求职自荐信
2014/04/16 职场文书
2014审计局领导班子民主生活会对照检查材料思想汇报
2014/09/20 职场文书
2014年大学生职业规划书:未来不是梦,只要勇敢冲!
2014/09/22 职场文书
继承公证书格式
2015/01/26 职场文书
2015年大班保育员工作总结
2015/05/18 职场文书
2015年绩效考核工作总结
2015/05/23 职场文书
spring cloud 配置中心客户端启动遇到的问题
2021/09/25 Java/Android
Python字符串常规操作小结
2022/04/03 Python