数据提交
HTTP 协议是以 ASCII 码传输，建立在 TCP/IP 协议之上的应用层规范。
规范把 HTTP 请求分为三个部分：状态行、请求头、消息主体。类似于下面这样：
BASH<method> <request-URL> <version>
<headers>
<entity-body>
协议规定 POST 提交的数据必须放在消息主体（entity-body）中，但协议并没有规定数据必须使用什么编码方式。实际上，开发者完全可以自己决定消息主体的格式，只要最后发送的 HTTP 请求满足上面的格式就可以。但是，数据发送出去，还要服务端解析成功才有意义。一般服务端语言如 php、python 等，以及它们的 framework，都内置了自动解析常见数据格式的功能。
服务端通常是根据请求头（headers）中的 Content-Type 字段来获知请求中的消息主体是用何种方式编码，再对主体进行解析。
四中常用地数据提交方式
| 值 | 描述 |
|---|---|
| application/x-www-form-urlencoded | 在发送前编码所有字符（默认） |
| multipart/form-data | 不对字符编码。在使用包含文件上传控件的表单时，必须使用该值 |
| text/plain | 空格转换为 "+" 加号，但不对特殊字符编码。 |
| application/json | 用来告诉服务端消息主体是序列化后的 JSON 字符串 |
-
js提交一个对象，默认情况下提交方式Content-Type 被指定为 application/x-www-form-urlencoded；按照Form Data格式的数据提交，processData默认是true，提交的数据会转变为查询字符串的形式key1=val1&key2=val2，并对key 和 val 都进行了 URL 转码。此种方式提交的数据服务端可以通过mvc命名匹配规则取得数据，也可以通过FormCollection获取数据。
-
js提交一个复杂对象，如果把Content-Type指定为application/json方式提交，那么得到的是出错的信息。因为它在尝试将一个查询字符串格式的数据作为json字符串提交，原因见上面。此时我们需要设置processData为fasle禁止将数据转成查询字符串，此时还是有可能会报错，因为我们提交的是一个json对象，我们还需要将这个json对象转为json字符串JSON.stringify(person)，这样就可以提交了
-
这里需要注意的是：当Content-Type指定为application/json方式的时候，数据将不再按照Form Data的形式提交了，而是变成Request Data的形式提交，Form Data提交的数据可以由FormCollection获得到。Request Data方式提交的则不能通过FormCollection获得。简单数据类型有时候不指定contentType也能通过命名匹配传值，复杂数据类型则要指定contenttype为application/json设置processData为false，同时需要注意提交数据本身的格式要与contenttype相匹配
前台数据提交
JSON.stringify(json_obj) 将一个对象转换为json字符串
JSON.parse(json_str) 讲一个json字符串转为对象
<div class="view">
<fieldset>
<legend contenteditable="true">表单项</legend>
<label contenteditable="true">用户名</label>
<input id="uname" type="text" placeholder="Type something…">
<label contenteditable="true">邮箱</label>
<input id="email" type="text" placeholder="email">
<span class="help-block" contenteditable="true">条款信息.</span>
<label class="checkbox" contenteditable="true">
<input id="clause" type="checkbox" value="0">勾选同意
</label>
<button type="submit" class="btn" id="sub" contenteditable="true">提交</button>
</fieldset>
</div>
<div class="viewlist">
<ul id="userinfo">
</ul>
</div>
@Scripts.Render("~/Scripts/jquery-1.8.2.min.js")
<script type="text/javascript">
$(function () {
/******1 简单数据提交 并渲染******/
$("#sub").click(function () {
var uname = $("#uname").val();
var email = $("#email").val();
var par = { "username": uname, "email": email };
$.post("Index/DoRegister", par, function (data) {
if (data != null && data!="") {
$("#userinfo").append("<li>用户名：" + data.username + ",email:+" + data.email+ " </li>");
}
});
});
/******* 复杂数据提交 并渲染******/
var jsondata = { p1: [], p2: [] }
//静态构造复杂对象
var personslist1 = [{
Name: "001",
Sex: "女",
Age: "18",
Position: [
{ City: "shanghai", HouseNumber: "111" },
{ City: "beijing", HouseNumber: "002" }
],
FrientList: new Array("a", "b", "c")
}, {
Name: "peter",
Sex: "男",
Age: "20",
Position: [
{ City: "shanghai", HouseNumber: "111" },
{ City: "南昌", HouseNumber: "201" }
],
FrientList: new Array("a", "b", "c")
}];
//动态构造复杂对象
var personslist2 = new Array();
var pos = new Array();
pos.push({ City: "shanghai", HouseNumber: "111" });
pos.push({ City: "beijing", HouseNumber: "002" });
personslist2.push({
Name: "001",
Sex: "女",
Age: "18",
Position: pos,
FrientList:new Array("a","b","c")
});
personslist2.push({
Name: "002",
Sex: "男",
Age: "28",
Position: pos,
FrientList: new Array("e", "b", "m")
});
//请求对象
jsondata.p1 = personslist1;
jsondata.p2 = personslist2;
//发起请求 页面渲染
var option = {
url: '/Index/ComplexRequest',
type: 'POST',
data: JSON.stringify(jsondata),
dataType: 'html',
contentType: 'application/json',
success: function (result) {
alert(result);
if (result != null && result != "") {
//将返回的json字符串数据转为json对象
$.each(JSON.parse(result), function (i, n) {
var html = "<li>用户名：" + n.Name + ",email:+" + n.Sex;
var endhtml = "</ul></li>";
var frhtml = "朋友:<ul>";
$.each(n.FrientList, function (e, f) {
frhtml += "<li>" + f + "</li>";
});
$("#userinfo").append(html + frhtml + endhtml);
});
}
}
};
$.ajax(option);
//mock对象
$("#objbtn").click(function () {
mockobj();
});
});
function mockobj()
{
var obj = {
"OrderID": 3054689134,
"RebookID": 2147991959,
"ReschedulePaymentInfo": {
"PaymentTotalPrice": 94,
"PaymentCardFee": 0,
"ExchangeRate": 1,
"Currency": "CNY",
"BusType": 7503,
"MerchantInfo": "{\"MerchantId\":\"200204\",\"blacklist\":\"\",\"whitelist\":\"\"}",
"IsRealTimePay": 1,
"IsPayToCBU": 1,
"PaymentTotalPriceNoCardFee": 94,
"PriceDetails": []
},
"TransactionID": "2517110120000001001",
"ExternalNo": "798ef3d8a3c2465a8f6fc2989beb8e24",
"ResultCode": 0,
"PaymentMethod": {
"EnabledPayCatalog": "CreditCard",
"EnableTicketPay": 1,
"TicketType": "3",
"IsPreAuthorization": 0,
"IsPayToCBU": 1,
"IsRealTimePayOn": 1,
"PayType": 6,
"SubType": 263,
"AppPayID": 7503
}
};
//将一个json对象转为json字符串提交，然后返回一个对象
//将一个json字符串转为对象用 JSON.parse
$.post('Index/DoMock', { data: JSON.stringify(obj) }, function (response) {
alert(JSON.stringify(response));
alert(response.MerchantInfo);
});
}
</script>
c# 代码
public class Person
{
public string Name { get; set; }
public string Sex { get; set; }
public string Age { get; set; }
public List<Address> Position { get; set; }
public List<string> FrientList { get; set; }
public class Address
{
public string City { get; set; }
public string HouseNumber { get; set; }
}
}
public class IndexController : Controller
{
public ActionResult DoRegister(string username, string email)
{
return Json(new { username = username, email = email, d = "213" });
}
public ActionResult ComplexRequest(List<Person> p1, List<Person> p2)
{
return Json(p2);
}
public JsonResult DoMock(string data)
{
string json = data;
//string json = "{\"OrderID\":3054689134,\"RebookID\":2147991959,\"ReschedulePaymentInfo\":{\"PaymentTotalPrice\":94,\"PaymentCardFee\":0,\"ExchangeRate\":1,\"Currency\":\"CNY\",\"BusType\":7503,\"MerchantInfo\":\"{\\\"MerchantId\\\":\\\"200204\\\",\\\"blacklist\\\":\\\"\\\",\\\"whitelist\\\":\\\"\\\"}\",\"IsRealTimePay\":1,\"IsPayToCBU\":1,\"PaymentTotalPriceNoCardFee\":94,\"PriceDetails\":[]},\"TransactionID\":\"2517110120000001001\",\"ExternalNo\":\"798ef3d8a3c2465a8f6fc2989beb8e24\",\"ResultCode\":0,\"PaymentMethod\":{\"EnabledPayCatalog\":\"CreditCard\",\"EnableTicketPay\":1,\"TicketType\":\"3\",\"IsPreAuthorization\":0,\"IsPayToCBU\":1,\"IsRealTimePayOn\":1,\"PayType\":6,\"SubType\":263,\"AppPayID\":7503}}";
var response = JsonConvert.DeserializeObject<Root>(json);
return Json(response);
}
}
