快捷導(dǎo)航

jQuery Ajax向服務(wù)端傳遞數(shù)組參數(shù)值的實(shí)例代碼

更新時(shí)間：2017年09月03日 09:35:00 作者：Jichan·Jong

在使用MVC時(shí)，向服務(wù)器端發(fā)送POST請(qǐng)求時(shí)有時(shí)需要傳遞數(shù)組作為參數(shù)值,下面通過實(shí)例代碼給大家介紹jQuery Ajax向服務(wù)端傳遞數(shù)組參數(shù)值的方法，一起看看吧

在使用MVC時(shí)，向服務(wù)器端發(fā)送POST請(qǐng)求時(shí)有時(shí)需要傳遞數(shù)組作為參數(shù)值

下面使用例子說明，首先看一下Action

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

方式一，構(gòu)造表單元素，然后調(diào)用serialize()方法得到構(gòu)造參數(shù)字符串

@{
 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="發(fā)送請(qǐng)求" />
 </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>

調(diào)試模式監(jiān)視參數(shù)，當(dāng)點(diǎn)擊按鈕時(shí)，監(jiān)視得到的參數(shù)如下

方式二：使用JavaScript對(duì)象作為參數(shù)傳值，參數(shù)名是與Action方法對(duì)應(yīng)的參數(shù)名，參數(shù)值是JavaScript數(shù)組

@{
 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="發(fā)送請(qǐng)求" />
 </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作為參數(shù)請(qǐng)求，此時(shí)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="發(fā)送請(qǐng)求" />
 </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>