将表单转换为JSON的错误

时间:2014-05-21 01:47:59

标签: jquery ajax json

有两个问题通过jQuery .ajax方法fiddle is here提交表单作为JSON。使用我当前的函数来获取表单数据,我得到错误' Uncaught TypeError:将循环结构转换为JSON'并且相信它是由于在表格中提交日期选择器的日期。

  

来自json.org:"值可以是双引号中的字符串,或数字,或true或false或null,或对象或数组。这些结构可以嵌套。"

我似乎也无法获得正确的格式,我需要提交这样的数据:

{
    "type": "value",
    "identification": {
        "ssn": "value"
    },
    "date_of_birth": "value",
    "name": {
        "first": "value",
        "middle": "value",
        "last": "value"
    },
    "address": {
        "street1": "value",
        "street2": "value",
        "city": "value",
        "state": "value",
        "postal_code": "value",
        "country_code": "value"
    }
}

并且不确定如何获得嵌套的父,子和孙嵌套。这是我转换为JSON功能:

function ConvertFormToJSON(form) {
    var array = $(form).serializeArray();
    var json = {};

    $.each(array, function(){
    json[this.name] = this.value || '';
});
  return json;
}

这是我对提交的尝试

$('#USForm').validate({
    errorLabelContainer: "ul#msgBox",
    wrapper: "li",


    submitHandler: function(form) {

        var form = this;
        var json = ConvertFormToJSON(form);
        $.ajax({
          type:'POST',
          url:'http://ec2-54-201-216-39.us-west-2.compute.amazonaws.com/testc/WebService.asmx?op=VerifyIdentityJson',
          crossDomain:true,
          data: json,
          dataType : 'json'
        })
        .always(function(){
          console.log("always:" + json);
        })
        .done(function (response){
          console.log("done:" + json);
        })
        .fail(function(){
         console.log("fail" + json);
        });
        return false;
    },
    rules: {
        //rules
    },
    messages: {
      //messages
});

1 个答案:

答案 0 :(得分:1)

第一个参数( form )为我返回validator个实例。它的currentForm属性为您提供当前的form元素。

为了创建JSON结构,我建议使用标识符对表单控件进行分组,我在下面的演示中使用了data-group属性:

<input type="hidden" data-group="address" name="country_code" id="country_code" value="US">

然后你可以使用循环创建一个对象:

// Please do not use a StudlyCase name for a non-Constructor function
function ConvertFormToJSON(form) 
{
    var elems = [].slice.call(form.elements);
    var o = {};
    $.each(elems, function() {
        var $this = $(this), 
            g = $this.data('group');

         // if the current element has data-group attribute
        if (g) {
            // if the object doesn't have `group` property yet
            // create an object so we can set a property to it later
            if ( !o.hasOwnProperty(g) ) {
               o[g] = {};
            } 
            o[g][this.name] = this.value;
        } else {
           // otherwise set a top level property
           o[this.name] = this.value;
        }
    });

    return o;
}

请注意,我操纵了rules属性只是为了通过验证。

http://jsfiddle.net/4nLLM/