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


Posted in jQuery onSeptember 03, 2017

在使用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>

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

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

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

方式二:使用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>

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

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

方式三,使用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>

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

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

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

总结

以上所述是小编给大家介绍的jQuery Ajax向服务端传递数组参数值的实例代码,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回家大家的!

jQuery 相关文章推荐
基于jQuery实现文字打印动态效果
Apr 21 jQuery
jQuery.ajax向后台传递数组问题的解决方法
May 12 jQuery
jquery对table做排序操作的实例演示
Aug 10 jQuery
Mui使用jquery并且使用点击跳转新窗口的实例
Aug 19 jQuery
使用vue与jquery实时监听用户输入状态的操作代码
Sep 19 jQuery
jquery animate动画持续运动的实例
Nov 29 jQuery
JQuery元素快速查找与操作
Apr 22 jQuery
jQuery动态移除与增加onclick属性的方法详解
Jun 07 jQuery
jQuery实现购物车的总价计算和总价传值功能
Nov 28 jQuery
jQuery实现的自定义轮播图功能详解
Dec 28 jQuery
Jquery遍历筛选数组的几种方法和遍历解析json对象,Map()方法详解以及数组中查询某值是否存在
Jan 18 jQuery
jQuery zTree插件快速实现目录树
Aug 16 jQuery
jquery tmpl模板(实例讲解)
Sep 02 #jQuery
jQuery EasyUI结合zTree树形结构制作web页面
Sep 01 #jQuery
JQuery EasyUI 结合ztrIee的后台页面开发实例
Sep 01 #jQuery
jquery操作ul的一些操作笔记整理(干货)
Aug 31 #jQuery
jquery插件开发之选项卡制作详解
Aug 30 #jQuery
基于jQuery的左滑出现删除按钮的示例
Aug 29 #jQuery
jQuery实现简单的计时器功能实例分析
Aug 29 #jQuery
You might like
php中require和require_once的区别说明
2014/02/27 PHP
PHP memcache在微信公众平台的应用方法示例
2017/09/13 PHP
dojo 之基础篇
2007/03/24 Javascript
用JSON做数据传输格式中的一些问题总结
2011/12/21 Javascript
jquery 获取表单元素里面的值示例代码
2013/07/28 Javascript
js对列表中第一个值处理与jsp页面对列表中第一个值处理的区别详解
2013/11/05 Javascript
JQuery文本改变触发事件如聚焦事件、失焦事件
2014/01/15 Javascript
document.compatMode的CSS1compat使用介绍
2014/04/03 Javascript
jQuery知识点整理
2015/01/30 Javascript
Bootstrap创建可折叠的组件
2016/02/23 Javascript
JavaScript设计模式经典之工厂模式
2016/02/24 Javascript
理解javascript函数式编程中的闭包(closure)
2016/03/08 Javascript
浅谈javascript基础之客户端事件驱动
2016/06/10 Javascript
JS自动生成动态HTML验证码页面
2017/06/14 Javascript
彻底解决 webpack 打包文件体积过大问题
2017/07/07 Javascript
浅谈vue2 单页面如何设置网页title
2017/11/08 Javascript
react 父子组件之间通讯props
2018/09/08 Javascript
JS实现根据数组对象的某一属性排序操作示例
2019/01/14 Javascript
微信小程序点击顶部导航栏切换样式代码实例
2019/11/12 Javascript
[01:01:43]EG vs VP 2018国际邀请赛淘汰赛BO3 第二场 8.24
2018/08/25 DOTA
Python本地与全局命名空间用法实例
2015/06/16 Python
基于python的七种经典排序算法(推荐)
2016/12/08 Python
Python安装pycurl失败的解决方法
2018/10/15 Python
python numpy之np.random的随机数函数使用介绍
2019/10/06 Python
详解Python 实现 ZeroMQ 的三种基本工作模式
2020/03/24 Python
用CSS3实现背景渐变的方法
2015/07/14 HTML / CSS
教师节活动主持词
2014/04/02 职场文书
绘画专业自荐信
2014/07/04 职场文书
迎国庆演讲稿
2014/09/15 职场文书
党员对照检查剖析材料
2014/10/13 职场文书
校友会致辞
2015/07/30 职场文书
2019年度行政文员工作计划范本!
2019/07/04 职场文书
Nginx域名转发使用场景代码实例
2021/03/31 Servers
如何使用Python实现一个简易的ORM模型
2021/05/12 Python
Maven学习----Maven安装与环境变量配置教程
2021/06/29 Java/Android
MySQL 开窗函数
2022/02/15 MySQL