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

Question

我使用 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。

Answer 1

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

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

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

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

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

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

为了真正解决您的问题，我会考虑添加 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>