<%@ page language= "java" import= "java.util.*" pageencoding= "UTF-8"%>
<%@ taglib prefix= "C" uri= "Http://java.sun.com/jsp/jstl/core"%>
<%
String path = Request.getcontextpath ();
String basepath = request.getscheme () + "://" +request.getservername () + ":" +request.getserverport () +path+ "/";
%>
<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" >
<base href= "<%=basePath%>" >
<title>my JSP ' index.jsp ' starting page</title>
<meta http-equiv= "Pragma" content= "No-cache" >
<meta http-equiv= "Cache-control" content= "No-cache" >
<meta http-equiv= "Expires" content= "0" >
<meta http-equiv= "keywords" content= "keyword1,keyword2,keyword3" >
<meta http-equiv= "description" content= "This is my page" >
<!--
<link rel= "stylesheet" type= "Text/css" href= "Styles.css" >
-
<script type= "Text/javascript" src= "Jquery-1.7.2.js" ></script>
<script type= "Text/javascript" >
$(
function () {
Alert ("Asdf");
$.ajax ({
URL: "Proviceservlet",
Type: "Get",
data:{"type": "Provice"},
Success:function (msg) {
for (Var i=0;i<msg.length;i++) {
$ ("#provice"). Append ("<option value=" +msg[i].proviceid+ ">" +msg[i].provicename+ "</option>");
}
}
} );
$ ("#provice"). Change (
function () {
Alert ("Enter the city");
$ ("#city option:gt (0)"). Remove ();
$.ajax ({
URL: "Cityservlet",
Type: "Get",
data:{"type": "Provice", "Proviceid": $ ("#provice"). attr ("value")},
DataType: "JSON",
Success:function (msg) {
for (Var i=0;i<msg.length;i++) {
$ ("#city"). Append ("<option value=" +msg[i].cityid+ ">" +msg[i].cityname+ "</option>");
}
}
});
}
);
$ ("#city"). Change (
function () {
Alert ("Enter the area");
$ ("#area option:gt (0)"). Remove ();
Alert ($ ("#city"). attr ("value"));
$.ajax ({
URL: "Areaservlet",
Type: "Get",
data:{"type": "Area", "Cityid": $ (' #city '). attr ("value")},
Success:function (msg) {
for (Var i=0;i<msg.length;i++) {
$ ("#area"). Append ("<option value=" +msg[i].areaid+ ">" +msg[i].areaname+ "</option>");
}
}
});
Alert ($ ("#city"). attr ("value"));
}
);
<--Hidden span-->
$ ("span"). Hide ();
<--Submit Form--
$ ("#create"). Click (
function () {
Alert ("Submit form");
Alert ($ ("#form_1"). Serialize ()); One of the successful, feasible ways to write this to 97 rows of data,
$.ajax ({
URL: "Finalservlet",
Type: "Post",
data:{"Proviceid": $ ("#provice"). attr ("value"), "Cityid": $ (' #city '). attr ("value"), "Areaid": $ ("#area"). Val ()},
Success:function () {
$ (". Success"). Show ();
}
});
return false;
}
);
}
);
</script>
<body>
<form id= "Form_1" >
<table align= "center" >
<tr>
<td>
<select id= "Provice" name= "Proviceid" >
<option >--Please select Province--</option>
</select>
</td>
</tr>
<tr>
<td>
<select id= "City" name= "Cityid" >
<option >--Please select Downtown--</option>
</select>
</td>
</tr>
<tr>
<td>
<select id= "area" name= "Areaid" >
<option >--Please select County District--</option>
</select>
</td>
</tr>
<tr>
<td>
<input id= "Create" type= "button" value= "Commit"/>
</td>
</tr>
<tr>
<td>
<span class= "Success" > Submit success </span>
<span class= "fail" > Commit failure </span>
</td>
</tr>
</table>
</form>
</body>
The Jquery+ajax+json of the small trial sledgehammer