0

我有一个可以有或没有某些类别的产品的表格。该产品是由 Web 服务器提供的，所以我使用 jsp 来检索它。该产品有一个代码和一个版本。版本可以与类别相关联，也可以不与类别相关联。如果产品有多个类别，用户必须从类别下拉菜单中选择一个。更改类别也会更改表单中发送的版本。如果产品没有类别，则将产品的版本发送到表单而不选择类别。

例如，假设我有代码 A01 的产品 A，此类别和版本映射：{“large”：“VL”，“medium”：“VM”，“small”：“VS”} 和产品 B代码 B01 和版本 VB。

在我的代码中，我正在检查产品是否具有大于 1 的类别和版本图，以选择是否显示选择。这是通过 jsp 完成的，如下所示：

<% Map<String, String> categoriesVersions = product.getCategoriesVersionsMap(); %>
<% if(categoriesVersions != null && categoriesVersions.size() > 1) { %>
    <div class="rowElem">
        <label>
           Category
        </label>  
        <div class="select">
            <select name="product_version" class="mandatory">
                <option value=""></option>
                <% for(String category: categoriesVersions.keySet()) { %>                                          
                    <option value="<%=categoriesVersions.get(category)%>"><%=category%></option>                   
                <%}%>

            </select>
        </div>
    </div>      
<% } %>

然后我使用 jQuery 来管理产品版本的设置，如下所示：

jQuery(function ($) {

    $(function() {
        <% if (categoriesVersions != null && categoriesVersions.size() <= 1){%>
            $form.append('<input type="hidden" name="product_version" value="<%=product.getVersion()%>" />');
        <% } else {%>
            $form.append('<input type="hidden" name="product_category" value="" />');
            $form.on('change', 'select[name="product_version"]', function() {
                var category = $('select[name="product_version"] option:selected').text();
                $form.find('input[name="product_category"]').val(category);
            });
        <% } %>
    });
});

但我想知道，是否可以将 jsp if 放入 jQuery 代码中？我还有其他方法可以做到这一点吗？它有效，但我担心我的逻辑很糟糕。

我也在考虑将类别和版本映射转换为 json 对象，并且只能使用 jQuery，但是选择 html 仍然会在 JSP 中生成，我不知道这样是否可以（我也尝试过这种方式，但它没用）。

谢谢。

4

1 回答 1

1

TL;博士。您必须知道 JSP 的哪些部分在服务器端执行，哪些在客户端执行：

  • 您的JSP代码在您的服务器上执行。结果被渲染并发送到客户端（浏览器）。浏览器对 JSP 代码一无所知！
  • 所有HTML、CSS 和 Javascript代码都在客户端（即浏览器）上执行。

这意味着：

jQuery(function ($) {
    $(function() {
        <% if (categoriesVersions != null && categoriesVersions.size() <= 1){%>
            $form.append('<input type="hidden" name="product_version" value="<%=product.getVersion()%>" />');
        <% } else {%>
            $form.append('<input type="hidden" name="product_category" value="" />');
            $form.on('change', 'select[name="product_version"]', function() {
                var category = $('select[name="product_version"] option:selected').text();
                $form.find('input[name="product_category"]').val(category);
            });
        <% } %>
    });
});

将在您的服务器上呈现并发送到客户端。您的浏览器会看到以下内容：

jQuery(function ($) {   
    $(function() {
        $form.append('<input type="hidden" name="product_version" value="someProductId" />');
    });
});

或这个：

jQuery(function ($) {
    $(function() {
        $form.append('<input type="hidden" name="product_category" value="" />');
        $form.on('change', 'select[name="product_version"]', function() {
            var category = $('select[name="product_version"] option:selected').text();
            $form.find('input[name="product_category"]').val(category);
        });
    });
});

取决于您的 JSP 中的 if 语句在服务器上是真还是假。这也是它起作用的原因。

有时您想将服务器端变量“注入”到您的 Javascript 代码中，而这种技术可以做到这一点。但是，您在这里做两件事：

  1. 根据类别附加隐藏字段
  2. 注册更改侦听器 (Javascript)

1.) 在您的 JSP 中直接附加隐藏字段会更好（不需要 Javascript）：

<form>
    ... your select fields ...
    <% if (categoriesVersions != null && categoriesVersions.size() <= 1){%>
        <input type="hidden" name="product_version" value="<%=product.getVersion()%>" />
    <% } else {%>
        <input type="hidden" name="product_category" value="" />
    <% } %>
</form>

2.)只能使用 Javascript 注册更改监听器：

jQuery(function ($) {
    $(function() {
        if( /* Javascript condition here */ ) {
            $form.append('<input type="hidden" name="product_category" value="" />');
            $form.on('change', 'select[name="product_version"]', function() {
                var category = $('select[name="product_version"] option:selected').text();
                $form.find('input[name="product_category"]').val(category);
            });
        }
    });
});

然后你就有了干净的代码，一切都在它所属的地方。

于 2013-10-24T05:59:59.900 回答