Question

我正在开发一个Web应用程序，其中我使用javascript，普通的servlet类和jsp页面。我希望我的javascript文件获取数据库表的数据。请告诉我如何实现这一目标。下面是我的jsp页面代码。

 <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;
}

Answer 1

在询问查询之前，您应该使用搜索。看一下这个查询：Can JavaScript connect with MySQL?

这是不正常的方式，连接浏览器和服务器端数据库。但是你可以使用一种新方法：

http://www.clusterdb.com/mysql/mysql-cluster-with-node-js
https://github.com/sidorares/nodejs-mysql-native

如何从javascript访问MySql数据库的数据

1 个答案: