将表单数据转换为JSON对象

Question

我试图将HTML表单数据转换为JSON对象，我有this thread，但我不知道为什么它不适用于我。我正在使用下面的代码。

<form id="myform" action="" method="post"> 
    <div class="form-field"> 
     <label for="title">Title</label> 
     <input name="title" id="title" type="text" value="" size="40" aria-required="true"> 
    </div> 
    <div class="form-field form-required"> 
     <label for="your-name">Your Name</label> 
     <input name="yourName" id="yourName" type="text" value="" size="40" aria-required="true"> 
    </div> 
    <div class="form-field"> 
     <label for="contact-no">Contact No:</label> 
     <input name="contact" id="contact" type="text" value="" size="40" aria-required="true"> 
    </div> 
    <div class="form-field"> 
     <label for="description">Description:</label> 
     <textarea name="description" id="description" rows="1" cols="40" aria-required="true"></textarea> 
    </div> 
    <div class="form-field"> 
     <label for="email">Email:</label> 
     <input name="email" id="email" type="text" value="optional" size="40" aria-required="true"> 
    </div> 
    <div class="form-field"> 
     <label for="city">City:</label> 
     <input name="city" id="city" type="text" value="" size="40" aria-required="true"> 
    </div> 
    <div class="form-field"> 
     <label for="country">Country:</label> 
     <input name="country" id="country" type="text" value="" size="40" aria-required="true"> 
    </div> 
    <div class="form-field"> 
     <label for="pic1">Picture 1:</label> 
     <input type="file" name="pic1" id="pic1"> 
    </div> 
    <div class="form-field"> 
     <label for="pic2">Picture 2:</label> 
     <input type="file" name="pic2" id="pic2"> 
    </div> 
    <div class="form-field"> 
     <label for="pic3">Picture 3:</label> 
     <input type="file" name="pic3" id="pic3"> 
    </div> 
    <div class="form-field"> 
     <label for="pic4">Picture 4:</label> 
     <input type="file" name="pic4" id="pic4"> 
    </div> 
    <div class="form-field"> 
     <label for="pic5">Picture 5:</label> 
     <input type="file" name="pic5" id="pic5"> 
    </div> 
    <div class="form-field"> 
     <label for="demand">Your Demand:</label> 
     <input name="demand" id="demand" type="text" value="" size="40" aria-required="true"> 
    </div> 
    <p class="submit"> 
     <input type="submit" name="postAd" id="postAd" class="button" value="Post Ad For Review"> 
    </p> 
    <div id="results">hello</div> 
</form> 

 

$(document).ready(function(){ 
    $.fn.serializeObject = function() { 
     var o = {}; 
     var a = this.serializeArray(); 
     $.each(a, function() { 
      if (o[this.name] === undefined) { 
       if (!o[this.name].push) { 
        o[this.name] = [o[this.name]]; 
       } 
       o[this.name].push(this.value || ''); 
      } else { 
       alert(this.name); 
       o[this.name] = this.value || ''; 
      } 
     }); 
     return o; 
    }; 

    $('#myform').submit(function() { 
     $('#result').text(JSON.stringify($('#myform').serializeObject())); 
     return false; 
    }); 
}); 

我试图调试它，我注意到运行我的功能时，它始终在运行其他statment中的代码。

Answer 1

也许只是使用jquery序列化函数？

$("#myform").serialize() 

一旦您拥有JSON对象，您可以稍后再做其他处理。

Answer 2

$.fn.serializeObject = function() 
{ 
    var o = {}; 
    var a = this.serializeArray(); 
    $.each(a, function() { 
     if (o[this.name] !== undefined) { 
      if (!o[this.name].push) { 
       o[this.name] = [o[this.name]]; 
      } 
      o[this.name].push(this.value || ''); 
     } else { 
      o[this.name] = this.value || ''; 
     } 
    }); 
    return o; 
}; 

$(function() { 
    $('form').submit(function() { 
     $('#result').text(JSON.stringify($('form').serializeObject())); 
     return false; 
    }); 
}); 

Answer 3

工作Jsbin例如http://jsbin.com/oTimiGE/1/edit

试的jquery serializeArray()方法

http://api.jquery.com/serializeArray/

$('form').submit(function() { 
    console.log($(this).serializeArray()); 
    return false; 
}); 

Answer 4

我上述形式加入的jsfiddle并显示JSON数据作为输出。

Working JSFiddle

$(function() { 
    $('form').submit(function() { 
    $('#result').text(JSON.stringify($('form').serializeObject())); 
    return false; 
    }); 
}); 

Answer 5

使用此jQuery插件 .serializeJSON()表单数据转换成JSON对象。

<form id="my-profile"> 
<!-- simple attribute --> 
    <input type="text" name="fullName" value="Mario Izquierdo" /> 

<!-- nested attributes --> 
    <input type="text" name="address[city]" value="San Francisco" /> 
    <input type="text" name="address[state][name]" value="California" /> 
    <input type="text" name="address[state][abbr]" value="CA" /> 
</form> 

的Javascript：

$('#my-profile').serializeJSON(); 

// returns => 
{ 
    fullName: "Mario Izquierdo", 

    address: { 
    city: "San Francisco", 
    state: { 
    name: "California", 
    abbr: "CA" 
    } 
} 

serializeJSON()函数返回一个JSON对象。

Answer 6

对于谷歌搜索，

我创建JSON数组与序列化形式是这样，

var jsonArray = []; 

    var splittedFormData = $("#formToPost").serialize().split('&'); 

      $.each(splittedFormData, function (key, value) { 

       item = {}; 
       var splittedValue = value.split('=');    
       item["name"] = splittedValue[0]; 
       item["value"] = splittedValue[1]; 
       jsonArray.push(item); 
      }); 

    console.log(jsonArray)