使用JS的SQL请求过程

Question

我想从包含SQL查询结果的JSP变量的JS中添加一个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> 

我的领航员说 “code_postal没有定义”。我不得不使用ajax来做这件事吗？我真的不知道阿贾克斯。 ：/

Answer 1

“code_postal没有定义”是因为这条线的JavaScript的：

var currentCp = communeListe[i][code_postal]; 

的Javascript认为code_postal是一个变量的名字，但没有“变种codePostal = ...”中的任何位置你的JavaScript。

这里是发生了什么事情与你的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服务。由于您已经在使用JSP，因此您可以使用Java servlet来完成此操作。这个servlet将需要接受一个邮政编码作为请求参数，并将对该邮政编码的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服务，你可以创建一个名为像公社一个简单的Java对象，并给它nom_commune_min和insee_commune as fields。然后，您可以使用一个简单的JSON序列化库（如Jackson）将该对象序列化为一个字符串，并将其从您的servlet作为HTTP响应的主体返回。

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

至$就调用可能会是这个样子（我可能会使用$不用彷徨只是因为它的阿贾克斯$简化版本）：

$.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和Web服务的工作方式，看看一些教程和示例。 Web服务，Ajax以及与构建动态网站相关的所有内容都是现代Web开发的重要组成部分。