javascript - 从Javascript中的HTML表单获取数据总是会产生字符串吗？

我使用Javascript拦截HTML表单提交：

var form_api = $("#apiForm");
$(form_api).submit(function(event) {
   /* stop form from submitting normally */
   event.preventDefault();

   /* Get input values from form */
   var formData = prepFormData("#apiForm");
}

但是，当我将数据转换为对象时（我希望使用jQuery将其传递给端点），所有对象属性都是字符串。

function prepFormData(formSelector){
   var form_api = $(formSelector);

   // Serialize the form data as a PlainObject.
   var formData = $(form_api).serializeArray().reduce(function (obj, item) {
      obj[item.name] = item.value;
      return obj;
   }, {});
}

为什么总是产生字符串？我希望改为以下行为：


未输入任何内容时，<input type="text">应产生NULL。
输入值后，<input type="number">应产生一个Int值。

最佳答案

您需要分析输入以适合您的需求。 HTML中的每个表单值本质上都是一个字符串。

type属性使浏览器知道要显示的字段类型，而不是值的数据类型是什么。举个例子：

<input type="hidden" value="1">

HTML和javascript无法从hidden推断出有关数据类型的信息，它可以是字符串，也可以是int。

number同样有问题，为什么默认为int，双精度数和其他数字类型呢？

在上面的示例中，请注意，该值用引号引起来，表示一个字符串。 （引号是可选的，但建议使用，但对数据类型不做任何操作。）

为了真正解决您的问题，我会考虑在字段中添加data attribute，例如说data-type来保存要将值强制转换为的数据类型。

这是一个简单的示例：

var form_api = $("#apiForm");
$(form_api).submit(function(event) {
   /* stop form from submitting normally */
   event.preventDefault();

   /* Get input values from form */
  var formData = prepFormData("#apiForm");
  console.log(formData);
});


function prepFormData(formSelector){
 var form_api = $(formSelector);

   // Serialize the form data as a PlainObject.
   var formData = $(form_api).serializeArray().reduce(function (obj, item) {
      var tempValue = null;
      if(item.value !== "") {
        //Get data type of current field
        var dataType = $(form_api).find("[name=" + item.name + "]").data("type");

        if(dataType === undefined) {
          dataType = "text";
        }

        //Extend this based on the other data types you need
        switch(dataType) {
          case "text" :
            tempValue = item.value;
            break;
         case "int" :
            tempValue = parseInt(item.value, 10);
            break;
         case "float" :
            tempValue = parseFloat(item.value);
            break;
         //Fall back for no data type defined, eg the select in this example
         default :
            tempValue = item.value;
            break;
        }
      }
      obj[item.name] = tempValue;
      return obj;
   }, {});

   return formData;
}

label {display:block; margin-bottom:5px;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<form id="apiForm" method="get" action="">
  <label>Name <input type="text" data-type="text" name="Name"></label>
  <label>Integer <input type="number" data-type="int" name="Integer"></label>
  <label>Float <input type="number" step="0.1" data-type="float" name="Float"></label>
  <fieldset>
    <legend>Age Range</legend>
    <label>&lt;18 <input type="radio" data-type="text" name="AgeRange" value="<18"></label>
    <label>&gt;18 <input type="radio" data-type="text" name="AgeRange" value=">18"></label>
  </fieldset>
  <label>Country
  <select name="country">
    <option value="usa">USA</option>
    <option value="aus">Australia</option>
    <option value="other">Other</option>
  </select>
  </label>
  <label>Product
    <select name="ProductId" data-type="int">
      <option value="1">Apple</option>
      <option value="2">Orange</option>
      <option value="11">Pear</option>
      <option value="110">Pineapple</option>
    </select>
  </label>
  <input type="hidden" data-type="text" name="HiddenText" value="">
  <input type="submit">
</form>