forms - 如何将dart中的html表单序列化为字符串提交

Question

在 jQuery 中，有一个函数可以序列化表单元素，因此例如我可以将其作为 ajax 请求提交。

假设我们有这样一个表单:

<form id="form">
 <select name="single">
  <option>Single</option>
  <option selected="selected">Single2</option>
 </select>

 <input type="checkbox" name="check" value="check1" id="ch1">
 <input name="otherName" value="textValue" type="text">
</form>

如果我在 jquery 的帮助下做到这一点

var str = $( "form" ).serialize();
console.log(str);

结果是

single=Single2&check=check1&otherName=textValue

dart 的 FormElement 中是否有这样的功能，还是我必须自己编写代码？谢谢。

Answer 1

我想出了我自己的简单解决方案，可能并非在所有情况下都有效(但对我来说它是可行的)。程序是这样的:

1. 首先我们需要从表单中提取所有输入或选择元素名称和值到 Dart 的 Map 中，因此元素名称将是键，值是值(例如 {'single': 'Single2'})。<
2. 然后我们将遍历此 Map 并手动创建结果字符串。

代码可能是这样的:

FormElement form = querySelector('#my-form'); // To select the form
Map data = {};

// Form elements to extract {name: value} from
final formElementSelectors = "select, input";

form.querySelectorAll(formElementSelectors).forEach((SelectElement el) {
  data[el.name] = el.value; 
});

var parameters = "";

for (var key in data.keys) {
  if (parameters.isNotEmpty) {
    parameters += "&";
  }
  parameters += '$key=${data[key]}';
}

参数现在应该包含指定表单中的所有 {name: value} 对。