将表单序列化为带有数值的 json

Question

所以这是一个常见问题，但我还没有找到如何从表单创建 json 正文，值上没有引号但在属性中。

我想创建一个如下所示的 JSON 正文。

{
"salary1":20100,
"salary2":1000,
"bill":50000
}

但我所有的尝试都是返回带有或不带引号的属性和值，这从来都不像我需要的那样。

这就是我所拥有的

<form action="#" method="post">
    <div>
        <label for="name">Salary1</label>
        <input type="number" name="salary1" id="salary1" value=25000  data-value-type="number"  />
    </div>
    <div>
        <label for="salary2">Salary2</label>
        <input type="number" name="salary2" id="salary2" value=18200 data-value-type="number"   />
    </div>
    <div>
        <label for="Bill">Bill</label>
        <input type="number" name="bill" id="bill" value=35000  data-value-type="number"  />
    </div>
    <p>
        <input type="submit" value="Send" />
    </p>
</form>

jQuery.fn.serializeObject = function() {
  var arrayData, objectData;
  arrayData = this.serializeArray();
  objectData = {};

  $.each(arrayData, function() {
    var value;

    if (this.value != null) {
      value = this.value;
    } else {
      value = '';
    }

    if (objectData[this.name] != null) {
      if (!objectData[this.name].push) {
        objectData[this.name] = [parseFloat(objectData[this.name])];
      }

      objectData[this.name].push(parseFloat(value));
    } else {
      objectData[this.name] = value;
    }
  });

  return objectData;
};

输出

var data = $(this).serializeObject({parseNulls: true, parseNumbers: true});
    console.log("-->serializeObject",data)

返回

{ salary1: "25000", salary2: "18200", bill: "35000"}

Answer 1

您只是在代码的else 分支中缺少parseFloat 调用 - 没有它，它会添加始终是字符串的字段内容！

jQuery.fn.serializeObject = function() {
  var arrayData, objectData;
  arrayData = this.serializeArray();
  objectData = {};

  $.each(arrayData, function() {
    var value;

    if (this.value != null) {
      value = this.value;
    } else {
      value = '';
    }
    
    if (objectData[this.name] != null) {
      if (!objectData[this.name].push) {
        objectData[this.name] = [parseFloat(objectData[this.name])];
      }

      objectData[this.name].push(parseFloat(value));
    } else {
      objectData[this.name] = parseFloat(value); // <-- Missing parseFloat was here
    }
  });

  return objectData;
};

$('form').submit(function(){
  var data = $(this).serializeObject({parseNulls: true, parseNumbers: true});
  console.log("-->serializeObject",data);
  return false
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="#" method="post">
    <div>
        <label for="name">Salary1</label>
        <input type="number" name="salary1" id="salary1" value=25000  data-value-type="number"  />
    </div>
    <div>
        <label for="salary2">Salary2</label>
        <input type="number" name="salary2" id="salary2" value=18200 data-value-type="number"   />
    </div>
    <div>
        <label for="Bill">Bill</label>
        <input type="number" name="bill" id="bill" value=35000  data-value-type="number"  />
    </div>
    <p>
        <input type="submit" value="Send" />
    </p>
</form>