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

时间: 2024-12-23 04:12:11

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

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

jquery.ajax的url中传递中文乱码问题的解决方法 JQuery JQuery默认的contentType:application/x-www-form-urlencoded 这才是JQuery正在乱码的原因,在未指定字符集的时候,是使用ISO-8859-1 ISO8859-1,通常叫做Latin-1.Latin-1包括了书写所有西方欧洲语言不可缺少的附加字符. JQuery的Ajax根本没有考虑到国际化的问题,使用了欧洲的字符集,所以才引起了传递中文出现乱码的问题. 而我们的UTF-8

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

Ajax轮询——"定时的通过Ajax查询服务端". 概念: 轮询(polling):客户端按规定时间定时像服务端发送ajax请求,服务器接到请求后马上返回响应信息并关闭连接. 百闻不如一见,来段代码相信你一看就明白 //为了让同学们都明白,我用了最简单的实现方法,同学们懂了原理后可以自行衍生: Reception.html //前端代码 <html> <head> <title></title> <script src="

如何使用Ajax从服务端获取数据

在本文中将给出一个例子来介绍使用 Ajax 技术从服务端获得数据的三种方法.这个例子很简单,就是两个选择框(html中的<select>标签),通过选中第一个select的某一项后,会从服务端得到一些数据,并加载到第2个select中.金光大道娱乐城 从服务端获得XML格式的数据 从服务端获得数据的最容易想到的方法就是在服务端反加一定格式的数据,一般是XML格式,然后在服务端使用XMLDocument或其他技术来读取这些数据,并生成<select>标签中选项的格式文本(<op

使用ajax在前后端传递数组

我们都知道JSON作为前后端都兼容的数据格式,被很好的用于复杂数据的传输,特别是异步提交当中.当我们要将前端的js数组提交到后端并转化为list,继而又需要将后端的list传到前端转化为js数组的时候,JSON作为中间过渡的格式,必不可少.在此详细总结下. 编程组件 Struts2, FastJson, LigerListBox, AjaxFormSubmit. 第一, 将List数据传递给前端,形成一个JS数组 首先在传到前端的Bean里增加一个menuListJson属性,传递之前把List

ajax对服务端发送请求

//兼容处理获取ajax对象 var req = ''; if (window.XMLHttpRequest)    req = new XMLHttpRequest(); else    req = new ActiveXObject("Msxml2.XMLHTTP"); //建立连接 req.open('get', 'demo.php'); //发送请求 req.send(); 原文地址:https://www.cnblogs.com/wangshengl9263/p/902952

JSP通过AJAX获取服务端的时间,在页面上自动更新

1.在页面上引入js <head> <meta http-equiv="Content-Type" content="text/html; charset=GB18030"> <title>Insert title here</title> <script src="../scripts/jquery.min.js" type="text/javascript">&l

jQuery file upload 服务端返回数据格式

Using jQuery File Upload (UI version) with a custom server-side upload handler 正常的返回结果,即上传文件成功 Extend your custom server-side upload handler to return a JSON response akin to the following output: {"files": [ { "name": "picture1.j

jQuery通过Ajax向PHP服务端发送请求并返回JSON数据

ON(JavaScript Object Notation) 是一种轻量级的数据交换格式.易于人阅读和编写,同时也易于机器解析和生成.JSON在前后台交互的过程中发挥着相当出色的作用.请接着往下看教程. XHTML  <ul id="userlist">    <li><a href="#" rel="1">张三</a></li>    <li><a href=&quo

ajax的data传递数组时,前台不报错,后台不进断点

ajax的data中传递数组数据时,需加traditional:true, //默认false 不添加会导致后台接收不到改参数,后台controller中的方法不会执行,前后台都没有报错 $.ajax({ type:'post', async:false, url:'/emergencyPlanDigital/addPointAssociation', data:{ superId:$('#pointId').val(), childrenIds:childrenIds }, dataType: