javascript - Jquery 对象到字符串并返回到对象

Question

我正在开发一个项目，其中有一个包含 html 表格的 div，该表格又包含标题行和任意数量的表格主体行。

添加的行包含文本区域、文本框和 7 个选择输入。

我需要将 div 中的所有内容(包括表外的按钮等以及文本区域和选择选项中的所有输入值)复制到字符串。我这样做是为了将 div 的“快照”添加到文件中(在 IE11 中使用 ActiveXObject)，将其发送给其他人，他们打开该文件并执行与我相反的操作。

我通过使用 $(divID).html() 有一个 80% 的工作版本，但这没有获取选择和文本输入值。

我已经使用clone()和修复克隆插件来尝试这个，它本身就很好用(获取所有内容，当我附加到正文时，它会生成一个完美的副本)，但我似乎无法获取该对象创建为字符串格式并再次返回(对象 -> 文本文件 -> 其他用户 -> 文本文件 -> 对象)。

这可能吗？

我需要文本格式的数据的原因是因为我需要能够将完整的“ session ”传输给另一个用户，并且该文件需要保存到共享点库中以便可以访问。目前我可以将文件发送到库的唯一方法是通过电子邮件发送到库(现在没有足够的能力使用js将文件发送到库)。

我最好循环遍历页面上的每个元素并将所有内容都设置为 JSON 格式吗？我对 js 很陌生，正在不断学习。

欢迎所有建议。

Answer 1

您必须在元素上设置属性。通常建议您远离属性并使用 prop() 来代替，因为在 HTML 加载时使用属性来设置默认值，然后属性从那里接管。但在本例中，这正是您想要修改的内容。另外，由于您正在弄乱属性，因此先创建一个副本并对其进行修改也没有什么坏处。

function serializeWithValues($el) {

  var $orig = $el,
      $t = $orig.clone();

  var $originalSelects = $orig.find('select');

  // Manual clone select values
  $t.find('select').each(function(index, item) {
    //set new select to value of old select
    $(item).val($originalSelects.eq(index).val());
  });

  $t.find(":input").each(function() {
    var $this = $(this);

    switch ($this[0].type) {
      case "checkbox":
      case "radio":
        if ($this.is(":checked"))
          $this.attr("checked", "checked");
        break;
      case "text":
      case "hidden":
        $this.attr("value", $this.val());
        break;
      case "select-one":
        $this.find(":selected").attr("selected", "true");
        break;
      case "select-multiple":
        $this.val() && $this.val().forEach(function(t) {
          $this.find("[value=" + t + "]").attr("selected", "selected");
        })
        break;
      case "textarea":
        $this.html($this.val());
        break;
      default:
        break;
    }

  });

  return JSON.stringify($t.html());
}

function serializeWithValues($el) {

  var $orig = $el,
      $t = $orig.clone();

  var $originalSelects = $orig.find('select');

  // Manual clone select values
  $t.find('select').each(function(index, item) {
    //set new select to value of old select
    $(item).val($originalSelects.eq(index).val());
  });

  $t.find(":input").each(function() {
    var $this = $(this);

    switch ($this[0].type) {
      case "checkbox":
      case "radio":
        if ($this.is(":checked"))
          $this.attr("checked", "checked");
        break;
      case "text":
      case "hidden":
        $this.attr("value", $this.val());
        break;
      case "select-one":
        $this.find(":selected").attr("selected", "true");
        break;
      case "select-multiple":
        $this.val() && $this.val().forEach(function(t) {
          $this.find("[value=" + t + "]").attr("selected", "selected");
        })
        break;
      case "textarea":
        $this.html($this.val());
        break;
      default:
        break;
    }

  });

  return JSON.stringify($t.html());
}

$("button").on("click", function() {

  var dataString = serializeWithValues($("#test"));

  $("#out1").text(dataString);
  rebuild(dataString);


});

// Add the element by string changing ids and radio groups to avoid conflict
var counter = 0;

function rebuild(dataString) {

  var d = $("<div>").append(JSON.parse(dataString));


  d.find("[id]").each(function() {
    $(this).attr("id", $(this).attr("id") + counter++);
  });

  d.find("[type=radio]").each(function(i, r) {
    var n = $(r).attr("name");
    d.find("input[type=radio][name=" + n + "]").attr("name", n + counter++);
  });


  $("body").append(d);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="test">
  <input id="inp1" name="inp1" />
  <select id="sel1" name="sel1">
    <option value="1">One</option>
    <option value="2">Two</option>
  </select>
  <select id="sel2" name="sel2" multiple size="2">
    <option value="1">One</option>
    <option value="2">Two</option>
  </select>
  <input type="checkbox" name="chk1" value="1" />
  <input type="checkbox" name="chk2" value="2" />

  <input type="radio" name="rad1" value="1" />
  <input type="radio" name="rad1" value="2" />
  <input type="hidden" name="hid1" value="still here" />
  <textarea name="text1"></textarea>
  <br>
</div>
<button type="button">GetString</button>
<br>
<div id="out1"></div>
<hr>