JavaWeb（9）：AJAX(5)_H5之家 - 中国HTML5教程资源分享第一站

准备页面和ajax

1 <%@ page language="java" contentType="text/html; charset=utf-8" 2 pageEncoding="utf-8"%> 3 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" ""> 4 <html> 5 <head> 6 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 7 <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script> 8 <script type="text/javascript" src="js/index.js"></script> 9 <title>Insert title here</title> 10 <style type="text/css"> 11 #pdiv{ 12 margin:30px auto; 13 width:600px; 14 height:auto; 15 border:1px black solid; 16 } 17 </style> 18 </head> 19 <body> 20 <div id="pdiv"> 21 <select id="province"></select> 22 <select id="city"></select> 23 <select id="area"></select> 24 </div> 25 </body> 26 </html> 1 $(function() { 2 //访问页面显示省的信息 3 $.ajax({ 4 type:"post", 5 url:"SelectAllProServlet", 6 //data此处不需要 7 dataType:"json", 8 success : function(data) { 9 if (data.success) { 10 $("#province").append("<option vlaue='-1'>==请选择==</option>");//初始化下拉框 11 $("#city").append("<option vlaue='-1'>==请选择==</option>");//初始化下拉框 12 $("#area").append("<option vlaue='-1'>==请选择==</option>");//初始化下拉框 13 for (var i = 0; i < data.result.length; i++) { 14 $("#province").append( 15 "<option value='" + data.result[i].provinceid 16 + "'>" + data.result[i].province 17 + "</option>"); 18 } 19 20 } else { 21 alert("后台没有取出数据 !"); 22 } 23 }, 24 error : function(msg) { 25 console.log(msg); 26 } 27 }); 28 29 30 // 加载市级 31 $("#province").change( 32 function() { 33 $("#area").empty();//清空，否则会导致多次查询的堆积起来 34 $("#area") 35 .append("<option value='-1'>请选择</option>"); 36 var provinceid = $(this).val(); 37 $.ajax({ 38 type : "post", 39 url : "SelectCityServlet", 40 data : { 41 provinceid : provinceid//传出的参数类型是provinceid，值是provinceid 42 }, 43 dataType : "json", 44 success : function(data) { 45 if (data.success) { 46 $("#city").empty(); 47 $("#city") 48 .append("<option value='-1'>请选择</option>"); 49 for (var i = 0; i < data.result.length; i++) { 50 $("#city").append( 51 "<option value='" 52 + data.result[i].cityid + "'>" 53 + data.result[i].city 54 + "</option>"); 55 } 56 } else { 57 alert("后台没有取出数据 !"); 58 } 59 }, 60 error : function(msg) { 61 console.log(msg); 62 } 63 }); 64 }); 65 66 67 // 加载区 68 $("#city").change( 69 function() { 70 var cityid = $(this).val(); 71 $.ajax({ 72 type : "post", 73 url : "SelectareaServlet", 74 data : { 75 cityid : cityid 76 }, 77 dataType : "json", 78 success : function(data) { 79 if (data.success) { 80 $("#area").empty();//清空，否则会导致多次查询的堆积起来 81 $("#area") 82 .append("<option value='-1'>请选择</option>"); 83 for (var i = 0; i < data.result.length; i++) { 84 $("#area").append( 85 "<option value='" 86 + data.result[i].areaid + "'>" 87 + data.result[i].area 88 + "</option>"); 89 } 90 } else { 91 alert("后台没有取出数据 !"); 92 } 93 }, 94 error : function(msg) { 95 console.log(msg); 96 } 97 }); 98 }); 99 });

分享给小伙伴们：

本文标签： JavaWeb，AJAX/">JavaWeb，AJAX

发表评论愿您的每句评论，都能给大家的生活添色彩，带来共鸣，带来思索，带来快乐。

本类最热新闻