Ajax級聯選擇框
阿新 • • 發佈：2018-01-26
ready goods typeid cti ice turn 名稱 public seve
xmlHttp.send("type="+type);
<script language="javascript">
var xmlHttp;
function createRequest(type) {
//初始化對象並發出XMLHttpRequest請求
xmlHttp = false;
if (window.XMLHttpRequest) { // 除IE以外的瀏覽器
} else if (window.ActiveXObject) { // IE瀏覽器
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
}
if (!xmlHttp) {
alert("不能創建XmlHttp實例!");
return false;
}
xmlHttp.onreadystatechange = insertContents; //指定處理響應結果的方法
xmlHttp.open("POST", "typeService.jsp", true); //發出HTTP請求
xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xmlHttp.send("type="+type);
}
function insertContents() { //處理服務器返回的信息
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {
subType.innerHTML=xmlHttp.responseText;
} else {
alert(‘您請求的頁面發現錯誤‘);
}
}
}
</script>
<body>
<table width="600" border="0" align="center" cellpadding="-2" cellspacing="-2" bordercolordark="#FFFFFF">
<form action="" method="post" name="form1">
<tr>
<td width="20%" height="27">商品名稱：</td>
<td height="27" colspan="3">
<input name="goodsName" type="text" class="Sytle_text" id="bookID2" size="50">
</td>
</tr>
<tr>
<td height="27">所屬大類：</td>
<td width="35%" height="27">
<select name="type" class="textarea" id="type" onchange="createRequest(this.value)">
<%
JDBCDao dao = new JDBCDao();
List<String> types = dao.getTypes();
for (String type : types) {
out.println("<option value=‘"+type+"‘>" + type + "</option>");
}
%>
</select></td>
<td width="18%" height="27">所屬小類：</td>
<td width="42%" height="27" id="subType"> </td>
</tr>
<tr>
<td height="41">圖片文件：</td>
<td height="41">
<input name="picture" type="text" class="Style_upload" id="picture">
</td>
<td height="41">定 價：</td>
<td height="41">
<input name="price" size="8" type="text" class="Sytle_text" id="price">
(元)</td>
</tr>
<tr>
<td height="103">商品簡介：</td>
<td colspan="3"><span class="style5"> </span>
<textarea name="introduce" cols="50" rows="5" class="textarea" id="introduce"></textarea></td>
</tr>
<tr>
<td height="28" colspan="4" align="center"><input name="Button" type="button"
class="btn_grey" value="保存" onClick="mycheck();">
<input name="Submit2" type="reset" class="btn_grey" value="重置">
</td>
</tr>
</form>
</table>
<script language="javascript">
createRequest(form1.type.value);
</script>
</body>
<%
request.setCharacterEncoding("UTF-8");
String type = request.getParameter("type");
JDBCDao dao = new JDBCDao();
List<String[]> subTypes = dao.getSubTypes(type);
%>
<select name="typeID" class="textarea" id="typeID">
<%
for (String subType[] : subTypes) {
%>
<option value="<%=subType[0]%>"><%=subType[1]%></option>
<% }
%>
</select>
public List<String> getTypes() {
List types=new ArrayList(); // 創建List集合
Statement stmt = null;
ResultSet rs = null; // 創建JDBC結果集對象
Connection conn = getConn(); // 連接數據庫
try {
// 定義SQL查詢語句
String sql = "SELECT type FROM tb_type GROUP BY type";
stmt = conn.createStatement();
rs = stmt.executeQuery(sql); // 執行SQL查詢，並獲取結果集
while (rs.next()) { // 遍歷結果集
String type = rs.getString(1);
types.add(type); // 添加大分類信息到List集合
}
} catch (SQLException ex) {
Logger.getLogger(getClass().getName()).log(Level.SEVERE, null, ex);
} finally {
close(rs, stmt, conn); // 是否JDBC資源
}
return types; // 返回保存大分類信息的List集合
}
public List<String[]> getSubTypes(String type) {
List subTypes=new ArrayList(); // 創建List集合
Statement stmt = null;
ResultSet rs = null; // 創建JDBC結果集對象
Connection conn = getConn(); // 連接數據庫
try {
// 定義SQL查詢語句
String sql = "SELECT id,subType FROM tb_type where type=‘"+type+"‘";
stmt = conn.createStatement();
rs = stmt.executeQuery(sql); // 執行SQL查詢，並獲取結果集
while (rs.next()) { // 遍歷結果集
// 使用數組保存小分類信息
String subType[] = {rs.getString(1),rs.getString(2)};
subTypes.add(subType); // 添加小分類信息到List集合
}
} catch (SQLException ex) {
Logger.getLogger(getClass().getName()).log(Level.SEVERE, null, ex);
} finally {
close(rs, stmt, conn); // 是否JDBC資源
}
return subTypes; // 返回小分類信息的List集合
}
Ajax級聯選擇框
級聯選擇框常用與比較負責的網頁開發，例如實現的商品添加頁面中，需要選擇商品的分類，而分類信息又有層次，例如大分類和小分類就是兩層級聯，在用戶選擇商品所屬大類時，所屬小類的內容需要根據商品大分類替換分類內容。
代碼實現;
xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
send(args)
args：這個參數是請求的參數信息，它是一個字符串可以使用“&”符號連接多個參數。
xmlHttp.open("POST", "typeService.jsp", true); //發出HTTP請求
xmlHttp.send("type="+type);
<script language="javascript">
var xmlHttp;
function createRequest(type) {
//初始化對象並發出XMLHttpRequest請求
xmlHttp = false;
if (window.XMLHttpRequest) { // 除IE以外的瀏覽器
} else if (window.ActiveXObject) { // IE瀏覽器
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
}
if (!xmlHttp) {
alert("不能創建XmlHttp實例!");
return false;
}
xmlHttp.onreadystatechange = insertContents; //指定處理響應結果的方法
xmlHttp.open("POST", "typeService.jsp", true); //發出HTTP請求
xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xmlHttp.send("type="+type);
}
function insertContents() { //處理服務器返回的信息
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {
subType.innerHTML=xmlHttp.responseText;
} else {
alert(‘您請求的頁面發現錯誤‘);
}
}
}
</script>
<body>
<table width="600" border="0" align="center" cellpadding="-2" cellspacing="-2" bordercolordark="#FFFFFF">
<form action="" method="post" name="form1">
<tr>
<td width="20%" height="27">商品名稱：</td>
<td height="27" colspan="3">
<input name="goodsName" type="text" class="Sytle_text" id="bookID2" size="50">
</td>
</tr>
<tr>
<td height="27">所屬大類：</td>
<td width="35%" height="27">
<select name="type" class="textarea" id="type" onchange="createRequest(this.value)">
<%
JDBCDao dao = new JDBCDao();
List<String> types = dao.getTypes();
for (String type : types) {
out.println("<option value=‘"+type+"‘>" + type + "</option>");
}
%>
</select></td>
<td width="18%" height="27">所屬小類：</td>
<td width="42%" height="27" id="subType"> </td>
</tr>
<tr>
<td height="41">圖片文件：</td>
<td height="41">
<input name="picture" type="text" class="Style_upload" id="picture">
</td>
<td height="41">定 價：</td>
<td height="41">
<input name="price" size="8" type="text" class="Sytle_text" id="price">
(元)</td>
</tr>
<tr>
<td height="103">商品簡介：</td>
<td colspan="3"><span class="style5"> </span>
<textarea name="introduce" cols="50" rows="5" class="textarea" id="introduce"></textarea></td>
</tr>
<tr>
<td height="28" colspan="4" align="center"><input name="Button" type="button"
class="btn_grey" value="保存" onClick="mycheck();">
<input name="Submit2" type="reset" class="btn_grey" value="重置">
</td>
</tr>
</form>
</table>
<script language="javascript">
createRequest(form1.type.value);
</script>
</body>
<%
request.setCharacterEncoding("UTF-8");
String type = request.getParameter("type");
JDBCDao dao = new JDBCDao();
List<String[]> subTypes = dao.getSubTypes(type);
%>
<select name="typeID" class="textarea" id="typeID">
<%
for (String subType[] : subTypes) {
%>
<option value="<%=subType[0]%>"><%=subType[1]%></option>
<% }
%>
</select>
public List<String> getTypes() {
List types=new ArrayList(); // 創建List集合
Statement stmt = null;
ResultSet rs = null; // 創建JDBC結果集對象
Connection conn = getConn(); // 連接數據庫
try {
// 定義SQL查詢語句
String sql = "SELECT type FROM tb_type GROUP BY type";
stmt = conn.createStatement();
rs = stmt.executeQuery(sql); // 執行SQL查詢，並獲取結果集
while (rs.next()) { // 遍歷結果集
String type = rs.getString(1);
types.add(type); // 添加大分類信息到List集合
}
} catch (SQLException ex) {
Logger.getLogger(getClass().getName()).log(Level.SEVERE, null, ex);
} finally {
close(rs, stmt, conn); // 是否JDBC資源
}
return types; // 返回保存大分類信息的List集合
}
public List<String[]> getSubTypes(String type) {
List subTypes=new ArrayList(); // 創建List集合
Statement stmt = null;
ResultSet rs = null; // 創建JDBC結果集對象
Connection conn = getConn(); // 連接數據庫
try {
// 定義SQL查詢語句
String sql = "SELECT id,subType FROM tb_type where type=‘"+type+"‘";
stmt = conn.createStatement();
rs = stmt.executeQuery(sql); // 執行SQL查詢，並獲取結果集
while (rs.next()) { // 遍歷結果集
// 使用數組保存小分類信息
String subType[] = {rs.getString(1),rs.getString(2)};
subTypes.add(subType); // 添加小分類信息到List集合
}
} catch (SQLException ex) {
Logger.getLogger(getClass().getName()).log(Level.SEVERE, null, ex);
} finally {
close(rs, stmt, conn); // 是否JDBC資源
}
return subTypes; // 返回小分類信息的List集合
}
Ajax級聯選擇框