在使用MVC时，向服务器端发送POST请求时有时需要传递数组作为参数值

下面使用例子说明，首先看一下Action

[HttpPost]

public ActionResult Test(List<string> model)

{

    return Json(null, JsonRequestBehavior.AllowGet);

}

方式一，构造表单元素，然后调用serialize()方法得到构造参数字符串

@{

    Layout = null;

}

<!DOCTYPE html>

<html>

<head>

    <meta name="viewport" content="width=device-width" />

    <title>Test</title>

</head>

<body>

    <div>

        <input type="button" id="btnAjax" value="发送请求" />

    </div>

    <script src="~/Scripts/jquery-1.10.2.min.js"></script>

    <script type="text/javascript">

        var tmp = '<input type="hidden" name="model" value="1" /><input type="hidden" name="model" value="2" />';

        $(function () {

            $("#btnAjax").click(function () {

                $.ajax({

                    url: '@Url.Action("Test")',

                    type: 'POST',

                    data: $(tmp).serialize(),

                    success: function (json) {

                        console.log(json);

                    }

                });

            });

        });

    </script>

</body>

</html>

调试模式监视参数，当点击按钮时，监视得到的参数如下

方式二：使用JavaScript对象作为参数传值，参数名是与Action方法对应的参数名，参数值是JavaScript数组

@{

    Layout = null;

}

<!DOCTYPE html>

<html>

<head>

    <meta name="viewport" content="width=device-width" />

    <title>Test</title>

</head>

<body>

    <div>

        <input type="button" id="btnAjax" value="发送请求" />

    </div>

    <script src="~/Scripts/jquery-1.10.2.min.js"></script>

    <script type="text/javascript">

        //var tmp = '<input type="hidden" name="model" value="1" /><input type="hidden" name="model" value="2" />';

        var array = ["abc","123"];

        $(function () {

            $("#btnAjax").click(function () {

                $.ajax({

                    url: '@Url.Action("Test")',

                    type: 'POST',

                    data: {

                        model:array

                    },

                    success: function (json) {

                        console.log(json);

                    }

                });

            });

        });

    </script>

</body>

</html>

方式三，使用Json作为参数请求，此时Ajax需要声明Content-Type为application/json

@{

    Layout = null;

}

<!DOCTYPE html>

<html>

<head>

    <meta name="viewport" content="width=device-width" />

    <title>Test</title>

</head>

<body>

    <div>

        <input type="button" id="btnAjax" value="发送请求" />

    </div>

    <script src="~/Scripts/jquery-1.10.2.min.js"></script>

    <script type="text/javascript">

        //var tmp = '<input type="hidden" name="model" value="1" /><input type="hidden" name="model" value="2" />';

        //var array = ["abc","123"];

        $(function () {

            $("#btnAjax").click(function () {

                $.ajax({

                    url: '@Url.Action("Test")',

                    type: 'POST',

                    contentType:'application/json;charset=utf-8',

                    data: JSON.stringify({

                        model:["hello","welcome"]

                    }),

                    success: function (json) {

                        console.log(json);

                    }

                });

            });

        });

    </script>

</body>

</html>

上面的例子使用的是ASP.NET MVC 5

Jquery Ajax向服务端传递数组参数值的更多相关文章

  1. 使用jquery的$.ajax向服务端传递中文，避免乱码的解决办法！

    在js里,对中文使用下面的方法 encodeURIComponent(var) 函数 就ok了!

  2. jquery.ajax的url中传递中文乱码问题的解决方法

    jquery.ajax的url中传递中文乱码问题的解决方法   JQuery JQuery默认的contentType:application/x-www-form-urlencoded 这才是JQu ...

  3. Ajax轮询——“定时的通过Ajax查询服务端”

    Ajax轮询——"定时的通过Ajax查询服务端". 概念: 轮询(polling):客户端按规定时间定时像服务端发送ajax请求,服务器接到请求后马上返回响应信息并关闭连接. 百闻 ...

  4. ajax如何向后台传递数组，在后台该如何接收的问题（项目积累）

    一.后台如何接收从前台接收的数组: 使用request.getParameterValues(String xxx); <input type="text" name=&qu ...

  5. Ajax轮询——定时的通过Ajax查询服务端

    概念:轮询(polling):客户端按规定时间定时向服务端发送ajax请求,服务器接到请求后马上返回响应信息并关闭连接. test.html     //前端代码 <html> <h ...

  6. 使用ajax向服务端发送Form中的数据

    前端代码: <form action="" id="myFormUpdate"> <p>宠物名称: <input type=&qu ...

  7. aJax提交——服务端不能用request存储数据，session存数据客户端可以接收到

    aJax提交与普通提交是两种迥异的提交方式,这两种提交方式决定了客户端与服务端交互时存储.传输数据的方式也不同. aJax提交,客户端的请求数据存储在data中,服务端用request.getPara ...

  8. jQuery.ajax 调用 服务（.aspx，.asmx）

    方法1:Post(json)+IIS下://aspx,适用本机 $.ajax({ url: "TpgConnect_Rain/postgreService.aspx/getRainInfo& ...

  9. 关于 jquery+ajax向asp.net传递json的问题研究（呕心沥血、柳暗花明）

    第一种方法:字典的方法 //质检不合格 $('#Button3').click(function () { if (!confirm('确定质检不合格吗?')) return; var obj = n ...

随机推荐

  1. 纯C++安卓开发 (ndk)系列之 ---- 常见问题

    常见问题1:run as Android Application运行时提示无法识别到模拟器 解决步骤如下: (1)首先查看安卓模拟器是否已经打开 (2)如果安卓模拟器已经打开,则操作步骤为:点击Ecl ...

  2. 修改salt-minion的id后报错解决方法

    centos7使用命令 /usr/bin/salt-minion start运行报错 Error parsing configuration file: /etc/salt/master - expe ...

  3. mongodb-导出数据到csv文件或json文件

    在mongodb的bin目录下, 有一个mongoexport, 可用于数据的导出 [wenbronk@localhost bin]$ ./mongoexport --help Usage: mong ...

  4. win10装系统--笔记

    U盘安装WIN10时显示 windows无法安装到这个磁盘 选中的磁盘采用GPT分区形式 一.原因分析 win8/win10系统均添加快速启动功能,预装的win8/win10电脑默认都是UEFI引导和 ...

  5. JavaScript初级面试题

    前面几题是会很基础,越下越有深度. 初级Javascript: 1.JavaScript是一门什么样的语言,它有哪些特点? 没有标准答案. 2.JavaScript的数据类型都有什么? 基本数据类型: ...

  6. (技术分享) 解决 Firefox 显示“已阻止载入混合活动内容”的问题

    (摘自http://blog.aizhet.com/Windows/18415.html) 从 Firefox 18 开始,如果 HTTPS 页面中包含非加密的 HTTP 内容,浏览器会在控制台输出警 ...

  7. spring cloud连载第三篇之Spring Cloud Netflix

    1. Service Discovery: Eureka Server(服务发现:eureka服务器) 1.1 依赖 <dependency> <groupId>org.spr ...

  8. c#socket TCP同步网络通信

    一.socket简介 socket就是套接字,它是引用网络连接的特殊文件描述符,由三个基本要素组成: 1: AddressFamily(网络类型) 2: SocketType(数据传输类型) 3:Pr ...

  9. WPF进度条

    ProgressBar控件与传统WinForm使用方法完全一样,我们只需关注: Minimum——最小值,默认为0: Maximum——最大值,默认为100. Value——当前值.   关键是它的控 ...

  10. JS权威指南笔记之数据类型

    1.类型分为原始类型和对象. 2.原始类型有:数字类型,字符类型,布尔,和null undefind. 3.JavaScript里的函数都是真值. 4.函数和通过New关键字创建对象.这个样函数称为构 ...