Question

我的代码如下

var reported_psdArray = [];
$("select[name=reported_psd]").each(function() {
  var item = {
    "id": $(this).attr('id'),
    "value": $(this).val(),
    "text": $("option:selected", this).text()
  };
  reported_psdArray.push(item);
})
reported_psd = JSON.stringify({
  reported_psd: reported_psdArray
});

var more_infoArray = [];
$("textarea[name=more_info]").each(function() {
  var item = {
    "id": $(this).attr('id'),
    "value": $(this).val()
  };
  more_infoArray.push(item);
})
more_info = JSON.stringify({
  more_info: more_infoArray
});

var auth_managerArray = [];
$("input[name=auth_manager]").each(function() {
  var item = {
    "id": $(this).attr('id'),
    "value": $(this).val()
  };
  auth_managerArray.push(item);
})
auth_manager = JSON.stringify({
  auth_manager: auth_managerArray
});

return "[" + reported_psd + "," + more_info + "," + auth_manager + "]

现在，这很好用。对于小型表单，它只是复制/粘贴几次。我的问题是我如何为数百个输入做这项工作？对于选择的项目，我需要实际文本的值 - 我不需要其他的。

相应的HTML将是一系列HTML元素，例如：

<input type="text" name="auth_manager">
<textarea name="more_info"></textarea>

有时候可能会有多个同名的元素

服务器端技术是PHP。

Answer 1

看起来好像有一些重复的代码。考虑重构为接受DOM节点类型和name属性作为参数的DRY函数。

function stringifyFormElementValues(formInputType, name) {
    var selectorString = formInputType + "[name=" + name + "]";
    var matches = [];
    $(selectorString).each(function() {
        var item = {};
        item.id = $(this).attr('id');
        item.value = $(this).val();
        if (formInputType === "select") {
            item.text = $("option:selected", this).text();
        }
        matches.push(item);
    });
    var result = {};
    result[name] = matches;

    return JSON.stringify(result);
}

然后，您可以根据您关注的元素和名称调用它，并根据需要执行任何操作（例如，构建数组）。或者，如果您对那里的内容不是很挑剔，您可以选择所有表单输入，.each()，然后在每个匹配的元素上调用方法以构建一个全面的数组。希望这可以帮助！

Answer 2

我认为您拥有select，textarea和input的所有基本功能......现在您想在许多可能的元素名称上使用这些功能。

所以这里是如何遍历每个元素类型的所有名称。

这只是每个添加的循环...要获取所有不同的名称，请使用您的函数和收集的名称。

function serialise_all(){

  // Selects
  var select_names = [];
  $(document).find("select").each(function(){
    var thisName = $(this).attr("name");
    if(select_names.indexof(thisName) == -1){
      select_names.push($(this).attr("name"));
    }
  });

  var reported_psdArray = [];
  for (i=0;i<select_names.length;i++){
    $("select[name="+select_names[i]+"]").each(function() {
      var item = {
        "id": $(this).attr('id'),
        "value": $(this).val(),
        "text": $("option:selected", this).text()
      };
      reported_psdArray.push(item);
    })
  }
  reported_psd = JSON.stringify({
    reported_psd: reported_psdArray
  });

  // Textareas
  var textarea_names = [];
  $(document).find("textarea").each(function(){
    var thisName = $(this).attr("name");
    if(textarea_names.indexof(thisName) == -1){
      textarea_names.push($(this).attr("name"));
    }
  });

  var more_infoArray = [];
  for (i=0;i<textarea_names.length;i++){
    $("textarea[name="+textarea_names[i]+"]").each(function() {
      var item = {
        "id": $(this).attr('id'),
        "value": $(this).val()
      };
      more_infoArray.push(item);
    })
  }
  more_info = JSON.stringify({
    more_info: more_infoArray
  });

  // Inputs
  var input_names = [];
  $(document).find("input").each(function(){
    var thisName = $(this).attr("name");
    if(input_names.indexof(thisName) == -1){
      input_names.push($(this).attr("name"));
    }
  });

  var auth_managerArray = [];
  for (i=0;i<input_names.length;i++){
    $("input[name="+input_names[i]+"]").each(function() {
      var item = {
        "id": $(this).attr('id'),
        "value": $(this).val()
      };
      auth_managerArray.push(item);
    })
  }
  auth_manager = JSON.stringify({
    auth_manager: auth_managerArray
  });

  return "[" + reported_psd + "," + more_info + "," + auth_manager + "];
}

使用jQuery将多个表单元素的状态序列化为JSON

2 个答案: