为ajax动态创建URL参数

Question

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

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

对于场景 1

当用户从下拉菜单中选择“A”时。 我们显示名字和姓氏输入字段 和 url?fname=fname&lname=lname

场景 2

当用户从下拉菜单中选择“B”时。 我们显示名字、姓氏输入字段和地址 和 url?fname=fname&lname=lname&addres=address

场景 3

当用户从下拉菜单中选择“Z”时。 我们显示不同的输入字段，例如名字、姓氏、地址、邮编、年龄、ssn、孩子姓名、性别、单元格、家庭、办公室 和 url?fname=fname&lname=lname&addres=address&ddress, zip, age, ssn,childname,sex, cell,home, office

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

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

有例子吗？

Answer 1

我认为您必须使用.serialize() 仅序列化那些可见的字段，而忽略在您的情况下不可见的字段，在下拉菜单中隐藏不必要的字段，而不是序列化表单并作为参数传递给 ajax 请求。

适用于场景 1 当用户从下拉列表中选择 A 而不是隐藏除 fname 和 lname 之外的数据并且序列化如下表单时，它只会序列化可见字段。

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

当用户从下拉菜单中选择“A”时。我们显示名字和姓氏输入字段以及 url?fname=fname&lname=lname

等等……

例如，也请找到 belo sn-p

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>