在使用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. Python -- 网络编程 -- Socket发送文件

    客户端如果直接send两次,一次发文件名,一次发文件内容 服务端接受的时候会一起接收,不知怎么分开发送,或者分开接收, 或者全部接收再解析内容 今天发现传送mp3文件的时候没问题,传送文本文件的话,以 ...

  2. springweb flux websocket

    直接上代码: import org.springframework.stereotype.Component; import org.springframework.web.reactive.sock ...

  3. Beta--冲刺阶段合集

    冲刺前计划与安排:https://www.cnblogs.com/pubg722/p/9069234.html 第一篇冲刺博客:http://www.cnblogs.com/pubg722/p/909 ...

  4. Chrome 谷歌如何快速实现跨域

    第一步:在你的E盘或者其他盘新建一个文件夹,命名为:E:\MyChromeDevUserData 第二步:找到你的谷歌浏览器快捷图标,鼠标右键选择属性,出现以下界面: 第三步:在目标选项的最后添加:  ...

  5. 任务三十九：UI组件之冻结行列表格

    任务三十九:UI组件之冻结行列表格 面向人群: 有一定JavaScript基础 难度: 中 重要说明 百度前端技术学院的课程任务是由百度前端工程师专为对前端不同掌握程度的同学设计.我们尽力保证课程内容 ...

  6. win7 iis7 asp.net 编译器错误消息: CS0016:

    编译器错误消息: CS0016: 未能写入输出文件“c:/Windows/Microsoft.NET/Framework/v2.0.50727/Temporary ASP.NET Files/root ...

  7. Shell脚本编写5-----Shell 基本运算符

    算术运算符 原生bash不支持简单的数学运算,但是可以通过其他命令来实现,例如 awk 和 expr,expr 最常用.expr 是一款表达式计算工具,使用它能完成表达式的求值操作.例如: 两个数相加 ...

  8. MVC部分视图

    // 以视图名使用当前文件夹下的视图 // 如果没有找到,则搜索 Shared 文件夹 @Html.Partial("ViewName")   @Html.Partial(“视图” ...

  9. [PHP] 深入理解PHP内核：变量及数据类型

    1.现实生活中我们会找一个小箱子来存放物品,一来显得不那么凌乱,二来方便以后找到.计算机也是这个道理,我们需要先在内存中找一块区域,规定用它来存放数据,并起一个好记的名字,方便以后查找.这块区域就是“ ...

  10. 简易HashMap实现

    为了更好的理解HashMap线程不安全的根源,这里提供了HashMap的简易实现: package map.test; import org.apache.commons.lang3.StringUt ...