重新加载页面而不将其提交回服务器答案

【问题标题】：Reload the page without submitting it back to the server重新加载页面而不将其提交回服务器
【发布时间】：2010-09-21 16:02:52
【问题描述】：

我遇到的问题是我在下拉列表中有两组值。如果选择了“A”类型，我希望用数据库中的值填充文本框并且是只读的。如果选择“B”类型，则该框为空且可编辑。

我的原始代码是用 jsp/struts 编写的，我通过使用实现了这一点

onchange="javascript:submit()" 重新加载页面，但这有一个明显的缺点，即保存您所做的任何更改，这意味着您无法真正取消。

由于这种方法，我在服务器端验证方面还有其他问题。

有没有办法让 jsp 页面在更改时重新加载，这样我可以编写 javascript 来根据会话中保存的值更改页面的外观。这样，只有在正确填写页面并且服务器端验证将按设计工作时才会调用保存/提交函数。

我知道这是 AJAX 擅长做的事情，但我会尽可能避免它。

【问题讨论】：

我想问题是：为什么要避免使用 Ajax？拥抱 Ajax 开启了一个充满可能性的全新世界，不仅适用于您的应用程序，还适用于您自己的技能组合。您寻求的精细控制正是 Ajax 最适合的。

标签： ajax jsp struts tags

【解决方案1】：

按照斯特林德豪格所说的，但如果您需要动态数据：

能否让后端将JS写入页面，然后JS根据需要更改表单？后端可以传播一些用于描述等的变量，然后 JS 可以相应地更改/更新表单。如果您对此不熟悉，jQuery 之类的库可以让此类事情变得更容易，并且比自己滚动更容易跨浏览器（至少根据我的经验）。

除此之外：如果您不使用 AJAX，因为它很难编码（因为我有一段时间没有使用，因为我的第一次体验是从头开始的，并不漂亮），正如其他人所说，像 MooTools 这样的库就可以了现在真的很容易。此外，正确使用 AJAX 并不丢人。它的名声很差，因为人们用它做一些愚蠢的事情，但如果你不能简单地将预制值写入表单或者你必须进行实时查找，这是 AJAX 的正确用途之一。

【讨论】：

【解决方案2】：

我知道一个可以解决您的问题的 taglib： AjaxTags。我在我的 J2EE 项目中使用了这个 taglib，将它集成到 Web 应用程序中非常简单。

这个标签库为您提供了几个标签，旨在在您的 jsp 文件中执行 AJAX 请求。

这里是每个标签的描述：http://ajaxtags.sourceforge.net/usage.html

对您有帮助的标签是 ajax:select 标签。它允许您填充依赖于其他字段的选择标记，而无需重新加载整个 jsp 页面。

如果你有更多关于它的信息，问我，我会尽快回答。

【讨论】：

【解决方案3】：

如果我对您的理解正确，您想要一个下拉列表 (<select>) 或文本字段 (<input type="text">)，具体取决于表单上方某处的选择（通常是复选框或单选按钮）？

在这种情况下，您可能需要在服务器上以不同方式处理两种类型的输入，那么为什么不在表单区域中同时使用不同名称和 ID 的选择框和文本字段，其中一个隐藏（@987654323 @)。然后在选择更改时切换可见性。在服务器上，您选择选择框或文本区域输入（除非您也禁用（disabled="disabled"）它们，否则两者都会出现，我认为这是 uneccesary）取决于选择输入。

当然，如果您希望用户通常只需要文本输入，并且只需要几次，则需要大量列表；最好使用ajax 来检索列表。但是，如果它是相反的方式（你只需要偶尔的文本字段），正如我上面假设的那样，将两者都以初始形式存在会更快。

如果下拉列表仅包含易于生成的数据，例如从现在到数百年前，使用 Javascript 中的 for 循环生成数据客户端甚至可能更快（需要更少的服务器带宽）。

【讨论】：

【解决方案4】：

一种方法是更改表单的操作，以便将表单提交到与“保存”网址不同的网址。这使您可以重新加载表单的某些方面并返回到表单本身，而不是提交数据。

<script>
  function reload() {
    document.forms[0].action="reloadFormData.jsp";
    document.forms[0].submit();
  }
</script>
<form action="saveData.jsp" method="post">
  <select id="A" name="B" onchange="reload()"><!-- blah --></select>
  <select id="B" name="B"><!-- blah B --></select>
  <input type="submit">
</form>

【讨论】：

【解决方案5】：

不知道你为什么要在当今世界尝试避免 AJAX，今天的 JS 库使它变得如此简单以至于不尝试它是疯狂的。

我只需要替换文森特指出的那样编写的页面。考虑到 4 年前数据的相对大小，我认为当时它对应用程序是有意义的。现在应用程序已经扩展了，页面重复解析数据结构需要超过 30 秒（可能是写得不好的 JS？也许）。

我用一个非常简单的对 servlet 的 AJAX 调用替换了所有逻辑，该 servlet 只是根据传递给它的内容返回第二个下拉列表值的 JSON 响应，并且响应基本上是即时的。

祝你好运。

【讨论】：

【解决方案6】：

如果没有 AJAX，您的要求将变得很困难。另一种选择（很丑陋）是将第二个列表框的所有可能值写入数组或字典等数据结构中。

然后编写一些 javascript 以在用户从第一个列表框中进行选择时从数据结构中获取值。完成这项工作并以跨浏览器的方式正确完成这项工作所需编写的 javascript 数量将比简单地使用 AJAX 困难得多。

【讨论】：

【解决方案7】：

我的朋友，AJAX 是您唯一的其他选择，除非在原始页面加载时您加载了文本框的所有其他可能值，因此您无需返回数据库。好吧，您可以尝试将文本框放在 IFRAME 中，但使用这种方法可能会遇到比仅使用 AJAX 更多的问题。

【讨论】：