Servlet + json + ajax Integration

Simulate two-level menu Association in the drop-down list

1. Page

<Tr>
<Td align = "right"> <font color = "red"> * </font> Level 1 service type: </td>
<Td>
<Select name = "dept" id = "dept" onchange = "loadDeptChild (this. options [this. options. selectedIndex]. value)"/>
<Option value = "0"> Select... </option>
<C: forEach items = "$ {depts}" var = "dept">
<Option value = "$ {dept. id}" >$ {dept. name} </option>
</C: forEach>
</Select>
<Span style = "color: red" >$ {errDept} </span>
</Td>
</Tr>
<Tr>
<Td align = "right"> Level 2 service type: </td>
<Td>
<Select name = "deptChild" id = "deptChild">
<Option value = "0"> Select... </option>
</Select>
</Td>
</Tr>

2. js

Function loadDeptChild (dept ){
Var url = "servlet/CustomerServlet? Action = loadDeptChild & dept = "+ dept;
$. Get (url, null, function (data ){
Var objs = eval ("(" + data + ")"); // parse the json object
Var deptChild = $ ("# deptChild ");
DeptChild. empty (); // initialization otherwise append
DeptChild. append ("<option value = '0'> Select... </option> ");
For (var I = 0; I <objs. length; I ++ ){
DeptChild. append ("<option value = '" + objs [I]. id + "'>" + objs [I]. name + "</option> ");
}
});
}

3. servlet

/**
* Achieve select-Level 2 Association of service types
*
* @ Throws ServletException
* @ Throws IOException
*/
Public void loadDeptChild () throws ServletException, IOException {
// Set page UTF-8 encoding
// Response. setContentType ("text/html; charset = UTF-8 ");
// It can be automatically recognized as a Json object; otherwise, the eval json Parsing is invalid.
Response. setContentType ("application/x-javascript; charset = UTF-8 ");
PrintWriter out = response. getWriter ();


Integer dept = Integer. parseInt (request. getParameter ("dept "));
List <Dictionary> models = customerDao. getDeptChilds (dept );
If (models! = Null & models. size ()> 0 ){
// Construct a json object
StringBuffer json = new StringBuffer ();
Json. append ("[");
For (Dictionary model: models ){
Json. append ('{');
Json. append ("id:"). append (model. getId (). append (",");
Json. append ("name:"). append ("'"). append (model. getName (). trim (). append ("'");
Json. append ("},");
}
Json. deleteCharAt (json. length ()-1 );
Json. append ("]");
Out. println (json. toString ());
Out. close ();
} Else {
Out. println ("[{id: 0, name:''}] ");
Out. close ();
}
}