深入学习jquery源码之序列化表单

深入学习jquery源码之序列化表单

serialize()

概述

序列表表格内容为字符串。

序列表表格内容为字符串，用于 Ajax 请求。

Results:  

  
    Single
    Single2
  
  
    Multiple
    Multiple2
    Multiple3
  
   check1
   check2
   radio1
   radio2

$("#results").append( "" + $("form").serialize() + "" );

  var paras = $submit_form.serialize();
  $.post(url, paras, function (data) {
                    if (data.code == 0) {
                        if(data.data != null) {
                            key = data.data["trainId"];
                            $("input[name='trainId']").val(key);
                        }
                        $Core.UI.message.success("保存成功！");
                        //关闭窗口
                        $('#btnquery', parent.document).click();
                    }
                    else {
                        $Core.UI.message.error(data.msg);
                    }
                });

 

 

serializeArray()

概述

序列化表格元素 (类似 '.serialize()' 方法) 返回 JSON 数据结构数据。

'''注意'''，此方法返回的是JSON对象而非JSON字符串。需要使用插件或者第三方库进行字符串化操作。

返回的JSON对象是由一个对象数组组成的，其中每个对象包含一个或两个名值对——name参数和value参数（如果value不为空的话）。举例来说：

 [ 
     {name: 'firstname', value: 'Hello'}, 
     {name: 'lastname', value: 'World'},
     {name: 'alias'}, // this one was empty
  ]

取得表单内容并插入到网页中。

Results: 

  
    Single
    Single2
  
  
    Multiple
    Multiple2
    Multiple3
  
   check1
   check2
   radio1
   radio2

var fields = $("select, :radio").serializeArray();
jQuery.each( fields, function(i, field){
  $("#results").append(field.value + " ");
});

 

序列化表单

    
-----------------前台序列化表单封装数据JSON.stringify----------------------
	$("#btnAdd").click(function () {
        if ($submit_form.form("validate")) {
            var url = add_url;
            if (key){
                url = upd_url;
            }
            var paras = $submit_form.serializeArray();
            var rows2 = $("#dglist2").gridsub("getRows");
            var p2 = [];
            var flag=true;
            $.each(rows2, function (k, j) {
                var temp2 = { deviceId: j.deviceId, deviceName: j.deviceName, deviceNumber: j.deviceNumber, assetsNumber: j.assetsNumber, deviceSpec: j.deviceSpec, propertyAscription: j.propertyAscription, company: j.company, number: j.number, installMoney: j.installMoney, total: j.total, installCheckId: key,unitMoney:j.unitMoney,manufacturer:j.manufacturer};
                
                p2.push(temp2);
            });
            paras.push({ 'name': "acceptdetails", value: JSON.stringify(p2) });
            if(flag){
                $("#btnSave").attr("disabled", "disabled");
                $.post(url, paras, function (data) {
                    $("#btnAdd").removeAttr("disabled");
                    if (data.code == 0) {
                    	/*$Core.UI.message.success("操作成功！");
                    	$('#btnAdd').attr('disabled',"true");*/
                    	
                        if(data.data != null) {
                            key = data.data["deviceInstallCheckId"];
                            $("input[name='deviceInstallCheckId']").val(key);
                        }
                        $Core.UI.message.success("保存成功！");
                        //关闭窗口
                       /* $('.panel-tool-close', parent.document).each(function (j, k) {
                            k.click();//这样是关闭所以窗口
                        });*/
                        $('#btnquery', parent.document).click();
                    	
                    }
                    else {
                        $Core.UI.message.error(data.msg);
                    }
                });
            }

        }
    });
	
-------------------------后台接收数据并解析--------------------------------
	@Override
	public InstallCheck auditedThreePublicUser(InstallCheck installCheck, String acceptdetails,SessionData currUserData) {
		// TODO Auto-generated method stub
		if ("6".equals(installCheck.getApproveState())) {
			//审批通过
			
			//获取序列化的数据插入到se_install_check_item
			if(StringUtil.isNotEmpty(acceptdetails)) {
				 List installCheckItems = JSONArray.parseArray(acceptdetails, InstallCheckItem.class);
				for (InstallCheckItem detail : installCheckItems) {
					installCheckItemMapper.updateByPrimaryKeySelective(detail);
				}		
			}	
		}
	

p2

JSON.stringify(p2) 变为json串

[{"deviceId":null,"deviceName":"3,mon","deviceNumber":"分隔","assetsNumber":"大锅饭","deviceSpec":"dhd","propertyAscription":"2","company":"发动","number":213,"installMoney":321,"total":14,"installCheckId":"12","unitMoney":312,"manufacturer":"给对方22"},{"deviceId":"","deviceName":"2,assis","deviceNumber":"发生","assetsNumber":"发生","deviceSpec":"as","propertyAscription":"1","company":"请问","number":"123","installMoney":"41","total":"312","installCheckId":"12","unitMoney":"41","manufacturer":"阿发"}]

jsonArray.parseArray()

 

 

 

jQuery.parseJSON(json)

概述

接受一个JSON字符串，返回解析后的对象。

传入一个畸形的JSON字符串会抛出一个异常。比如下面的都是畸形的JSON字符串：

• {test: 1} （ test 没有包围双引号）
• {'test': 1} （使用了单引号而不是双引号）

另外，如果你什么都不传入，或者一个空字符串、null或undefined，parseJSON都会返回 null 。

参数

json String

要解析的JSON字符串

解析一个JSON字符串

var obj = jQuery.parseJSON('{"name":"John"}');
alert( obj.name === "John" );

var cookieuser;
 try {
  cookieuser = $.parseJSON(cookieData);
  } catch (e) {
  //window.location.href = TIMEOUT_PATH;
    return {};
  }

 

jQuery.parseXML(data)

概述

解析一个字符串到一个XML文件。

jQuery.parseXML使用原生解析函数浏览器创建一个有效的XML文档。这文档可以被传递给jQuery创建一个典型的jQuery对象，可以查询及操作。

参数

data 

用来解析的格式良好的XML字符串。

创建一个jQuery对象使用一个XML字符串并得到标题节点的值。:

var xml = 'RSS Title',
      xmlDoc = $.parseXML( xml ),
      $xml = $( xmlDoc ),
      $title = $xml.find( 'title' );	        // append "RSS Title" to #someElement
  $( '#someElement' ).append( $title.text() );	    // change the title to "XML Title"
  $title.text( 'XML Title' );    // append "XML Title" to #anotherElement
  $( '#anotherElement' ).append( $title.text() );

 

jquery源码

    var r20 = /%20/g,
        rbracket = /\[\]$/,
        rCRLF = /\r?\n/g,
        rsubmitterTypes = /^(?:submit|button|image|reset|file)$/i,
        rsubmittable = /^(?:input|select|textarea|keygen)/i;

    function buildParams(prefix, obj, traditional, add) {
        var name;

        if (jQuery.isArray(obj)) {
            // Serialize array item.
            jQuery.each(obj, function (i, v) {
                if (traditional || rbracket.test(prefix)) {
                    // Treat each array item as a scalar.
                    add(prefix, v);

                } else {
                    // Item is non-scalar (array or object), encode its numeric index.
                    buildParams(prefix + "[" + (typeof v === "object" ? i : "") + "]", v, traditional, add);
                }
            });

        } else if (!traditional && jQuery.type(obj) === "object") {
            // Serialize object item.
            for (name in obj) {
                buildParams(prefix + "[" + name + "]", obj[name], traditional, add);
            }

        } else {
            // Serialize scalar item.
            add(prefix, obj);
        }
    }

    // Serialize an array of form elements or a set of
    // key/values into a query string
    jQuery.param = function (a, traditional) {
        var prefix,
            s = [],
            add = function (key, value) {
                // If value is a function, invoke it and return its value
                value = jQuery.isFunction(value) ? value() : (value == null ? "" : value);
                s[s.length] = encodeURIComponent(key) + "=" + encodeURIComponent(value);
            };

        // Set traditional to true for jQuery