将表单数据转换为 JSON 对象 [重复]

Posted 2023-02-22

【中文标题】将表单数据转换为 JSON 对象 [重复]

【英文标题】：Convert form data to JSON object [duplicate]

【发布时间】：2012-10-09 14:33:36

【问题描述】：

我正在尝试将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;
    );
);

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

【问题讨论】：

只是提示，如果您使用带有调试控制台的浏览器，请使用它来调试，而不是 alert(): console.log(myData)。它足够聪明，可以打印出物体和所有东西！

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

你检查过这个吗：***.com/questions/1184624/…

可以用这个，JSON.stringify(Object.fromEntries(formData));

【参考方案1】：

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

Working JSFiddle

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

【讨论】：

很好的 jsfiddle 演示！为我工作

所有字段都可以，除了图片，json对象没有图片

【参考方案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 对象。

【讨论】：

这些天有没有合适的方法来使用es6 做到这一点？还是 jQuery 插件仍然是最好的选择？ ?

@Oneezy 检查此***.com/a/46774073/4675937

【参考方案3】：

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

试试jqueryserializeArray()方法

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

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

【参考方案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)

【参考方案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;
    );
);

【讨论】：

为我工作 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);

【参考方案6】：

也许只使用 jquery 序列化功能？

$("#myform").serialize()

拥有 JSON 对象后，您可以稍后进行其他处理。

【讨论】：

我认为编码为查询字符串而不是 JSON，不是吗？

@dbaseman 使用console.log($("#myform").serialize());查看！

为我工作 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);