0

データベースからの userIds のリストを動的に入力する必要がある HTML にドロップダウンがあります。したがって、Java 関数を呼び出す JavaScript 関数を実行して、HTML ページが読み込まれる前に DB にクエリを実行する必要があります。ページが読み込まれる前に JS 関数を実行する必要があるため、head セクションに Javascript (Users.js) をインポートし、HTML の Body タグのメソッドでfindActiveOrganisationsRequest('findActiveOrganisations')JS関数 ( を呼び出します。atload()

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. さて、JS 関数によって返されたリストを DropDown に取り込むにはどうすればよいでしょうか。私の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 要求を送信します。

  1. HTTP リクエストに含まれるパラメータをチェックし、

  2. データベースから結果を取得します

  3. StringBuffer"UserID - UserName" の形式で、応答として配列を作成します。しかし、これが最善の方法であるかどうかはわかりません..どんな助けや提案も大歓迎です!

  4. その応答を次のように送信します。 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 サーブレットが応答を返すと、上記の JS 関数で次のようにキャッチされます。

xmlhttp.onreadystatechange = function() {
    var returnText = xmlhttp.responseText;
    document.getElementById("UserResults").innerHTML=returnText;
};

したがって、フォームの UserResults DIV タグに配列を次のように表示できます。

1 - ジョン・スミス

2 - アダム・スミス

3 - ピーター・スミス

しかし、この配列を使用してドロップダウンをフォームに入力するにはどうすればよいでしょうか?

どんな助けでも大歓迎です！

4

1 に答える 1

0

js 関数を呼び出すには、jQuery を使用します。

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

json を使用して、コレクションを Java からシリアル化し、JavaScript 側で逆シリアル化します。json にシリアル化する Java 側:

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];
}
于 2012-05-22T11:34:34.110 に答える