jQuery Ajax向服务端传递数组参数值的实例代码

更新时间：2017年09月03日 09:35:00 作者：Jichan·Jong

在使用MVC时，向服务器端发送POST请求时有时需要传递数组作为参数值,下面通过实例代码给大家介绍jQuery Ajax向服务端传递数组参数值的方法，一起看看吧

在使用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向服务端传递数组参数值的实例代码，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回家大家的！

您可能感兴趣的文章:

jquery中html、val与text三者属性取值的联系与区别介绍
本文为大家详细介绍下jquery中，html、val与text三者属性取值的联系与区别，下面有个不错的示例，感兴趣的朋友不要错过
2013-12-12
jquery拖动层效果插件用法实例分析(附demo源码)
这篇文章主要介绍了jquery拖动层效果插件用法,结合实例形式分析了jquery-ui-1.7.2.custom.min.js插件的具体使用技巧,并附带完整demo源码供读者下载参考,需要的朋友可以参考下
2016-04-04
7个jQuery最佳实践
这篇文章主要为大家分享了7个jQuery最佳实践，在使用JavaScript库的时候，有哪些最佳实践，又有哪些不好的实践呢？感兴趣的小伙伴们可以参考一下
2016-01-01
jquery ajax,ashx,json的用法总结
本篇文章主要是对jquery ajax,ashx,json的用法进行了详细的总结介绍，需要的朋友可以过来参考下，希望对大家有所帮助
2014-02-02
用jquery写的一个万年历(自写)
万年历，想必大家对它都不陌生吧，下面是使用jquery写的一个万年历示例，喜欢的朋友可以参考下
2014-01-01
jQuery手机拨号界面特效代码分享
这篇文章主要介绍了jQuery手机拨号界面特效，整体特效非常逼真自然，推荐给大家，有需要的小伙伴可以参考下。
2015-08-08
jQuery如何获取动态添加的元素
这篇文章主要介绍了jQuery如何获取动态添加的元素的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下
2016-06-06
Jquery树插件zTree实现菜单树
这篇文章主要为大家详细介绍了Jquery树插件zTree实现菜单树，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-01-01
jquery实现的简单轮播图功能【适合新手】
这篇文章主要介绍了jquery实现的简单轮播图功能,涉及jQuery基于定时器的事件响应与页面元素属性动态操作相关实现技巧,需要的朋友可以参考下
2018-08-08
jQuery实现的兼容性浮动层示例
这篇文章主要介绍了jQuery实现的兼容性浮动层,可兼容IE、火狐等主流浏览器,涉及jQuery针对页面元素的运算与属性的动态设置相关技巧,需要的朋友可以参考下
2016-08-08