1. AJAX + DOM + SQL
a. Use AJAX + DOM + SQL to create 2 drop down list
Code 1 (Client side ) : ajax.jsp
<script type="text/javascript">
var request = new XMLHttpRequest();
function getdata(s1)
{
var s=0;
s = s1.value;
request.open("GET", "GetData.jsp?cat=" + s, true);
request.onreadystatechange = updatePage;
request.send(null);
}
function updatePage()
{
if (request.readyState == 4)
{
if (request.status == 200)
{
clearSelect(); //先清除上一次選的 // Clear previous selected item
var items = request.responseText.split(","); //去掉逗號後的資料一一放入陣列
// Put all the items which separated by comma into the array and remove comma
var ss = document.getElementById('food');
for(var i=0;i<=items.length-2;i++)
{
var opt = document.createElement('option');
var txt = document.createTextNode(items[i]);
opt.appendChild(txt);
ss.appendChild(opt);
}
}
}
}
function clearSelect()
{
var foodSelect = document.getElementById('food');
for (var i = foodSelect.length - 1; i>=0; i--)
{
foodSelect.removeChild(foodSelect.options[i]);
}
}
</script>
</head>
<body>
<%
int s = 0;
if (request.getParameter("cat") != null)
s = Integer.parseInt(request.getParameter("cat"));
//以下幾行都是設定連線資料庫，用來取第一個下拉選單
// The following lines are for setting connection to database and get data to fill the drop down list
Class.forName("com.microsoft.sqlserver.jdbc.SQLServerDriver");
String connectionUrl = "jdbc:sqlserver://localhost:1433;" +
"databaseName=MyDB;user=sa;password=sa;";
Connection con = DriverManager.getConnection(connectionUrl);
Statement stmt = con.createStatement();
ResultSet rs;
rs = stmt.executeQuery("Select * From Category");
%>
//設定下拉選單
// set up the drop down list
<form id="form1" method="get" action="001.jsp">
<select name="cat" id="cat" onchange="getdata(this)">
<option>請選擇</option>
<% while(rs.next()) { %> //當有資料時，執行下面 // when data is exist, execute next
<option value="<%=rs.getInt(1) %>" //rs的第一欄轉成整數
// convert the first column data of the rs to integer
<% if (rs.getInt(1) == s) out.print("selected"); %>>
//若下拉選的(s)，就是rs.getInt(1)，就印出 selected，這樣選單就會留在剛剛選的項目
// If select (s) then print "selected", thus the list will remain the selected item
<%=rs.getString(2) %> //rs的第二欄是字串，顯示出來 //rs is the 2nd column string, display it
</option>
<% } %>
</select>
<select name="food" id="food">
</select>
</form>
</body>
Code 2 (server side) : GetData.jsp
<%@ page language="java" contentType="text/html; charset=UTS-8"
pageEncoding="UTF-8" import="java.sql.*"%><%
int s = 0;
if (request.getParameter("cat") != null)
s = Integer.parseInt(request.getParameter("cat"));
//這裡的"cat"本身就是1.2.3，只是將字串轉整數
// The "cat" is 1.2.3, just convert string to integer
//以下幾行都是設定連線資料庫，用來取第二個下拉選單
// The following lines are for setting connection to database and get data to fill the 2nd drop down list
Class.forName("com.microsoft.sqlserver.jdbc.SQLServerDriver");
String connectionUrl = "jdbc:sqlserver://localhost:1433;" +
"databaseName=MyDB;user=sa;password=sa;";
Connection con = DriverManager.getConnection(connectionUrl);
//設定 "準備好的SQL語法"，幾個"?"就對應幾個 "pstmt.setInt(1, s);"，將"S"放到"?"
// set up "the prepared SQL statement", map each"?" to each "pstmt.setInt(1, s);", and put "S" to "?"
PreparedStatement pstmt = con.prepareStatement("Select * From Foods Where CatID = ?");
pstmt.setInt(1, s);
ResultSet rs2 = pstmt.executeQuery();
while(rs2.next())
{
out.print(rs2.getString(3) + ",");
}
%>
b. AJAX verify username and password
Code 1 (Client side) : reg.jsp
</head>
<body>
<form method="post" action="inscode.jsp">
<p>使用者帳號:<input type="text" name="username" id="username" /></p>
<p>使用者地址:<input type="text" name="addr" id="addr" /></p>
<p>使用者電話:<input type="text" name="tel" id="tel" /></p>
<p><input type="submit" value="新增帳號" /> </p>
</form>
</body>
</html>
Code 2 (Server side: : inscode.jsp
No comments:
Post a Comment