javascript未显示在jsp页面中_Javascript_Java_Jsp

javascript未显示在jsp页面中

javascript java jsp

javascript未显示在jsp页面中,javascript,java,jsp,Javascript,Java,Jsp,我编写了一个代码，用于从数据库表中检索数据并显示它。整个表作为arraylist通过servlet传递到jsp页面。在jsp中。。下拉框中只显示第一个名称。目标是从下拉列表中选择一个名称，在选择名称后，将显示与该名称对应的其余数据。Arraylist已正确传递。下拉菜单工作正常。但显示其余内容的javascript代码不起作用。请提供帮助。以下代码仅针对一个字段显示。例如，身份证。 0){ %> 姓名：身份证件：函数选择（）{ //x=document.getElementById（“

我编写了一个代码，用于从数据库表中检索数据并显示它。整个表作为arraylist通过servlet传递到jsp页面。在jsp中。。下拉框中只显示第一个名称。目标是从下拉列表中选择一个名称，在选择名称后，将显示与该名称对应的其余数据。Arraylist已正确传递。下拉菜单工作正常。但显示其余内容的javascript代码不起作用。请提供帮助。以下代码仅针对一个字段显示。例如，身份证。


0){
%>
姓名：
身份证件：
函数选择（）{
//x=document.getElementById（“用户”）；
y=document.getElementById（“selectUsers”）；
x=y。选择的索引；
Cust c1=newlist.get（y.selectedIndex）；
document.getElementById（“ids”）.value=c.getCustId（）；
}

您的代码有一些问题

首先，Scriptlet已被弃用，应该避免使用。请改用

其次，JavaScript代码对Java代码中使用的任何变量都没有可见性。Java在服务器上执行，然后一些文本（HTML响应）被发送到浏览器。如果它包含JavaScript，浏览器将运行JavaScript

我已经重写了您试图使用JSTL而不是Scriptlet来实现的流程控制，并更改了JavaScript以获得您似乎正在尝试的内容：

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<body>
<form action="Servletname" method="post" name="searchdatabase">
<c:if test="${not empty CusList}">
  <table>
  <tr>
  <td> name :</td>
  <td>
  <select id="selectUsers" name="users" onChange='Choice();'>
  <option> </option>
  <c:forEach items="${CusList}" var="c">
    <option value="${c.custId}"> <c:out value="${c.name}" /></option>
  </c:forEach>
  </select>
  </td></tr>
  <tr>
  <td> id :</td>
  <td>
  <input type="text" id="ids" name="id" value="${CusList[0].custId}" >
  </td></tr>
  </table>
  <!-- Note that I've moved the closing form tag and put it outside of this c:if block 
  because putting it here means it will only be output if your List is not empty -->

  <script type="text/javascript">
  function Choice() {
    var y = document.getElementById("selectUsers");
    var x = y.selectedIndex;
    document.getElementById("ids").value = y.children[x].value;
  }
  </script>
</c:if>
</form><!-- outside of c:if because the opening tag is also outside of c:if -->
</body>

这种方法的缺点是，如果您有一个包含大量属性的大列表，您希望提供这些属性，那么响应中将包含大量文本

使用AJAX

您可以对select更改进行AJAX调用，并让服务器返回以JSON格式编码的客户数据。然后JavaScript将解码JSON并用正确的值填充元素

您需要研究如何做到这一点（有大量可用的教程），但响应您选择的更改的步骤将是：

在从服务器获得AJAX响应之前，禁用选择框以防止再次更改

显示某种跳动器，以向用户指示正在加载数据

发出指示所选客户ID的AJAX请求

服务器使用相应客户对象的JSON编码版本进行响应

使用JSON数据更新输入

隐藏throbber并重新启用select元素

这种方法的缺点是，您需要学习如何正确使用AJAX，包括添加代码来处理错误（例如，如果用户失去网络连接，服务器对AJAX请求没有响应，则需要显示错误消息并采用某种“重试”机制）。

您在混合使用Java（服务器端）使用JavaScript编写代码（客户端）。请参阅-问题可能与PHP有关，但原理相同。JavaScript在用户浏览器中运行，Java在响应发送到浏览器之前在服务器上运行。在页面加载时不会调用JavaScript选择函数，因为在页面加载时不会触发onChange事件。此外，请停止使用Scriptlet（代码）位。在JSP页面中寻找一个好的JSTL流控制教程。（顺便说一句，如果您只想更改“ids”输入元素值以响应用户更改选择框，请添加

readonly

属性以阻止用户单独更改它。）谢谢你@diascog。如果我有更多的字段要添加。例如，arraylist中的其余数据，就像我所附的图片一样。我应该在javascript中添加什么脚本。

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<body>
<form action="Servletname" method="post" name="searchdatabase">
<c:if test="${not empty CusList}">
  <table>
  <tr>
  <td> name :</td>
  <td>
  <select id="selectUsers" name="users" onChange='Choice();'>
  <option> </option>
  <c:forEach items="${CusList}" var="c">
    <option value="${c.custId}"> <c:out value="${c.name}" /></option>
  </c:forEach>
  </select>
  </td></tr>
  <tr>
  <td> id :</td>
  <td>
  <input type="text" id="ids" name="id" value="${CusList[0].custId}" >
  </td></tr>
  </table>
  <!-- Note that I've moved the closing form tag and put it outside of this c:if block 
  because putting it here means it will only be output if your List is not empty -->

  <script type="text/javascript">
  function Choice() {
    var y = document.getElementById("selectUsers");
    var x = y.selectedIndex;
    document.getElementById("ids").value = y.children[x].value;
  }
  </script>
</c:if>
</form><!-- outside of c:if because the opening tag is also outside of c:if -->
</body>

  <c:forEach items="${CusList}" var="c">
    <option 
       value="${c.custId}"
       data-surname="<c:out value="${c.surname}" />"
       data-tel="<c:out value="${c.tel}" />"><!-- etc -->
         <c:out value="${c.name}" />
    </option>
  </c:forEach>

function Choice() {
  var y = document.getElementById("selectUsers");
  var x = y.selectedIndex;
  var opt = y.children[x];
  document.getElementById("ids").value = opt.value;
  document.getElementById("surname").value = opt.dataset.surname;
  document.getElementById("tel").value = opt.dataset.tel;
  // etc
}