2016-04-25 15 views
-1

私はjavascript、通常のサーブレットのクラスとjspページを使用するWebアプリケーションを開発しています。私はデータベーステーブルのデータを取得するjavascriptファイルが欲しい。どうすればいいのか教えてください。以下はjspページの私のコードです。以下JavaScriptからMySqlデータベースのデータにアクセスする方法

<head> 
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> 
<title>Calendar</title> 
<link type="text/css" rel="stylesheet" href="css/style.css"> 
</head> 
<body> 
<% 
//LoginDetails login = new LoginDetails(); 
UserName = LoginDetails.username; 
Password = LoginDetails.password; 
System.out.println(UserName+" * "+Password); 
%> 
<input type="hidden" id="hidden-user" value="<%= UserName%>"></br> 
<input type="hidden" id="hidden-pass" value="<%= Password%>"></br> 
<div style= "float:right;"> 

<div id="Calendar-container"> 
<input type="button" style="margin-left:5px; margin-top: 10px; height: 41px; width: 34px; background: url(images/left.png);" onclick="previous()";> 
<input type="button" value="N" style="margin-left:380px; margin-top:-40px; height: 41px; width: 34px; background: url(images/right.png);" onclick="next()";> 
<div id="Calendar-header"> 
<span id = "Calendar-month-year"></span><span id = "Calendar-month-year"> </span> 
</div> 
<div id="Calendar-dates" onclick="GetContext()";> 
</div> 
</div> 
</div> 
<form name = "Field_Details" action="Logic" method= "post"> 
<input type="text" name="Text-fields" id="field" style="height:50px; width:300px; border-color:black"></br> 
Absent   : <input type="checkbox" name="absent" value="Absent" ></br> 
Approved Leave : <input type="checkbox" name="approved-leave" value="Approved Leave" ></br> 
Sick Leave  : <input type="checkbox" name="sick-leave" value="Sick Leave" ></br> 
Pending Claim : <input type="checkbox" name="pending-claim" value="Pending Claim " ></br> 
Rejected Claim : <input type="checkbox" name="rejected-claim" value="Rejected Claim " ></br> 

</div> 
<input type="submit" value="Submit"></form> 
<script type="text/javascript" src="script.js"></script> 

</body> 

</html> 

私script.jsあなたは、クエリを尋ねる前に、検索を使用する必要があります

var username1 = document.getElementById("hidden-user").value; 
var password1 = document.getElementById("hidden-pass").value; 
var table; 
var cal; 
var monthval = 0; 
var month_name; 
var month; 
var year; 
var imgsrc = "Untitled.png"; 
var value = 0; 
var nextval; 
var nextyear = 0; 
window.onload = function(){ 
var d = new Date(); 
month_name = ['January','February','March','April','May','June','July','August','September','October','November','December']; 
month = d.getMonth(); //0-11 
monthval = month; 
value = 11-monthval; 
year = d.getFullYear(); //2014 
var first_date = month_name[month] + " " + 1 + " " + year; 

//September 1 2014 
var tmp = new Date(first_date).toDateString(); 
//Mon Sep 01 2014 ... 
var first_day = tmp.substring(0, 3); //Mon 
var day_name = ['Sun','Mon','Tue','Wed','Thu','Fri','Sat']; 
var day_no = day_name.indexOf(first_day); //1 
var days = new Date(year, month+1, 0).getDate(); //30 
//Tue Sep 30 2014 ... 
var calendar = get_calendar(day_no, days); 

document.getElementById("Calendar-month-year").innerHTML = month_name[month]+" "+year; 
document.getElementById("Calendar-dates").appendChild(calendar); 

} 

function next(){ 


    monthval++; 
    if(monthval > 11){ 
     monthval = 0; 
     nextyear++; 

    } 
    var d = new Date(); 
    month_name = ['January','February','March','April','May','June','July','August','September','October','November','December']; 
    month = monthval; //0-11 
    year = d.getFullYear()+nextyear; //2014 
    var first_date = month_name[month] + " " + 1 + " " + year; 

    //September 1 2014 
    var tmp = new Date(first_date).toDateString(); 
    //Mon Sep 01 2014 ... 
    var first_day = tmp.substring(0, 3); //Mon 
    var day_name = ['Sun','Mon','Tue','Wed','Thu','Fri','Sat']; 
    var day_no = day_name.indexOf(first_day); //1 
    var days = new Date(year, month+1, 0).getDate(); //30 
    //Tue Sep 30 2014 ... 
    var calendar1 = get_calendar(day_no, days); 

    document.getElementById("Calendar-month-year").innerHTML = month_name[month]+" "+year; 
    document.getElementById("Calendar-dates").innerHTML = ""; 
    document.getElementById("Calendar-dates").appendChild(calendar1); 

} 

function previous(){ 
    monthval--; 
    if(monthval < 0){ 
     monthval = 11; 
     nextyear--; 
    } 
    var d = new Date(); 
    month_name = ['January','February','March','April','May','June','July','August','September','October','November','December']; 
    month = monthval; //0-11 
    year = d.getFullYear()+nextyear; //2014 
    var first_date = month_name[month] + " " + 1 + " " + year; 

    //September 1 2014 
    var tmp = new Date(first_date).toDateString(); 
    //Mon Sep 01 2014 ... 
    var first_day = tmp.substring(0, 3); //Mon 
    var day_name = ['Sun','Mon','Tue','Wed','Thu','Fri','Sat']; 
    var day_no = day_name.indexOf(first_day); //1 
    var days = new Date(year, month+1, 0).getDate(); //30 
    //Tue Sep 30 2014 ... 
    var calendar1 = get_calendar(day_no, days); 

    document.getElementById("Calendar-month-year").innerHTML = month_name[month]+" "+year; 
    document.getElementById("Calendar-dates").innerHTML = ""; 
    document.getElementById("Calendar-dates").appendChild(calendar1); 

    } 

    function get_calendar(day_no, days){ 

table = document.createElement('table'); 
var tr = document.createElement('tr'); 

//row for the day letters 
for(var c=0; c<=6; c++){ 
    var td = document.createElement('td'); 

    td.innerHTML = "SMTWTFS"[c]; 
    tr.appendChild(td); 
} 
table.appendChild(tr); 

//create 2nd row 
tr = document.createElement('tr'); 
var c; 
for(c=0; c<=6; c++){ 
    if(c == day_no){ 
     break; 
    } 
    var td = document.createElement('td'); 
    td.innerHTML = ""; 
    tr.appendChild(td); 
} 

var count = 1; 
for(; c<=6; c++){ 
    var td = document.createElement('td'); 
    td.innerHTML = count; 
    count++; 
    tr.appendChild(td); 
} 
table.appendChild(tr); 

//rest of the date rows 
for(var r=3; r<=7; r++){ 
    tr = document.createElement('tr'); 
    for(var c=0; c<=6; c++){ 
     if(count > days){ 
      table.appendChild(tr); 
      return table; 
     } 
     var td = document.createElement('td'); 
     td.innerHTML = count; 
     count++; 
     tr.appendChild(td); 
    } 
    table.appendChild(tr); 

} 

return table; 

} 

function GetContext(){ 

if (table != null) { 
    for (var i = 0; i < table.rows.length; i++) { 
     for (var j = 0; j < table.rows[i].cells.length; j++) 
     table.rows[i].cells[j].onclick = function() { 
      tableText(this); 

     }; 
    } 
} 

function tableText(tableCell) { 
    //alert(tableCell.innerHTML); 
    tableCell.setAttribute('style', 'background-color: #fff'); 
    var index = tableCell.cellIndex; 
    var day_name1 = ['Sun','Mon','Tue','Wed','Thu','Fri','Sat']; 
    var pressDay = day_name1[index]; 
    var data = tableCell.innerHTML; 
    document.getElementById("field").value = pressDay + ", " +data+"- "+ month_name[month]+"- "+year; 
    } 
return fields; 
} 
+0

:しかし、あなたは新しいアプローチのいずれかを使用することができます。多分NodeJS –

+1

[JavaScriptはMySQLに接続できますか?](http://stackoverflow.com/questions/3020751/can-javascript-connect-with-mysql) –

答えて

関連する問題