jquery&ajax实例

最新推荐文章于 2021-02-26 06:47:12 发布

java_xh

最新推荐文章于 2021-02-26 06:47:12 发布

阅读量120

点赞数

文章标签： Ajax jQuery XML DAO HTML ViewUI

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

java_xh

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery&ajax实例

纯属没事，第一天学习jquery，记录下以便以后查阅，如有什么不足之处，希望大家多多指教，小弟这里拜谢了；该实例为到处可见的ajax二级联动，一般作为ajax的入门demo了，下面记录下步骤： 1. 数据库创建 (mysql5.0) 表名 : department 字段： id (int) , dept_name(varchar(20)), pare...
复制链接

扫一扫