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 相关文章推荐
Script标签与访问HTML页面详解
Jan 10 Javascript
Javascript玩转继承(二)
May 08 Javascript
jQuery插件实现控制网页元素动态居中显示
Mar 24 Javascript
JavaScript判断页面加载完之后再执行预定函数的技巧
May 17 Javascript
Bootstrap 源代码分析(未完待续)
Aug 17 Javascript
javascript 注释代码的几种方法总结
Jan 04 Javascript
vue2.0与bootstrap3实现列表分页效果
Nov 28 Javascript
解决vue单页使用keep-alive页面返回不刷新的问题
Mar 13 Javascript
Vue中在新窗口打开页面及Vue-router的使用
Jun 13 Javascript
12 种使用Vue 的最佳做法
Mar 30 Javascript
微信小程序绘制半圆(弧形)进度条
Nov 18 Javascript
微信小程序向Java后台传输参数的方法实现
Dec 10 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
实用的简单PHP分页集合包括使用方法
2013/10/21 PHP
通过php修改xml文档内容的方法
2015/01/23 PHP
让Laravel API永远返回JSON格式响应的方法示例
2018/09/05 PHP
Javascript对象中关于setTimeout和setInterval的this介绍
2012/07/21 Javascript
js 获取屏幕各种宽高的方法(浏览器兼容)
2013/05/15 Javascript
javascript-简单的日历实现及Date对象语法介绍(附图)
2013/05/30 Javascript
调整小数的格式保留小数点后两位
2014/05/14 Javascript
js获取当前时间显示在页面上并每秒刷新
2014/12/24 Javascript
jQuery模拟原生态App上拉刷新下拉加载更多页面及原理
2015/08/10 Javascript
javascript动态获取登录时间和在线时长
2016/02/25 Javascript
jQuery AJAX timeout 超时问题详解
2016/06/21 Javascript
微信小程序的动画效果详解
2017/01/18 Javascript
JS实现点击表头表格自动排序(含数字、字符串、日期)
2017/01/22 Javascript
Angular多选、全选、批量选择操作实例代码
2017/03/10 Javascript
JS库 Highlightjs 添加代码行号的实现代码
2017/09/13 Javascript
js正则相关知识点专题
2018/05/10 Javascript
Node.js JSON模块用法实例分析
2019/01/04 Javascript
微信小程序实现的图片保存功能示例
2019/04/24 Javascript
js验证身份证号码记录的方法
2019/04/26 Javascript
node.js实现上传文件功能
2019/07/15 Javascript
vue 实现v-for循环回来的数据动态绑定id
2019/11/07 Javascript
微信小程序点击保存图片到本机功能
2019/12/13 Javascript
python在控制台输出进度条的方法
2015/06/20 Python
Python 40行代码实现人脸识别功能
2017/04/02 Python
Python pandas.DataFrame调整列顺序及修改index名的方法
2019/06/21 Python
小狗电器官方商城:中国高端吸尘器品牌
2017/03/29 全球购物
碧欧泉Biotherm加拿大官方网站:法国高端护肤品牌
2019/10/18 全球购物
Scotch Porter官方网站:男士美容产品
2020/08/31 全球购物
八项规定整改方案
2014/02/21 职场文书
人身损害赔偿协议书范本
2014/09/27 职场文书
2015年学校保卫部工作总结
2015/05/11 职场文书
sql字段解析器的实现示例
2021/06/23 SQL Server
用JS创建一个录屏功能
2021/11/11 Javascript
电频谱管理的原则是什么
2022/02/18 无线电
利用Redis实现点赞功能的示例代码
2022/06/28 Redis
Vue router配置与使用分析讲解
2022/12/24 Vue.js