-------select.jsp------------------------------------------------------------------------------------------------------------------------------------------
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <title>My JSP 'index.jsp' starting page</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <!-- <link rel="stylesheet" type="text/css" href="styles.css"> --> <script type="text/javascript" src="js/jquery-3.1.0.min.js"></script> </head> <body> <select id="s1" οnchange="jquery_send()"> <option value="cd">成都</option> <option value="cq">重庆</option> </select> <select id="s2"> </select> </body> <script type="text/javascript"> //方式一.json------------------------------------------------------------------------------------------------ //创建XMLHttpRequest对象 /*function createXMLHttpRequest(){ var XMLHttp; try{ //大多数浏览器,以及IE7和IE更高版本 XMLHttp = new XMLHttpRequest(); }catch(e){ try{ //IE5.5及以下的版本 XMLHttp = new ActiveXObject("Microsoft.XMLHTTP"); }catch(e){ try{ //IE6.0 XMLHttp = new ActiveXObject("Msxml2.XMLHTTP"); }catch(e){ //以上都不是，执行的代码 } } } return XMLHttp; } function send(){ var s1 = document.getElementById("s1").value; var XMLHttp = createXMLHttpRequest(); //1.打开服务器的连接 XMLHttp.open("post","json.do?optionName="+s1, true); XMLHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); //2.发送请求 XMLHttp.send(null); //3.接收服务器响应 XMLHttp.onreadystatechange = function(){ //4.表示服务器响应结束，200表示服务器成功响应 if(XMLHttp.readyState == 4 && XMLHttp.status == 200){ var xy = XMLHttp.responseText; var xy_obj = eval("("+xy+")"); //把后台传过来的json字符串，转换成js类型 $("#s2").empty(); for(var i=0; i<xy_obj.length; i++){ $("#s2").append("<option value='"+xy_obj[i].option_value+"'>"+xy_obj[i].option_name+"</option>"); } } } } $(function(){ send(); })*/ //方式二.jquery的ajax函数-------------------------------------------------------------------------------------------------- function jquery_send(){ $.ajax({ type:"post", url:"json.do?optionName="+$("#s1").val(), dataType:"json", success:function(data){ $("#s2").empty(); $.each(data,function(i,obj){ $("#s2").append("<option value='"+obj.option_value+"'>"+obj.option_name+"</option>"); }); } }) } $(function(){ jquery_send(); }) </script> </html>
