Detailed explanation of Ajax passing array parameter value to the server-JS Tutorial-php.cn

Detailed explanation of Ajax passing array parameter value to the server

小云云

Release： 2017-12-29 11:24:29

Original

4196 people have browsed it

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);
}

Copy after login

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>

Copy after login

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>

Copy after login

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>

Copy after login

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!