Home >Web Front-end >JS Tutorial >Detailed explanation of Ajax passing array parameter value to the server

Detailed explanation of Ajax passing array parameter value to the server

小云云Original: 2017-12-29 11:24:294191browse

When using MVC, sometimes you need to pass an array as a parameter value when sending a POST request to the server. The following is an example code to introduce to you the method of jQuery Ajax passing array parameter values to the server. Let's take a look. I hope it can help. to everyone.

The following examples are used to illustrate, first look at Action

[HttpPost]
public ActionResult Test(List<string> model)
{
 return Json(null, JsonRequestBehavior.AllowGet);
}

Method 1, construct the form element, and then call the serialize() method to get the construction parameter string

@{
 Layout = null;
}
<!DOCTYPE html>
<html>
<head>
 <meta name="viewport" content="width=device-width" />
 <title>Test</title>
</head>
<body>
 <p>
  <input type="button" id="btnAjax" value="发送请求" />
 </p>
 <script src="~/Scripts/jquery-1.10.2.min.js"></script>
 <script type="text/javascript">
  var tmp = &#39;<input type="hidden" name="model" value="1" /><input type="hidden" name="model" value="2" />&#39;;
  $(function () {
   $("#btnAjax").click(function () {
    $.ajax({
     url: &#39;@Url.Action("Test")&#39;,
     type: &#39;POST&#39;,
     data: $(tmp).serialize(),
     success: function (json) {
      console.log(json);
     }
    });
   });
  });
 </script>
</body>
</html>

Debug mode monitoring parameters, when the button is clicked, the monitored parameters are as follows

Method 2: Use JavaScript objects as parameters to pass values. The parameter name is the parameter name corresponding to the Action method, and the parameter value is a JavaScript array

@{
 Layout = null;
}
<!DOCTYPE html>
<html>
<head>
 <meta name="viewport" content="width=device-width" />
 <title>Test</title>
</head>
<body>
 <p>
  <input type="button" id="btnAjax" value="发送请求" />
 </p>
 <script src="~/Scripts/jquery-1.10.2.min.js"></script>
 <script type="text/javascript">
  //var tmp = &#39;<input type="hidden" name="model" value="1" /><input type="hidden" name="model" value="2" />&#39;;
  var array = ["abc","123"];
  $(function () {
   $("#btnAjax").click(function () {
    $.ajax({
     url: &#39;@Url.Action("Test")&#39;,
     type: &#39;POST&#39;,
     data: {
      model:array
     },
     success: function (json) {
      console.log(json);
     }
    });
   });
  });
 </script>
</body>
</html>

Method 3, use Json as parameter request, at this time Ajax needs to declare Content-Type as application/json

@{
 Layout = null;
}
<!DOCTYPE html>
<html>
<head>
 <meta name="viewport" content="width=device-width" />
 <title>Test</title>
</head>
<body>
 <p>
  <input type="button" id="btnAjax" value="发送请求" />
 </p>
 <script src="~/Scripts/jquery-1.10.2.min.js"></script>
 <script type="text/javascript">
  //var tmp = &#39;<input type="hidden" name="model" value="1" /><input type="hidden" name="model" value="2" />&#39;;
  //var array = ["abc","123"];
  $(function () {
   $("#btnAjax").click(function () {
    $.ajax({
     url: &#39;@Url.Action("Test")&#39;,
     type: &#39;POST&#39;,
     contentType:&#39;application/json;charset=utf-8&#39;,
     data: JSON.stringify({
      model:["hello","welcome"]
     }),
     success: function (json) {
      console.log(json);
     }
    });
   });
  });
 </script>
</body>
</html>

The above example uses ASP.NET MVC 5

Related recommendations:

How to use php to pass arrays to js scripts

jquery ajax fails to pass arrays to the background

jquery ajax passes arrays to the background and Detailed explanation of how to receive array code in the background

The above is the detailed content of Detailed explanation of Ajax passing array parameter value to the server. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：The difference between .attr() and .data() in jQueryNext article：The difference between .attr() and .data() in jQuery

See more

Detailed explanation of Ajax passing array parameter value to the server

Related articles