Explication détaillée de la transmission par Ajax de la valeur du paramètre de tableau au serveur-js tutoriel-php.cn

Explication détaillée de la transmission par Ajax de la valeur du paramètre de tableau au serveur

小云云

Libérer： 2017-12-29 11:24:29

original

4210 Les gens l'ont consulté

Lors de l'utilisation de MVC, vous devez parfois transmettre un tableau comme valeur de paramètre lors de l'envoi d'une requête POST au serveur. Voici un exemple de code pour vous présenter la méthode par laquelle jQuery Ajax transmet la valeur du paramètre de tableau au serveur. Jetons un coup d'oeil. J'espère que cela pourra aider tout le monde.

Ce qui suit utilise des exemples pour illustrer. Tout d'abord, regardez Action

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

Copier après la connexion

Méthode 1, construisez l'élément de formulaire, puis appelez la sérialisation( ) méthode pour obtenir le caractère du paramètre de construction 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>

Copier après la connexion

Paramètres de surveillance du mode débogage, lorsque vous cliquez sur le bouton, les paramètres surveillés sont les suivants

Méthode 2 : Utiliser des objets JavaScript comme paramètres pour transmettre des valeurs. Le nom du paramètre est le nom du paramètre correspondant à la méthode Action.

@{
 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>

Copier après la connexion

Méthode 3, utilisez Json comme requête de paramètre, à ce moment-là, Ajax a besoin pour déclarer Content-Type comme 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>

Copier après la connexion