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 EasyUI $.Parser
Jun 02 jQuery
jQuery Ajax使用FormData上传文件和其他数据后端web.py获取
Jun 11 jQuery
关于jQuery.ajax()的jsonp碰上post详解
Jul 02 jQuery
简单实现jQuery轮播效果
Aug 18 jQuery
jquery插件开发之选项卡制作详解
Aug 30 jQuery
jQuery实现定时隐藏对话框的方法分析
Feb 12 jQuery
JS文件中加载jquery.js的实例代码
May 05 jQuery
jQuery实现的点击按钮改变样式功能示例
Jul 21 jQuery
使用jquery DataTable和ajax向页面显示数据列表的方法
Aug 09 jQuery
jQuery的ztree仿windows文件新建和拖拽功能的实现代码
Dec 05 jQuery
jQuery实现的导航条点击后高亮显示功能示例
Mar 04 jQuery
JQuery获取元素尺寸、位置及页面滚动事件应用示例
May 14 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
朋友网关于QQ相关的PHP代码(研究QQ的绝佳资料)
2015/01/26 PHP
php转换颜色为其反色的方法
2015/04/27 PHP
PHP模拟http请求的方法详解
2016/11/09 PHP
php获取POST数据的三种方法实例详解
2016/12/20 PHP
jQuery Tips 为AJAX回调函数传递额外参数的方法
2010/12/28 Javascript
SharePoint 客户端对象模型 (一) ECMA Script
2011/05/22 Javascript
toggle一个div显示或隐藏且可扩展成自定义下拉框
2013/09/12 Javascript
BOOTSTRAP时间控件显示在模态框下面的bug修复
2015/02/05 Javascript
javascript关于继承解析
2016/05/10 Javascript
JavaScript中的await/async的作用和用法
2016/10/31 Javascript
jQuery居中元素scrollleft计算方法示例
2017/01/16 Javascript
bootstrap插件treeview实现全选父节点下所有子节点和反选功能
2017/07/21 Javascript
微信小程序获取循环元素id以及wx.login登录操作
2017/08/17 Javascript
vue实现循环切换动画
2018/10/17 Javascript
如何在JavaScript中优雅的提取循环内数据详解
2019/03/04 Javascript
vue3.0中的双向数据绑定方法及优缺点
2019/08/01 Javascript
使用 Vue 实现一个虚拟列表的方法
2019/08/20 Javascript
[10:04]国际邀请赛采访专栏:DK.Farseer,mouz.Black^,采访员Josh专访
2013/08/05 DOTA
Django跨域请求CSRF的方法示例
2018/11/11 Python
详解用python自制微信机器人,定时发送天气预报
2019/03/25 Python
Python面向对象之类和实例用法分析
2019/06/08 Python
Django 开发环境与生产环境的区分详解
2019/07/26 Python
Python threading的使用方法解析
2019/08/28 Python
python实现二分类的卡方分箱示例
2019/11/22 Python
Python 私有属性和私有方法应用场景分析
2020/06/19 Python
python如何实现DES加密
2020/09/21 Python
虚拟环境及venv和virtualenv的区别说明
2021/02/05 Python
实习护士自我鉴定
2013/10/13 职场文书
法律专业应届生自荐信范文
2014/01/06 职场文书
实习老师离校感言
2014/02/03 职场文书
手术室护士长竞聘书
2014/03/31 职场文书
班主任个人工作反思
2014/04/28 职场文书
机关保密工作承诺书
2015/05/04 职场文书
企业投资意向书
2015/05/09 职场文书
Redis三种集群模式详解
2021/10/05 Redis
Windows server 2012搭建FTP服务器
2022/04/29 Servers