使用 ajax 显示隐藏字段或新请求？答案

【问题标题】：Show hidden field or neew request with ajax?使用 ajax 显示隐藏字段或新请求？
【发布时间】：2020-01-25 01:27:45
【问题描述】：

我需要在网站上的表单中插入一些输入字段。

将根据用户在<select> 输入中选择的选项插入这些字段。

什么是正确的方法？

使用 ajax 添加这些字段的新请求，或者只是隐藏所有可能的字段，并根据所选选项显示它们？

（我不会向数据库提出任何请求）

【问题讨论】：

标签： jquery html ajax

【解决方案1】：

Ajax 用于与服务器“交谈”。如果只是更改<select> 值并显示/隐藏某些字段，则将它们放在带有style='display:none;' 的页面上并通过更改该样式来显示/隐藏它们，例如，您可以使用jquery：

 $(selector).show();

一些示例代码（当然，有很多方法可以做到这一点，这里有一个）：

$("#picker").on("change", function() {
  $(".dogs,.cats").hide();
  $("." + $(this).val()).show();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Do you like:
<select id='picker'>
  <option value=''>please select</option>
  <option value='dogs'>dogs</option>
  <option value='cats'>cats</option>
</select>
<div class='dogs' style='display:none;'>
  which sort of dog:
  <select>
    <option>big</option>
    <option>sloppy</option>
    <option>yappy</option>
  </select>
</div>
<div class='cats' style='display:none;'>
  what type of cat:
  <select>
    <option>aloof</option>
    <option>independent</option>
    <option>house cat</option>
  </select>
</div>

【讨论】：

非常感谢！
值得注意的是，另一方面，如果您的控件过于复杂或在不同位置使用重叠的控件 ID/名称（这使得简单的显示/隐藏异常混乱），那么，是的，使用 ajax 来获取表格。除非您使用的是 SPA（单页应用程序），否则如果它们特别复杂，最好将它们放在不同的页面上。

【解决方案2】：

如果您在选择字段更改时确实需要在服务器上执行某些操作，则可能需要使用 ajax 调用，如果您不只是隐藏字段并根据选择选项显示它们。

【讨论】：