从 Javascript 和 Java 返回的数组中填充下拉列表
Populating a DropDown from an Array returned by Javascript and Java
>我在HTML中有一个下拉菜单,需要使用数据库中的用户ID列表动态填充。因此,我需要在 HTML 页面加载之前执行调用 Java 函数的 JavaScript 函数来查询数据库。由于我需要在页面加载之前执行 JS 函数,因此我在 head 部分中导入 Javascript(用户.js(,并在 HTML 的 Body 标签中的 atload()
方法上调用我的 JS 函数(findActiveOrganisationsRequest('findActiveOrganisations')
(。
问题 1.让 JS 函数在表单加载之前运行以便我可以填充下拉列表的最佳方法是什么?以上能解决问题吗?我的HTML是:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Sample User Registration</title>
<script language="javascript" src="js/Users.js"> </script>
</head>
<body atload="findActiveUsersRequest(findActiveUsers)">
<H2>User Registration</H2>
<div id="userAccessForm" >
<form name="userAccessForm" id="userAccessForm">
<div id="userAccessResults" style=" width : 364px; float:left;"></div><br> <table width="100%" border="1px">
<tr><td> <p>Organisation *<br>
<select name="UserID" id="UserID"> <option value="Choose your Organisation" selected>Choose Username</option>
<option value="1">Dynamically populate User1</option> <option value="2">Dynamically populate User2</option> <option value="3">Dynamically populate user3</option> </select> </p><td>
<input name="submit" type="submit" id="submit" value="Submit"> <input name="reset" type="reset" id="cancel" value="Cancel">
</td></tr>
<tr><td>
<div id="UserResults" style=" width:353px; float:left;"></div></td></tr>
</table>
</form></body>
问题 2.现在,如何使用 JS 函数返回的列表填充下拉列表。我的Javascript函数如下:
function findActiveUsersRequest(findActiveUsers){
var xmlhttp;
if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
} else {// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
var returnText = xmlhttp.responseText;
document.getElementById("UserResults").innerHTML=returnText;
};
var loadingHtml = "<img border='"0'" src='"images/busy.gif'" width='"50'" /> Active Users Details...";
document.getElementById("UserResults").innerHTML=loadingHtml;
xmlhttp.open("GET","mets?action=users&userAction="+findActiveUsers);
xmlhttp.send();
}
很明显,上述 JS 函数的最后 2 行发送一个 HTTP 请求,该请求被 servlet 捕获,然后:
检查 HTTP 请求中的参数,
从数据库中获取结果
创建格式为"用户 ID - 用户名"的响应
StringBuffer
数组。但我不确定这是最好的方法。任何帮助/建议将不胜感激!按如下方式发送该响应:
sendResponse(response.getWriter(), stringBuffer)
import java.io.PrintWriter;
import java.util.List;
import java.util.Map;
import javax.servlet.http.HttpServletRequest;
public class RequestActionFactory {
@SuppressWarnings("unchecked")
public static Action getAction(HttpServletRequest request) {
// Retrieve action parameters
String action = request.getParameter("action");
String userAction = request.getParameter("UserAction");
// Validate
if (action != null) {
// Event request
if (action.equals("users")) {
List<UserIdDTO> userDTOList = getActiveUsers(); //Gets the UserIds from the DB
StringBuffer[] stringBuffer = new StringBuffer[userDTOList.size()];
for (UserIdDTO userDTO : userDTOList) {
for(int i=0; i<userDTOList.size(); i++) {
stringBuffer[i] = new StringBuffer();
stringBuffer[i].append(responseValue(userDTO));
}
}
sendResponse(response.getWriter(), stringBuffer);
}
}
return null;
}
private StringBuffer responseValue(UserIdDTO userDTO){
StringBuffer strBuffer = new StringBuffer();
strBuffer.append(userDTO.getId());
strBuffer.append(" - ");
strBuffer.append(userDTO.getuserName());
return strBuffer;
}
public static void sendResponse(PrintWriter writer, StringBuffer[] stringBuffer) {
if (stringBuffer != null) {
for(int i=0; i<stringBuffer.length; i++) {
if(null!=stringBuffer[i]) {
writer.write(stringBuffer[i].toString());
}
}
} else {
// TODO write to log
}
}
}
一旦Java Servlet发送回响应,它就会被上面提到的JS函数捕获为:
xmlhttp.onreadystatechange = function() {
var returnText = xmlhttp.responseText;
document.getElementById("UserResults").innerHTML=returnText;
};
因此,我成功地将表单上的用户结果 DIV 标签中的数组显示为:
1 - 约翰。史密斯
2 - 亚当·史密斯
3 - 彼得·史密斯
但是如何使用此数组在表单中填充我的下拉列表?
任何帮助将不胜感激!
要调用 js 函数,请使用 jQuery:
jQuery(document).ready( function() {
// You init code here
});
使用 json 从 java 序列化集合,并在 javascript 端反序列化它。在 java 端序列化为 json:
Collection<YourType> myCollection = ... ;
Gson gson = new Gson();
String json = gson.toJson(myCollection);
// Write json to response
在 js 端:
var myCollection = JSON.parse(responseText);
for(i = 0l i < myCollection.length; i++) {
var element = myCollection[i];
}
- 将数据推送到数组填充 jqGrid
- 使用 JSON 数组填充输入字段
- 用Javascript中的JSON数组填充HTML
- 动态生成的表格 - 使用数组填充TD值
- 使用数组填充if语句值
- AngularJS:用两个JSON数组填充复选框列表,最初检查了一个数组中的一些项
- 为什么不是't ng表将数据从数组填充到表中
- 在javascript中用数组填充对象
- 高图表 - 从数组填充数据
- 如何从下拉列表中由可观察数组填充的选定项中检索完整对象
- 使用 JavaScript 数组填充下拉选择框
- Javascript array.length 为 0,但数组填充了 40 个项目
- 使用 JSON 数组填充图表
- 数组填充外部函数 - 不可访问的成员
- 用 javascript 数组填充 struts2 select 标签
- 用服务器数组填充 jquery 数组
- 如何使用 json 数组填充 Rails 下拉菜单
- 在用数组填充初始化的数组上使用数组映射的意外行为
- JavaScript 风格的数组填充在 Java 中
- 如何使用 javascript 数组填充 html 标题