jquery&ajax实例
纯属没事，第一天学习jquery，记录下 以便以后查阅，如有什么不足之处，希望大家多多指教，小弟这里拜谢了；
该实例为到处可见的ajax二级联动，一般作为ajax的入门demo了，下面记录下步骤：
1. 数据库创建 (mysql5.0)
表名 : department
字段 ： id (int) , dept_name(varchar(20)), parent(int)
2. 控制层代码
3. html代码
4.js代码
感觉jquery的确很强大 代码精简了不少，效果也不错
该实例为到处可见的ajax二级联动，一般作为ajax的入门demo了，下面记录下步骤：
1. 数据库创建 (mysql5.0)
表名 : department
字段 ： id (int) , dept_name(varchar(20)), parent(int)
2. 控制层代码
public ActionForward show(ActionMapping mapping, ActionForm form,
HttpServletRequest request, HttpServletResponse response) throws IOException {
request.setCharacterEncoding("utf-8");
response.setContentType("text/xml; charset=UTF-8");
String parent = request.getParameter("parent");
int pid = 0;
if (parent == null || parent.trim().length() < 1) {
return null;
}
pid = Integer.parseInt(parent);
List<Department> list = dao.findByProperty("parent", pid);
String xmlString = createXML(list);
// System.out.println("xml: " + xmlString);
PrintWriter out = response.getWriter();
out.print(xmlString);
out.flush();
return null;
}
private String createXML(List<Department> list) {
Document document = DocumentHelper.createDocument();
Element root = document.addElement("DEPARTMENTS");
Iterator<Department> it = list.iterator();
while (it.hasNext()) {
Department dept = it.next();
Element edept = root.addElement("DEPARTMENT");
edept.addElement("ID").addText(dept.getId()+"");
edept.addElement("DEPTNAME").addText(dept.getDeptName());
edept.addElement("PARENT").addText(dept.getParent()+"");
}
String xmlString = document.asXML();
return xmlString;
}
3. html代码
<html>
<head>
<title>cascade</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<script type="text/javascript" src="jquery/jquery.js"></script>
</head>
<body>
<select id="s1">
<option selected="selected" value="">--请选择--</option>
<option value="1">--a--</option>
<option value="2">--b--</option>
<option value="3">--c--</option>
<option value="4">--d--</option>
</select>
<select id="s2">
<option selected="selected" value="">--请选择--</option>
</select>
</body>
</html>
4.js代码
$(document).ready(function() {
$('#s1').change(function() {
$.ajax({
type: "POST",
url: "cascade.do",
data: "method=show&parent=" + $('#s1').get(0).value,
dataType : "xml",
success: function(xml) {
var depts = $(xml).find('DEPARTMENT')
clear();
if (depts && depts.length > 0) {
for (var i = 0; i < depts.length; i++) {
var id = $(depts[i]).find("ID").text();
var deptName = $(depts[i]).find("DEPTNAME").text();
var parent = $(depts[i]).find("PARENT").text();
var option = document.createElement("option");
option.setAttribute("value",id);
var text = document.createTextNode(deptName)
option.appendChild(text);
$('#s2').get(0).appendChild(option);
}
}
}
});
});
});
function clear() {
var selectobj = $('#s2').get(0);
var s = selectobj.options;
var n = s.length;
if (s && n > 0) {
for (var i = 0; i < n; i++) {
selectobj.removeChild(s[0]);
}
}
}
感觉jquery的确很强大 代码精简了不少，效果也不错