jQuery 将表单数据转换为 JSON 对象
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12966433/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Convert form data to JSON object
提问by Muaz Usmani
I am trying to convert the HTMLform data into a JSONobject, I have this thread, but I don't know why it is not working for me. I am using the following code.
我正在尝试将HTML表单数据转换为JSON对象，我有这个线程，但我不知道为什么它对我不起作用。我正在使用以下代码。
<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;
});
});
I tried to debug it, and I noticed that when my function is run, it always runs the code within the else statment.
我试图调试它，我注意到当我的函数运行时，它总是运行 else 语句中的代码。
采纳答案by Dave
I added above form in JSFiddle and it displays JSON data as output.
我在 JSFiddle 中添加了上面的表单，它显示 JSON 数据作为输出。
$(function() {
$('form').submit(function() {
$('#result').text(JSON.stringify($('form').serializeObject()));
return false;
});
});
回答by simanacci
Use this jQuery plugin .serializeJSON()to convert form data to JSON object.
使用这个 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:
Javascript：
$('#my-profile').serializeJSON();
// returns =>
{
fullName: "Mario Izquierdo",
address: {
city: "San Francisco",
state: {
name: "California",
abbr: "CA"
}
}
serializeJSON()function returns a JSON object.
serializeJSON()函数返回一个 JSON 对象。
回答by Amith
Working Jsbin example http://jsbin.com/oTimiGE/1/edit
工作 Jsbin 示例http://jsbin.com/oTimiGE/1/edit
try jquery serializeArray()method
尝试 jqueryserializeArray()方法
http://api.jquery.com/serializeArray/
http://api.jquery.com/serializeArray/
$('form').submit(function() {
console.log($(this).serializeArray());
return false;
});
回答by Shree Krishna
For google searchers,
对于谷歌搜索者，
I've created JSON Array with serialized form like this,
我已经用这样的序列化形式创建了 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)
回答by Pramod Sangawar
$.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;
});
});
回答by noisewaterphd
Maybe just use the jquery serialize function?
也许只使用 jquery 序列化功能？
$("#myform").serialize()
You can do other processing later once you have the JSON object.
拥有 JSON 对象后，您可以稍后进行其他处理。
