Javascript 使用JS的SQL请求过程

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

从commune中选择code_postal、nom_commune_min、insee_commune
$（'input[name=cp]'）。keyup（function（）{
if（$（this）.val（）.length==5）
{   
$（'select[name=ville]'）。prop（'disabled'，false）；
var communieliste=“${communiecp}”；
for（公用系统中的var i）
{
var currentCp=公共服务[i][code_postal]；
var currentVille=communileiste[i][nom_communie_min]；
if（$（'input[name=cp]'）。val（）==currentCp）
{ 
$（'select[name=ville]'）。追加（''+currentVille+''）；
}
}
}
其他的
{
$（'select[name=ville]'）.prop（'disabled'，true）；
}
});

我的导航器说“邮政编码未定义”

我被迫使用ajax来实现这一点？我真的不知道/

“未定义邮政编码”是因为这行javascript：

var currentCp = communeListe[i][code_postal]; 

Javascript认为code_postal是一个变量的名称，但Javascript中没有“var codePostal=…”

以下是您的JSP页面的情况：

首先，呈现JSP。JSP调用SQL查询并将结果存储在communiecp变量（javax.servlet.JSP.jstl.SQL.result类型的对象）中

JSP然后替换这一行：

var communeListe = "${communeCp}";

计算结果为“communiecp.toString（）”。我不知道这是什么，但它可能像default Object.toString实现一样简单，因此这是将呈现到页面的实际javascript：

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

现在JSP已经呈现，浏览器将执行javascript。它甚至无法求值，因为您有未定义的code_postal引用，但如果出于某种原因这不是问题，它将失败，因为您试图在Communieliste上执行for each循环，但是javascript看到Communieliste只是一个简单的字符串，因此在该字符串上执行for循环没有意义

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

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

实现这一点的基本方法是：在JSP中进行查询，获取所有邮政编码和所有ville，然后在输入邮政编码时，以某种方式在javascript中查看这些数据，并用该邮政编码中的ville填充ville下拉列表

问题在于如何使来自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>

为了实现这个Web服务，您可以创建一个简单的java对象，称为Commune，并将其命名为nom_Commune_min和insee_Commune作为字段。然后，您可以使用简单的JSON序列化库将该对象序列化为字符串，并将其作为HTTP响应的主体从servlet返回

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

对$.ajax的调用可能如下所示（我可能会使用$.get，因为它是$.ajax的一个更简单的版本）：

另一个要考虑的是，由于这是异步的，当浏览器执行这个查询时，在查询运行时，下拉将是空白的（但是用户仍然可以自由地与页面交互，并且可能被空白启用的Velphi下拉）混淆。因此，当javascript ajax查询运行时，您需要向用户传达您正在等待来自webservice的结果。因此，当他们输入邮政编码的5位数字时，您可以在某处显示“正在加载…”文本，然后将该文本隐藏在$.get的success函数中（在填充下拉列表后）

---

除此之外，我建议您花一些时间来思考AJAX和WebService是如何工作的，并查看一些教程和示例。web服务、ajax以及与构建动态网站相关的一切都是现代web开发的重要组成部分。

Dude关于ajax没有什么需要“了解”的：）它不是一种语言或框架。它只是调用一个外部文档，当响应返回时，对其进行处理。故事结束了！请参阅api.jquery.com/jquery.ajax-在PHP文件中编写SQL查询，从JS调用它，这就是ajax。我发现了真正的问题，就是如何影响var communiecp中对JS变量的查询响应。对不起，我不知道：）从未使用过JSP/JSTL。我只是路过告诉你关于ajaxOh我的上帝！非常感谢你的完美回答。我只需要在.push（）中用双引号替换简单引号。这是我第一次使用java脚本，我现在没有时间学习ajax，但它实际上非常有趣。

//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
]

$.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                
        });
    },
});