【问题标题】:server side client side field state altertions服务器端客户端字段状态更改
【发布时间】:2023-09-01 05:10:01
【问题描述】:

我在整个 * 中看到了这个问题的一些变体,但我有一个特定的用例,我会为之应用输入。

我能做到的最简单的方法是: 1. 在一个网站上,我有一个带有两个输入字段的表单。当 A 填充 'XYZ' B 应该被禁用,在所有其他情况下它应该被启用。 2.这个“页面”也可以被客户端保存到数据库中。

所以,我需要能够在客户端 tab-out(简单、简单的 Javascript)和当这个“表单”被加载时(简单,在 JSP 中当页面操作字段的属性时)呈现第二个禁用字段已加载)。

但是...我最终在两个地方编写了完全相同的逻辑。现在,考虑到这对于数百个字段和数十个逻辑条件是必需的,有时就像将 5 个字段组合在一起一样复杂,一组特定值来执行此操作,等等。

底线,您会考虑采用哪种方法在服务器端和客户端之间重用(尽可能)面向 UI 的验证/字段状态更改(考虑到我不想在每个用户都输入字段时使用 AJAX 调用.).

谢谢

【问题讨论】:

    标签: java javascript model-view-controller jsp


    【解决方案1】:

    像 JSF (JavaServer Faces) 这样的基于组件的 MVC 框架允许您在一个地方定义它。这是特定用例的启动示例:

    <h:form>
        <h:panelGroup id="inputA">
            <h:inputText value="#{bean.inputA}">
                <f:ajax event="blur" render="inputB" />
            </h:inputText>
        </h:panelGroup>
        <h:panelGroup id="inputB">
            <h:inputText value="#{bean.inputB}" disabled="#{bean.inputA != 'XYZ'}" />
        </h:panelGroup>
    </h:form>
    

    基本上就是这样。仅省略了 javabean 代码,但这在这里无关紧要。没错,这里使用了 ajax,但它特别便宜,而且基本上没有其他方法可以在服务器端和客户端保持相同的状态。

    上面的 XHTML (Facelets) 示例将生成适当的 HTML/JS 代码,这些代码将在服务器端和客户端完成工作。唯一的缺点可能是学习曲线和现有页面的大量更改。

    【讨论】:

    • 谢谢,如果这让我感兴趣,还有什么类似于 JSF 的其他替代方案?
    • 其他基于 Java 组件的框架是 Play!和检票口。我认为 Wicket 在更改现有 HTML 页面时破坏性最小。但我不确定它是否像 JSF 一样好/容易地支持异步(ajax)东西。我从来没有用过它们。
    【解决方案2】:

    我的答案与 BalusC 的答案大致相同。

    但首先要澄清一下术语:如果您所做的只是启用/禁用 HTML 字段,我们通常会说这是客户端验证,无论它是用 Javascript 还是 JSP 完成的。 是的,在 JSP 的情况下,禁用/启用字段的逻辑在服务器上运行,但由于它所做的只是设置一个字段供客户端显示,因此它往往属于“客户端验证”的一般描述

    客户端验证的替代(实际上是“除了”) 是在表单字段发布到服务器时对其进行验证。这会检查客户端是否确实遵守了您的验证规则(例如,他们可能会禁用 javascript,或者他们可能会使用诸如 firebug 之类的工具来重新启用您禁用的字段等)

    您可能已经知道所有这些了,术语并不是超级重要,但我认为值得指出。

    现在,回到你的问题。 我会在 javascript 中完成这一切,并忽略 JSP 中的逻辑。 您需要做的就是获取当它们从“A”中跳出时触发的一段 javascript,并在页面加载时运行它。

    在 JQuery 中,你会做类似 (untested)

    var check_field = function(f)
    {
      if(!f) f=$(this);
      if(f.val()=='XYZ') $("#field_B").attr('disabled', true);
      else               $("#field_B").attr('disabled', false);
    };
    $(function()
    {
       var a = $("#field_A");
       check_field(a);
       a.blur( check_field );
    });
    

    【讨论】:

    • 谢谢,这种方法不适用于涉及数百个字段,客户端将不得不等待很长时间才能加载页面。感谢您的术语,点了。应该注意的是,这是最简单的例子,在现实世界中它远不止于此,但它本质上是一组应用于字段的输出(即与您提到的客户端相关)。
    • 我认为您高估了执行所需的时间。我有大型 UI 做类似的事情,实际上并没有明显的性能影响。您正在为大约一百个字段运行几行 javascript。这真的不重要。但如果你用另一种方式解决它,那也很好。