将复杂表单输入对象序列化为 JSON 以发出 API 请求

Question

我有一个表单，我想将其输入提交给 API 以获得可解析的响应。到目前为止，我已经设法使用预先格式化的对象执行请求。但是，我很难获得发出请求所需的格式。

请求的结构需要如下所示：

{ "request": { "slice": [ { "origin": "LAX", "destination": "BOS", "date": "2015-09-09" } ], "passengers": { "adultCount": 1 }, "solutions": 1 } };

我更改了表单的名称以尝试创建嵌套键，但我得到的是：

{"request[slice][origin]":"LAX","request[slice][destination]":"BOS","request[slice][date]":"2015-09-09","request[passengers][adultcount]":"1","request[solutions]":"1"}

表单如下所示：

<form id="request" action="" onsubmit="request" method="post">
<input type="text" name="request[slice][origin]" placeholder="From">
<br>
<input type="text" name="request[slice][destination]" placeholder="Destination">
<br>
<input type="text" name="request[slice][date]" placeholder="Outbound Date">
<br>
<input type="text" name="request[passengers][adultcount]" placeholder="Passengers">
<br>
<input type="text" name="request[solutions]" placeholder="Results">
<br>
<p><input type="submit" /></p>
</form>

序列化对象的脚本是：

<script>
$.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 request() {
$('form').submit(function() {
    $('#result').text(JSON.stringify($('form').serializeObject()));
    return false;
});
});
</script>

Answer 1

serializeObject 方法仅适用于具有正常输入的元素。但在您的情况下，输入具有不同类型的名称，因此 serializeObject 必须稍作更改。

$.fn.serializeObject = function () {
    var o = {};
    var outputCopy = o;
    var a = this.serializeArray();
    var regex = /(\w+)+/g; 
    $.each(a, function (index, item) {
        var keys = item.name.match(regex);
        keys.forEach(function (key, localIndex) {
            if (!outputCopy.hasOwnProperty(key)) {
                outputCopy[key] = {};
            }
            if(localIndex == keys.length - 1) { 
                outputCopy[key] = isNaN(item.value) ? item.value : +item.value;
            }
            outputCopy = outputCopy[key];
        });
        outputCopy = o;
    });
    return o;
});

我使用正则表达式将字符串 request[slice][destination] 分解为请求、切片和目标，从而创建了一个对象。

最深对象的键将有一个值。条件 localIndex == keys.length - 1 用于找出最后一次迭代，从而插入一个值。

希望这对您有所帮助。

更新

通过isNaN检查该值是字符串还是数字，然后进行相应的转换。 + 如果字符串是数字，则将其转换为数字。

这里不错reference

$.fn.serializeObject = function () {
    var o = {};
    var outputCopy = o;
    var a = this.serializeArray();
    var regex = /(\w+)+/g;
    $.each(a, function (index, item) {
        var keys = item.name.match(regex);
        keys.forEach(function (key, localIndex) {
            if (!outputCopy.hasOwnProperty(key)) {
                outputCopy[key] = {};
            }
            if(localIndex == keys.length - 1) { 
                outputCopy[key] = isNaN(item.value) ? item.value : +item.value; 
            }
            outputCopy = outputCopy[key];
        });
        outputCopy = o;
    });
    return o;
};


$(function request() {
    $('form').submit(function (e) {
        e.preventDefault();
        alert(JSON.stringify($(this).serializeObject()));
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form id="request" action="" onsubmit="request" method="post">
    <input type="text" name="request[slice][origin]" placeholder="From">
    <br>
    <input type="text" name="request[slice][destination]" placeholder="Destination">
    <br>
    <input type="text" name="request[slice][date]" placeholder="Outbound Date">
    <br>
    <input type="text" name="request[passengers][adultcount]" placeholder="Passengers">
    <br>
    <input type="text" name="request[solutions]" placeholder="Results">
    <br>
    <p>
    <input type="submit" />
    </p>
</form>

将复杂表单输入对象序列化为 JSON 以发出 API 请求

Serialize Complex Form Input Object to JSON to Make API Request

forms

jquery

serialization

json

stringify

更新