将表单数据转换为JSON对象

Question

我试图将 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;
    });
});

我尝试进行调试，发现当我的函数运行时，它总是执行else语句中的代码。

- Muaz Usmani

---

小提示：如果你使用的是带有调试控制台的浏览器，请使用console.log(myData)来调试，而不是使用alert()。它足够聪明，可以打印出对象和其他所有内容！ - HellaMad

当您检查o[this.name]是否已定义时，似乎缺少typeof。 - Sigismund

你有检查过这个链接吗：https://dev59.com/f3M_5IYBdhLWcg3w4nfb#39248551 - Bhavik Hirani

你可以使用以下代码：JSON.stringify(Object.fromEntries(formData)); - Mohammad Badiuzzaman

Answer 1

我在JSFiddle中添加了上面的表单，它将JSON数据显示为输出。

有效的JSFiddle链接

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

- Dave

---

好的 jsfiddle 演示！对我有用。 - Deepu

所有字段都可以，除了图片。JSON对象中没有图片。 - Buddhika Alwis

Answer 2

使用这个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 对象。

- simanacci

---

这个问题现在有没有使用 es6 的正确方法？还是 jQuery 插件仍然是最好的选择？ - Oneezy

@Oneezy，请查看此链接：https://dev59.com/HlgR5IYBdhLWcg3wV8Pe#46774073 - simanacci

Answer 3

示例：http://jsbin.com/oTimiGE/1/edit

尝试使用 jQuery 的 serializeArray() 方法。

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

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

- Amith

Answer 4

对于谷歌搜索者，

我已经创建了一个序列化表单的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)

- Shree Krishna

Answer 5

$.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;
    });
});

- Pramod Sangawar

---

对我有用 var myForm = document.getElementById("form"); var formData = new FormData(myForm), obj = {}; for (var entry of formData.entries()){ obj[entry[0]] = entry[1]; } console.log(obj); - Shahid Hussain Abbasi

Answer 6

或许只需要使用jQuery的序列化函数？

$("#myform").serialize()

一旦您获得了JSON对象，您可以稍后进行其他处理。

- cam

---

它是作为查询字符串而不是 JSON 进行编码的，对吗？ - McGarnagle

使用 console.log($("#myform").serialize()); 来查看！ - HellaMad

var myForm = document.getElementById("form"); var formData = new FormData(myForm), obj = {}; for (var entry of formData.entries()){ obj[entry[0]] = entry[1]; } console.log(obj);经过测试，这段代码对我有效。它获取了一个名为“form”的表单元素，并使用FormData对象将其转换为键值对的形式。然后，通过循环遍历这些键值对，将它们存储在一个JavaScript对象中，并将该对象输出到控制台。 - Shahid Hussain Abbasi