jquery&ajax实例

java_xh

浏览: 9988 次
性别:
来自: 深圳

最近访客更多访客>>

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (6)

社区版块

存档分类

Ajax jQuery XML DAO HTML

纯属没事，第一天学习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的确很强大代码精简了不少，效果也不错

8
顶

0
踩

分享到：