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 相关文章推荐
Prototype使用指南之form.js
Jan 10 Javascript
return false;和e.preventDefault();的区别
Jul 11 Javascript
js实例属性和原型属性示例详解
Nov 23 Javascript
js+canvas简单绘制圆圈的方法
Jan 28 Javascript
3kb jQuery代码搞定各种树形选择的实现方法
Jun 10 Javascript
JQuery异步提交表单与文件上传功能示例
Jan 12 Javascript
jQuery开源组件BootstrapValidator使用详解
Jun 29 jQuery
JavaScript判断输入是否为数字类型的方法总结
Sep 28 Javascript
判断jQuery是否加载完成,没完成继续判断的解决方法
Dec 06 jQuery
微信小程序提交form操作示例
Dec 30 Javascript
关于vue状态过渡transition不起作用的原因解决
Apr 09 Javascript
Vue axios获取token临时令牌封装案例
Sep 11 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
使用Xdebug调试和优化PHP程序之[1]
2007/04/17 PHP
CI框架安全类Security.php源码分析
2014/11/04 PHP
阿里云Win2016安装Apache和PHP环境图文教程
2018/03/11 PHP
PHP使用 Imagick 扩展实现图片合成,圆角处理功能示例
2019/09/09 PHP
PHP实现简单登录界面
2019/10/23 PHP
控制打印时页眉角的代码
2007/02/08 Javascript
用JavaScript 处理 URL 的两个函数代码
2007/08/13 Javascript
checkbox 多选框 联动实现代码
2008/10/22 Javascript
js实现简单模态窗口,背景灰显
2008/11/14 Javascript
Google Map Api和GOOGLE Search Api整合实现代码
2009/07/18 Javascript
自己的js工具_Form 封装
2009/08/21 Javascript
JavaScript this调用规则说明
2010/03/08 Javascript
Array.prototype.slice.apply的使用方法
2010/03/17 Javascript
select标签模拟/美化方法采用JS外挂式插件
2013/04/01 Javascript
jQuery移除tr无效的解决方法(tr是动态添加)
2014/09/22 Javascript
javascript原型模式用法实例详解
2015/06/04 Javascript
JavaScript函数的一些注意要点小结及js匿名函数
2015/11/10 Javascript
工作中比较实用的JavaScript验证和数据处理的干货(经典)
2016/08/03 Javascript
详解bootstrap的modal-remote两种加载方式【强化】
2017/01/27 Javascript
Vue 父子组件、组件间通信
2017/03/08 Javascript
JavaScript实现经纬度转换成地址功能
2017/03/28 Javascript
Vue中定义全局变量与常量的各种方式详解
2017/08/23 Javascript
JQuery实现简单的复选框树形结构图示例【附源码下载】
2019/07/16 jQuery
[36:37]2014 DOTA2华西杯精英邀请赛5 24 VG VS iG
2014/05/25 DOTA
[01:34]传奇从这开始 2016国际邀请赛中国区预选赛震撼开启
2016/06/26 DOTA
[00:20]TI9不朽观赛名额抽取
2019/08/05 DOTA
python的re模块应用实例
2014/09/26 Python
python实现QQ批量登录功能
2019/06/19 Python
实例详解Python模块decimal
2019/06/26 Python
HTML5+css3:3D旋转木马效果相册
2017/01/03 HTML / CSS
高级人员简历的自我评价分享
2013/11/03 职场文书
python 实现图与图之间的间距调整subplots_adjust
2021/05/21 Python
如何使用PostgreSQL进行中文全文检索
2021/05/27 PostgreSQL
Python+OpenCV实现在图像上绘制矩形
2022/03/21 Python
Innodb存储引擎中的后台线程详解
2022/04/03 MySQL
Python中使用Opencv开发停车位计数器功能
2022/04/04 Python