为ajax动态创建URL参数

Question

我正在创建一个动态表单。ie基于下拉框中的用户选择。根据下拉选择，我可以有2到20个字段。因此，每次用户更改下拉列表时，我们都可以有各种类型的不同表单字段。

提交url参数。是否可以仅提交可见且与用户选择相关的表单字段当前url字符串正在提交所有值。

对于场景1

当用户从下拉列表中选择“A”时。我们显示firstname和lastname输入字段以及url？fname=fname

情景2

当用户从下拉选择说“B”时。我们显示名字、姓氏输入字段和地址以及网址？fname=fname

情景3

当用户选择说"Z"从下拉。我们显示不同的输入字段，如名，姓，地址，邮编，年龄，ssn，孩子的名字，性别，单元格，家庭，办公室和网址？fname=fname

我的问题是。。是否可以基于下拉选择构建动态URL查询字符串？它将如何跟踪20到30种不同的选择。因为每个选择都显示不同的形式。

最好的方法是什么。JSOn是否需要为url查询字符串程序集提供必要的信息？

有什么例子吗？

Answer 1

我想你必须使用。serialize（）只序列化在下拉列表中可见的字段，忽略不可见的字段，隐藏不必要的字段，然后序列化表单并作为参数传递给ajax请求。

对于场景1，当用户从下拉列表中选择A而不是隐藏除fname之外的数据时

$(':input:visible', 'form').serialize();

当用户从下拉列表中选择“A”时。我们显示firstname和lastname输入字段以及url？fname=fname

等等...

例如，请找到下面的代码片段

var serializeData = $(':input:visible', 'form').serialize();
alert(serializeData);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
    <input type="text" name="foo" value="foo" />
    <input type="text" name="bar" value="bar" style="display:none" />
    <input type="text" name="baz" value="baz" />
</form>