ajax级联

最新推荐文章于 2021-08-06 09:48:30 发布

原创最新推荐文章于 2021-08-06 09:48:30 发布 · 111 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#数据库 #javascript #ViewUI

ajax 专栏收录该内容

1 篇文章

订阅专栏

<script type="text/javascript">


	      var xmlHttp;

	      function createXMLHTTPRequest(){

	          if(window.XMLHTTPRequest){

	              xmlHttp = new XMLHTTPRequest();
	          }else if(window.ActiveXObject){
	              xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
	          }
	      }


	      function change(){
	         createXMLHTTPRequest();

	         var id =  document.getElementById("p").value;

	         var url = "validate_link.jsp?id="+id;

	         xmlHttp.open("get",url,true);

	         xmlHttp.onreadystatechange=callback;

	         xmlHttp.send(null);
	      }


	      function callback(){

	         if(xmlHttp.readyState==4){

	            if(xmlHttp.status==200){

	                prasXML();
	            }
	         }


	      }

	      function prasXML(){

	           var cityXML = xmlHttp.responseXML.documentElement;

	           var cityNodes = cityXML.getElementsByTagName("city");


	           var c = document.getElementById("c");
	           c.options.length=0;


	           for(var i=0;i<cityNodes.length;i++){

	               var id =  cityNodes[i].childNodes[0].childNodes[0].nodeValue;
	               var name =  cityNodes[i].childNodes[1].childNodes[0].nodeValue;

	               var o = new Option(name,id);

	               c.add(o);
	           }

	           if(cityNodes.length==0){
	               var o = new Option("城市","0");
	               c.add(o);
	           }
	      }
	</script>

  </head>

  <%

        Class.forName("com.microsoft.sqlserver.jdbc.SQLServerDriver");
		Connection conn = DriverManager.getConnection("jdbc:sqlserver://localhost:1433;DatabaseName=data","sa","123456");

		String sql = "select * from provice";

		PreparedStatement ps  =conn.prepareStatement(sql);

		ResultSet rs =   ps.executeQuery();


 %>

  <body>
       省份:
       <select name="provice" onchange="change()" id="p">
           <option value="0">省份</option>
           <%
              while(rs.next()){
            %>
                <option value="<%=rs.getInt("id")%>"><%=rs.getString("name")%></option>
            <%
              }
              rs.close();
              ps.close();
              conn.close();
             %>
       </select>

       城市:
       <select  id="c">
            <option value="0">城市</option>
       </select>


  </body>

<%
     response.setContentType("text/xml;charset=UTF-8");


     int id = Integer.parseInt(request.getParameter("id"));

     //System.out.println("----------"+id);
     Class.forName("com.microsoft.sqlserver.jdbc.SQLServerDriver");
	 Connection conn = DriverManager.getConnection("jdbc:sqlserver://localhost:1433;DatabaseName=data","sa","123456");

	 String sql = "select * from city where pid=?";

	 PreparedStatement ps  =conn.prepareStatement(sql);

	 ps.setInt(1,id);

	 ResultSet rs =   ps.executeQuery();

	 StringBuffer sb = new StringBuffer();
	 sb.append("<cities>");
	 while(rs.next()){

	     sb.append("<city><id>"+rs.getInt("id")+"</id><name>"+rs.getString("name")+"</name></city>");

	 }
	 sb.append("</cities>");
	 rs.close();
	 ps.close();
	 conn.close();
	 //System.out.println(sb.toString());
	 response.getWriter().write(sb.toString());



%>