js Form表单转json格式，及后台接收（多种方法）

转载：https://blog.csdn.net/qq_40138785/article/details/81533015

一、serialize()方法
格式：var data = $("#formID").serialize();

功能：将表单内容序列化成一个字符串。

注意：要使用params = decodeURIComponent(data ,true)进行解码，不然中文数据会乱码。

数据示例：Name=小明&Age=22&Sex=男

后台：获取字符串后，可以到后台进行处理数据。

二、serializeArray()方法，有三种数据传递
第一种json数组类型，后台反序列化json数据：
格式：var strdata = $("#formID").serializeArray();

功能：将表单序列化成一个JSON结构的对象。数组类型。

数据示例：(3)[{name:"Name",value:"小明"},{name:"Age",value:"22"},{name:"Sex",value:"男"}] 获取数据为 data [0].name

通过JSON.stringify()方法，将json数据转成string类型，供后台接收。

转换类型：var str=  JSON.stringify(strdata )；//转换成string数据，以便后台接收

数据示例：”[{name:"Name",value:"小明"},{name:"Age",value:"22"},{name:"Sex",value:"男"}]”//数组类型

前台：

var arry = $("#form1").serializeArray();

$.ajax({
url: "/Login/Index",
data: { jsondata: JSON.stringify(arry) },
type:"post",
success: function () {
alert("success");
}
})
}
后台：

using Newtonsoft.Json；//引用dll  

using Newtonsoft.Json.Linq;

自定义类： 

public class People
{
public People() { }//构造函数用于初始化数据。
public string Name { set; get; }
public int Age { get; set; }
public string Sex { get; set; }
//因为传进来的json是[{name:"Name",value:"小明"},...]这种类型所以新增name，value字段。
public string name { set; get; }
public string value { set; get; }

}
   

public ActionResult Index(string jsondata)
{

JArray jarry = (JArray)JsonConvert.DeserializeObject(jsondata);//json数据转换成数组

List<string> list = new List<string>();//实例化对象
for (int i = 0; i < jarry.Count; i++)//循环获取数据
{
list.add(jarry[i]["name"],jarry[i]["value"]);
}
return View();
｝


//或者
public ActionResult Index(string jsondata)
{
List<People> list = new List<People>();//循环获取数据
Dictionary<string, string> dic = new Dictionary<string, string>();//接收重新整理的数组数据
List<People> twoList = JsonConvert.DeserializeObject<List<People>>(jsondata);//反序列化json数组数据
for (int i = 0; i < twoList.Count; i++)//将数据整理并循环放入Dictionary中
{
dic[twoList[i].name] = twoList[i].value;
}
list.Add(new People { Name = dic["Name"], Age = int.Parse(dic["Age"]), Sex = dic["Sex"] });//赋值
return View();
}
                      //获取数据成功

第二种json对象类型数据，后台反序列化json数据：
var obj={};//给obj分配内存

for(var i =0;i<strdata .length;i++)

{

obj[strdata [i].name]=strdata [i]['value'];

}

var str=  JSON.stringify(strdata )；//转换成string数据

数据示例:{Name:"小明",Age:"22",Sex:"男"}//对象类型

前台：

后台：

//引用dll

 //创建自定义类，注意自定义字段必须包含传来的字段名称。

 //反序列化json数据

//成功获取数据

另外一种方法是在前台进行数据整理，后台用自定义类来接收数据。
前台：

var arry = $("#form1").serializeArray();//序列化表单
var obj = {};//分配内存空间
for (var i = 0; i < arry.length; i++) {//数据类型为"自定义类的字段名=数据"后台会自动对数据进行匹配
obj[arry[i].name] = arry[i].value;
}
$.ajax({
url: "/Login/Index",
data:obj,//传递数据
type:"post",
success: function (data) {
alert("success");
}
})
后台：自定义类

public class People
{
public People() { }//构造函数用于初始化数据。
private string _Name;//私有成员变量
private int _Age;
private string _Sex;
public string Name
{

set { _Name = value; }
get { return _Name; }
}
public int Age
{
get { return _Age; } //读取器
set { _Age = value; }//写入器
}

public string Sex
{
get { return _Sex; }
set { _Sex = value; }
}
}
public ActionResult Index(People peo)
{
return View();
}
  接收数据成功

当然这几种方式都可以传递数据，选择那种就看个人的需要了。