2012-05-22 2 views
0

У меня есть выпадающее меню в HTML, которое нужно динамически заполнять списком userIds из базы данных. Следовательно, мне нужно выполнить функцию JavaScript, вызывающую функцию Java для запроса БД до загрузки страницы HTML. Поскольку мне нужно выполнить функцию JS до загрузки страницы, я импортирую javascript (Users.js) в раздел главы и вызываю свою функцию JS (findActiveOrganisationsRequest («findActiveOrganisations») по методу atload() в Body тег HTMLЗаполнение DropDown из массива, возвращаемого Javascript и Java

Q1 что лучший способ получить эту функцию 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> 

Q2. Как я могу заполнить DropDown с помощью t он возвращается обратно функцией 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(); 
} 

Как видно, последние 2 строки выше функции JS отправить запрос HTTP, который попадает в сервлет, который затем

а) проверки для использовать параметры приходит в запросе HTTP,

б) Получает результаты из базы данных

с) Создает массив StringBuffer, в ответ на ом формате, как «UserID - UserName». Но я не уверен, что это лучший способ сделать это. Любая помощь/предложения будут очень благодарны!

д) Посылает этот ответ следующим образом: 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; 
}; 

Итак, я успешно смог отобразить массив в теге UserResults DIV на моей форме, как:

1 - john.smith

2 - Adam.smith

3 - Peter.smith

Но как я могу использовать этот массив для заполнения мой выпадающий в виде ???

Любая помощь будет очень признательна!

Благодаря

ответ

0

позвонить вам использовать функции расслоения плотной JQuery:

jQuery(document).ready(function() { 
    // You init code here 
}); 

Используйте JSON сериализация коллекции из Java и десериализация его на яваскрипт стороны. На стороне 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]; 
} 
+0

пожалуйста, вы можете разработать немного больше, как и где использовать JQuery. Кроме того, есть ли способ сделать это без JSON? спасибо –

+0

вставьте код в раздел главы, а также загрузите (http://jquery.com/) и свяжите библиотеку jquery со своей страницей jsp. – alexey28

+0

Привет, как я могу это сделать без использования JSON? В моем Javascript у меня есть переменная массива имен пользователей, которая выглядит так: [«1-john.Smith», «2-Adam.smith», «3-Peter.smith»]; –

Смежные вопросы