Question

我在下面找到了这段代码，可以从表单数据中创建一个对象，到目前为止，它仍然可以正常工作，但是我想更进一步，将包含数字的字符串转换为整数。构建函数处理数据部分，但是在使用这段代码的地方却失败了：

base[key] = isNaN(value) && Number(value) ? Number(value) : value.

我留下了一个jsfiddle，因此您可以调试并了解我的意思。它目前在Roles数组字段中输出["1", "2"]，我希望它看起来像这样[1,2]，但它输出{{1 }}，使用上面的代码。

jsfiddle

1:2

Answer 1

如果您使用此：

base[key] = isNaN(value) || Array.isArray(value) ? value : Number(value);

它将起作用：

(function($) {
  $.fn.serializeObject = function() {

    var self = this,
      json = {},
      push_counters = {},
      patterns = {
        "validate": /^[a-zA-Z][a-zA-Z0-9_]*(?:\[(?:\d*|[a-zA-Z0-9_]+)\])*$/,
        "key": /[a-zA-Z0-9_]+|(?=\[\])/g,
        "push": /^$/,
        "fixed": /^\d+$/,
        "named": /^[a-zA-Z0-9_]+$/
      };


    this.build = function(base, key, value) {

      base[key] = isNaN(value) || Array.isArray(value) ? value : Number(value);
      return base;
    };

    this.push_counter = function(key) {
      if (push_counters[key] === undefined) {
        push_counters[key] = 0;
      }
      return push_counters[key]++;
    };

    $.each($(this).serializeArray(), function() {

      // skip invalid keys
      if (!patterns.validate.test(this.name)) {
        return;
      }

      var k,
        keys = this.name.match(patterns.key),
        merge = this.value,
        reverse_key = this.name;

      while ((k = keys.pop()) !== undefined) {

        // adjust reverse_key
        reverse_key = reverse_key.replace(new RegExp("\\[" + k + "\\]$"), '');

        // push
        if (k.match(patterns.push)) {
          merge = self.build([], self.push_counter(reverse_key), merge);
        }

        // fixed
        else if (k.match(patterns.fixed)) {
          merge = self.build([], k, merge);
        }

        // named
        else if (k.match(patterns.named)) {
          merge = self.build({}, k, merge);
        }
      }

      json = $.extend(true, json, merge);
    });

    return json;
  };
})(jQuery);



let data = $('form').serializeObject();

console.log(data)

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#banner-message {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

#banner-message.alt {
  background: #0084ff;
  color: #fff;
  margin-top: 40px;
  width: 200px;
}

#banner-message.alt button {
  background: #fff;
  color: #000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <input type="text" id="firstname" name="firstname" value="John">

  <input type="text" id="lastname" name="lastname" value="Doe">
  <input type="checkbox" checked name="roles[]" value="1">
  <input type="checkbox" checked name="roles[]" value="2">
  <input type="text" id="role" name="images[0][id]" value="1">
  <input type="text" id="role" name="images[0][image]" value="image1.jpg">
  <input type="text" id="role" name="images[1][id]" value="2">
  <input type="text" id="role" name="images[1][image]" value="image2.jpg">

</form>

长话短说，我们使用`Array.isArray来检查value是否是一个数组，如果是则返回它。现在，如果您想进一步检查数组内部等问题，这是一个不同的问题，因为您可能还具有多级或多维数组，并且那里的内容逐渐递归：)希望这会有所帮助。

serializeObject尝试将字符串数字转换为整数（已更新）

1 个答案: