• 数据提交


    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 字符串

    1. js提交一个对象,默认情况下提交方式Content-Type 被指定为 application/x-www-form-urlencoded;按照Form Data格式的数据提交,processData默认是true,提交的数据会转变为查询字符串的形式key1=val1&key2=val2,并对key 和 val 都进行了 URL 转码。此种方式提交的数据服务端可以通过mvc命名匹配规则取得数据,也可以通过FormCollection获取数据。

    2. js提交一个复杂对象,如果把Content-Type指定为application/json方式提交,那么得到的是出错的信息。因为它在尝试将一个查询字符串格式的数据作为json字符串提交,原因见上面。此时我们需要设置processData为fasle禁止将数据转成查询字符串,此时还是有可能会报错,因为我们提交的是一个json对象,我们还需要将这个json对象转为json字符串JSON.stringify(person),这样就可以提交了

    3. 这里需要注意的是:当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);
            }
        }
    
  • 相关阅读:
    编译原理-确定有穷自动机(deterministic finite automata ,DFA)
    编译原理-正规式和正规集
    linux之sed用法
    Linux 中find命令
    运维工作应该掌握哪些技能?
    Last_SQL_Error: Error 'Can't drop database
    关于在centos下安装python3.7.0以上版本时报错ModuleNotFoundError: No module named '_ctypes'的解决办法
    python3.7安装, 解决pip is configured with locations that require TLS/SSL问题
    Linux date命令的用法(转)
    MySQL回滚到某一时刻数据的方法
  • 原文地址:https://www.cnblogs.com/shaner/p/7887035.html
Copyright © 2020-2023  润新知