码迷,mamicode.com
首页 > Web开发 > 详细

给ajax表单提交数据前面加上实体名称

时间:2017-08-31 11:06:20      阅读:199      评论:0      收藏:0      [点我收藏+]

标签:htm   color   for   input   后台   splay   结构   技术交流   info   

有时候我们后台做了一个引用类型例如:

下面的实体以C#为例

public class Order{

    public string orderId{get;set;}
    
    public OrderItem orderItem{get;set;}
}

public class OrderItem{
    
    public string productName{get;set;}
public decimal price{get;set;} }

前台页面的html结构:

 

<form id="form1">
    <input type="text" name="productName" value="milk" />
    <input type="text" name="price" value="1.43" />    
    <input type="submit" name="submit" value="submit" />
</form>

 

后台在获取OrderItem的时候我们期望提交的数据格式是

{orderItem.productName:"",orderItem.price:""}

首先我们先回收表单的数据这里给一jquery的插件

 

技术分享
;(function ($) {
    $.fn.serializeJson = function () {
        var serializeObj = {}
        var array = this.serializeArray()
        var str = this.serialize()
        $(array).each(function () {
            if (serializeObj[this.name]) {
                if ($.isArray(serializeObj[this.name])) {
                    serializeObj[this.name].push(this.value)
                } else {
                    serializeObj[this.name] = [serializeObj[this.name], this.value]
                }
            } else {
                serializeObj[this.name] = this.value
            }
        })
        return serializeObj
    }
})(jQuery);
View Code

 

var formParam=$("#form1").serializeJson();
console.log(JSON.stringify(formParam))

 

 控制台输出{"orderItem":{"productName":"milk","price":"1.45"}}

然后我们思考 orderItem.productName 肯定是对象的子对象才能用.操作符

例如{"UserInfo":{"clsName":"one","name":"li yang"}} 访问UserInfo的name属性就可以用UserInfo.name

好了得到了解决思路了

 

var formParam=$("#form1").serializeJson();
console.log(JSON.stringify(formParam))
console.log($.param(formParam))

 

控制台输出:

{"orderItem":{"productName":"milk","price":1.43}}

orderItem%5BproductName%5D=milk&orderItem%5Bprice%5D=1.43

 

 如果您有更好的解决方法欢迎留言讨论或者加入下面的QQ群来交流讨论

 技术交流QQ群:15129679

给ajax表单提交数据前面加上实体名称

标签:htm   color   for   input   后台   splay   结构   技术交流   info   

原文地址:http://www.cnblogs.com/yeminglong/p/7456885.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!