Question

我想在包含SQL查询结果的JSP变量中添加JS。

这是我的两个输入：

<tr>
    <td><label>Code postal* :</label></td>
    <td><input type="number" name="cp" placeholder="CP du lieu de résidence" required /></td>
    <td><label>Ville* :</label></td>
    <td><select name="ville" required disabled/></select></td>
</tr>

这是我的JS和JSTL查询：

<sql:query dataSource="jdbc/Referentiel" var="communeCp" > 
    SELECT code_postal, nom_commune_min, insee_commune FROM  commune
</sql:query>
<script>
    $('input[name=cp]').keyup(function(){
        if ($(this).val().length == 5) 
        {   
            $('select[name=ville]').prop('disabled', false);
            var communeListe = "${communeCp}";
            for (var i in communeListe)
            {
                var currentCp = communeListe[i][code_postal];
                var currentVille = communeListe[i][nom_commune_min];
                if($('input[name=cp]').val() == currentCp)
                { 
                    $('select[name=ville]').append('<option value="'+ currentVille +'">'+ currentVille +'</option>');
                }
            }
        }
        else
        {
            $('select[name=ville]').prop('disabled', true);
        }
    });
</script>

我的导航器说'＃34; code_postal未定义＆＃34;。

我被迫使用ajax来做到这一点？我真的不懂阿贾克斯。：/

Answer 1

“code_postal未定义”因为这行javascript而发生：

var currentCp = communeListe[i][code_postal];

Javascript认为code_postal是变量的名称，但是你的javascript中没有“var codePostal = ...”。

以下是JSP页面的内容：

首先，渲染JSP。 JSP调用SQL查询并将结果存储在communeCp变量（javax.servlet.jsp.jstl.sql.Result类型的对象）中。

JSP然后替换这一行：

var communeListe = "${communeCp}";

评估“communeCp.toString（）”的结果。我不知道那是什么，但它可能像默认的Object.toString实现一样简单，所以这是将呈现给页面的实际javascript：

var communeListe = "javax.servlet.jsp.jstl.sql.Result@123456".

现在已经渲染了JSP，浏览器会执行javascript。它甚至无法评估，因为你有未定义的code_postal引用，但如果由于某种原因这不是一个问题，它会失败，因为你试图为communeListe上的每个循环做一个，但是javascript看到communeListe只是一个简单的字符串，所以对它进行for循环是没有意义的。

现在，了解了这一点，我将尝试解释如何在没有AJAX的情况下实现您想要的行为。

从您的代码中，您似乎想要以下行为：用户需要输入邮政编码并在该邮政编码中选择一个ville。在他们输入5个字符的邮政编码后，启用“ville”下拉列表并填入该邮政编码的可能别墅选项。

你有一个实现这个目标的基本思路：在JSP中查询获取所有邮政编码和所有villes，然后，当输入邮政编码时，在javascript中以某种方式查看这些数据并填充ville下拉列表与邮政编码中的villes一起使用。

问题在于使来自SQL查询的数据可用于javascript。如果没有AJAX，你可以这样做。基本思想是使用通过渲染JSP生成的文字来初始化javascript对象数组：

<sql:query dataSource="jdbc/Referentiel" var="communeCp" > 
    SELECT code_postal, nom_commune_min, insee_commune FROM  commune
</sql:query>
<script>
    var communeListe= [];
    <c:forEach var="row" items="${communeCp.rows}">
        communeListe.push({
            code_postal: '${row.code_postal}',
            nom_commune_min: '${row.nom_commune_min}',
            insee_commune: '${row.insee_commune}'
        });
    </c:forEach>
    $('input[name=cp]').keyup(function(){
        if ($(this).val().length == 5) 
        {   
            $('select[name=ville]').prop('disabled', false);
            $.each(communeListe, function(index, currentRow) {
                var currentCp = currentRow.code_postal;
                var currentVille = currentRow.nom_commune_min;
                if($('input[name=cp]').val() == currentCp)
                { 
                    $('select[name=ville]').append('<option value="'+ currentVille +'">'+ currentVille +'</option>');
                }
            });
        }
        else
        {
            $('select[name=ville]').prop('disabled', true);
        }
    });
</script>

警告！如果你在commune表中有很多行，这有可能使页面加载速度很慢，因为你要将每一行的文本发送给用户浏览器。

对于您的使用案例，使用AJAX 几乎肯定是更好的整体设计。这将提高加载速度的方式是它只查询它需要的villes，它只需要将所有可能的villes的一小部分发送回用户的浏览器。我可以就此提供一些指导：

基本上，您首先需要开发服务器端Web服务。您可以使用Java servlet来实现这一点，因为您已经在使用JSP。这个servlet需要接受一个邮政编码作为请求参数，并将对该邮政编码上的commune数据库进行查询（因此它应该只获得postal_code ==邮政编码请求参数值的行）。然后它将返回包含表示来自commune数据库的那些行的对象数组的JSON，如下所示：

//assume this is the request coming to your webservice
/get_villes?postalCode=12345

//This would be the JSON response returned by your webservice
[
    {
        'nom_commune_min': 'ville name 1',
        'insee_commune': 'insee_commune 1'
    },
    {
        'nom_commune_min': 'ville name 2',
        'insee_commune': 'insee_commune 3'
    },
    ... and so on depending on how many villes have that postal code
]

要实现此Web服务，您可以创建一个名为Commune的简单Java对象，并将其作为字段提供给nom_commune_min和insee_commune。然后，您可以使用一个简单的JSON序列化库（如Jackson）将该对象序列化为字符串，并将其作为HTTP响应的主体从您的servlet返回。

在前端方面，你需要更改你的javascript，以便在输入邮政编码时，它使用$ .ajax（{...}）并调用该webservice，你传递了它的值要查找的邮政编码。

对$ .ajax的调用可能看起来像这样（我可能会使用$ .get只是因为它是$ .ajax的更简单版本）：

$.get({
    url: "/get_villes?postalCode=" + postalCode,
    success: function(communeCp){
        $.forEach(communeCp,function(index,currentRow){
            //put code here to populate the dropdown list using
            //currentRow.postal_code, just like the previous code I provided                
        });
    },
});

另一件需要考虑的事情是，由于这是异步的，当浏览器执行此查询时，该查询运行时，下拉列表将暂时显示空白（但用户仍可以自由地与页面进行交互）并且可能会被空白启用的ville下拉列表混淆。因此，当javascript ajax查询运行时，您需要与用户通信您正在等待来自Web服务的结果。因此，当他们输入邮政编码的5位数时，您可以执行某些操作，例如在某处显示“正在加载...”文本，然后在该$ .get的成功函数中隐藏该文本（在填充下拉列表之后）。

除此之外，我建议您花一些时间来了解AJAX和webservices的工作方式，并查看一些教程和示例。 Webservices，ajax以及与构建动态网站相关的所有内容都是现代Web开发的重要组成部分。

使用JS的SQL请求过程

1 个答案: