城市四级联动,js和jquery对ajax的支持结合html,json

                                                                 jdbc工具类

                                                     

public class JdbcUtils {

public static BasicDataSource bs=null;

static{
Properties p = new Properties();
try {
p.load(JdbcUtils.class.getClassLoader().getResourceAsStream("properties/MysqlConfig.properties"));
bs= new BasicDataSource();
bs.setUsername(p.getProperty("username"));
bs.setPassword(p.getProperty("password"));
bs.setUrl(p.getProperty("url"));
bs.setDriverClassName(p.getProperty("className"));
bs.setMaxActive(Integer.parseInt(p.getProperty("MaxActive")));
bs.setInitialSize(Integer.parseInt(p.getProperty("initSize")));
bs.setMaxWait(Long.parseLong(p.getProperty("maxWait")));
} catch (Exception e) {
e.printStackTrace();
System.out.println("文件加载失败");
}

}

public static DataSource getDataSource(){

return bs;

}

}

数据库配置文件:

username=root
password=123456
MaxActive=5
url=jdbc:mysql:///city
className=com.mysql.jdbc.Driver
maxWait=5000
initSize=3

实体类

public class Os_district {
private int id;
private String name;
private int level;
private int upid;
public Os_district() {
super();
// TODO Auto-generated constructor stub
}
public Os_district(int id, String name, int level, int upid) {
super();
this.id = id;
this.name = name;
this.level = level;
this.upid = upid;
}
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public int getLevel() {
return level;
}
public void setLevel(int level) {
this.level = level;
}
public int getUpid() {
return upid;
}
public void setUpid(int upid) {
this.upid = upid;
}
@Override
public int hashCode() {
final int prime = 31;
int result = 1;
result = prime * result + id;
result = prime * result + level;
result = prime * result + ((name == null) ? 0 : name.hashCode());
result = prime * result + upid;
return result;
}
@Override
public boolean equals(Object obj) {
if (this == obj)
return true;
if (obj == null)
return false;
if (getClass() != obj.getClass())
return false;
Os_district other = (Os_district) obj;
if (id != other.id)
return false;
if (level != other.level)
return false;
if (name == null) {
if (other.name != null)
return false;
} else if (!name.equals(other.name))
return false;
if (upid != other.upid)
return false;
return true;
}
@Override
public String toString() {
return "Os_district [id=" + id + ", name=" + name + ", level=" + level
+ ", upid=" + upid + "]";
}

}

                                                                    Servlet

public class DoServlet extends HttpServlet {

public void service(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=utf-8");
String path = request.getRequestURI();
path = path.substring(path.lastIndexOf("/"), path.lastIndexOf("."));
CityDaoImpl city = new CityDaoImpl();
PrintWriter out = response.getWriter();
if ("/Province".equals(path)) {
try {
JSONArray jsonProcince = JSONArray.fromObject(city
.findAllProvince());
out.println(jsonProcince);

} catch (Exception e) {
e.printStackTrace();
}
}

if ("/City".equals(path)) {
int id = Integer.parseInt(request.getParameter("id"));
try {
JSONArray jsonCity = JSONArray.fromObject(city.findAllByID(id));
out.println(jsonCity);
} catch (Exception e) {
e.printStackTrace();
}
}

if ("/Xian".equals(path)) {
int id = Integer.parseInt(request.getParameter("id"));
try {
JSONArray jsonXian = JSONArray.fromObject(city.findAllByID(id));
out.println(jsonXian);
} catch (Exception e) {
e.printStackTrace();
}
}

if ("/Xiang".equals(path)) {
int id = Integer.parseInt(request.getParameter("id"));
try {
JSONArray jsonXiang = JSONArray
.fromObject(city.findAllByID(id));
out.println(jsonXiang);
} catch (Exception e) {
e.printStackTrace();
}
}

}

}

  City.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<!--<script type="text/javascript" src="js/my.js"></script>-->
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
/* function province(){
var xhr = getXhr();
//alert(xhr);
$(‘province‘).innerHTML=‘‘;
xhr.open(‘get‘,‘Province.do‘,true);
xhr.onreadystatechange=function(){
if(xhr.readyState==4&&xhr.status==200){
var text=xhr.responseText;
var jsontext = JSON.parse(text);
for(var i=0;i<jsontext.length;i++){
var option = document.createElement("OPTION");
//alert(jsontext[i].name);
//option.text=jsontext[i].name;
option.text=jsontext[i].name;
option.value=jsontext[i].id;
//alert(jsontext[i].name);
$("province").options.add(option);
}
}
};
xhr.send(null);

}
function provinceChange(id){

//alert(code);
var xhr = getXhr();
//alert(xhr);
$(‘city‘).innerHTML=‘‘;
$(‘xian‘).innerHTML=‘‘;
$(‘xiang‘).innerHTML=‘‘;
xhr.open(‘get‘,‘City.do?id=‘+id,true);
xhr.onreadystatechange=function(){
if(xhr.readyState==4&&xhr.status==200){
var text=xhr.responseText;
var jsontext = JSON.parse(text);
for(var i=0;i<jsontext.length;i++){
var option = document.createElement("OPTION");

option.text=jsontext[i].name;
option.value=jsontext[i].id;
//alert(jsontext[i].name);
$("city").options.add(option);
}
}
};
xhr.send(null);

}

function cityChange(id){

//alert(cityCode);
var xhr = getXhr();
//alert(xhr);
$(‘xian‘).innerHTML=‘‘;
$(‘xiang‘).innerHTML=‘‘;
xhr.open(‘get‘,‘Xian.do?id=‘+id,true);
xhr.onreadystatechange=function(){
if(xhr.readyState==4&&xhr.status==200){
var text=xhr.responseText;
//alert(text);
var jsontext = JSON.parse(text);
//alert(jsontext);
for(var i=0;i<jsontext.length;i++){
var option = document.createElement("OPTION");
option.text=jsontext[i].name;
option.value=jsontext[i].id;
//alert(jsontext[i].name);
$("xian").options.add(option);
}
}
};
xhr.send(null);

}

function xianChange(id){

//alert(cityCode);
var xhr = getXhr();
//alert(xhr);
$(‘xiang‘).innerHTML=‘‘;
xhr.open(‘get‘,‘Xiang.do?id=‘+id,true);
xhr.onreadystatechange=function(){
if(xhr.readyState==4&&xhr.status==200){
var text=xhr.responseText;
//alert(text);
var jsontext = JSON.parse(text);
//alert(jsontext);
for(var i=0;i<jsontext.length;i++){
var option = document.createElement("OPTION");
option.text=jsontext[i].name;
option.value=jsontext[i].id;
//alert(jsontext[i].name);
$("xiang").options.add(option);
}
}
};
xhr.send(null);

} */

$(function(){

$.ajax({
‘url‘: ‘Province.do?‘,
‘type‘:‘get‘,
‘dataType‘:‘json‘,
‘success‘:function(data){

for(var i=0;i<data.length;i++){
$(‘#province‘).append("<option value="+data[i].id+">"+data[i].name+"</option>");
}
},
‘async‘:false
})

$(‘#province‘).change(function(){
$(‘#city‘).html("<option>-----请选择城市-----</option>");
$(‘#xian‘).html("<option>-----请选择县区-----</option>");
$(‘#xiang‘).html("<option>-----请选择乡镇-----</option>");
var $obj = $(this).val();
//alert($obj)
$.ajax({
‘url‘:‘City.do‘,
‘data‘:{‘id‘:$obj},
‘dataType‘:‘json‘,
‘success‘:function(data){
for(var i=0;i<data.length;i++){
$(‘#city‘).append("<option value="+data[i].id+">"+data[i].name+"</option>");
}
}
})
})

$(‘#city‘).change(function(){

$(‘#xian‘).html("<option>-----请选择县区-----</option>");
$(‘#xiang‘).html("<option>-----请选择乡镇-----</option>");
var $obj = $(this).val();
//alert($obj)
$.ajax({
‘url‘:‘Xian.do‘,
‘data‘:{‘id‘:$obj},
‘dataType‘:‘json‘,
‘success‘:function(data){
for(var i=0;i<data.length;i++){
$(‘#xian‘).append("<option value="+data[i].id+">"+data[i].name+"</option>");
}
}
})
})

$(‘#xian‘).change(function(){

$(‘#xiang‘).html("<option>-----请选择乡镇-----</option>");
var $obj = $(this).val();
//alert($obj)
$.ajax({
‘url‘:‘Xiang.do‘,
‘data‘:{‘id‘:$obj},
‘dataType‘:‘json‘,
‘success‘:function(data){
for(var i=0;i<data.length;i++){
$(‘#xiang‘).append("<option value="+data[i].id+">"+data[i].name+"</option>");
}
}
})
})

})

</script>
<body align=‘center‘ style=‘top:200px‘>
<p><b>城市四级联动</b></p>
<select id="province" >
<option id="p1">==请选择省份==</option>
</select>
<select id="city" >
<option>==请选择城市==</option>
</select>
<select id="xian" >
<option>==请选择县区==</option>
</select>
<select id="xiang">
<option>==请选择乡镇==</option>
</select>
</body>
</html>

                 

原文地址:https://www.cnblogs.com/lingl/p/8799357.html

时间: 2024-08-28 19:29:38

城市四级联动,js和jquery对ajax的支持结合html,json的相关文章

原生JS模拟JQuery封装Ajax

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" con

JavaScript之Ajax-6 Ajax的增强操作(jQuery对Ajax的支持、表单操作)

一.jQuery对Ajax的支持 load() - 作用: 将服务器返回的数据字节添加到符合要求的节点之上 - 用法: $obj.load(请求地址,请求参数) - 请求参数 - "username=tom&age=22" - {'username':'tom','age':22} - 有请求参数时,load方法发送POST请求,否则发送GET请求 get() - 作用: 发送GET类型的请求 - 用法: $.get(请求地址,请求参数,回调函数,服务器返回的数据类型) - 说

jquery用ajax方式从后台获取json数据后如何将内容填充到下拉列表

对于问题从后台获取json数据,将内容填充到下拉列表,代码非常简单,具体过程请看下面代码. 需求:url:链接     par:ID       sel:下拉列表选择器 function BuildSelectBox(url, par, sel) {  $(sel).empty();  $.getJSON(url, { id: par }, function (json, textStatus) {   for (var i = json.length - 1; i >= 0; i--) {  

IT兄弟连 JavaWeb教程 jQuery对AJAX的支持

jQuery对AJAX的支持 jQuery对Ajax请求的创建.发送.响应.注册数据处理函数.JSON的解析和缓存以及传参等都进行了相应的封装,同时也考虑了浏览器的兼容性问题. jQuery中对AJAX支持核心函数 jQuery中对Ajax支持的核心函数是$.ajax()函数,$.ajax()函数的代码结构如下: $.ajax({ url : 请求地址, type : 请求方式, async : 默认为true,表示异步请求,false表示同步请求, data : 请求参数, dataType

【JavaWeb】jQuery对Ajax的支持

jQuery对Ajax的支持 jQuery对Ajax进行封装,提供了$.ajax()方法 语法:$.ajax(options) 常用设置项 说明 url 发送请求地址 type 请求类型get|post data 向服务器传递的参数 dataType 服务器响应的数据类型text|json|xml|html|jsonp|script success 接收响应时的处理函数 error 请求失败时的处理函数 实例代码 MusicServlet.java package demo; import ja

通过jquery的ajax异步请求接收返回json数据

jquery的ajax异步请求接收返回json数据方法设置简单,一个是服务器处理程序是返回json数据,另一种就是ajax发送设置的datatype设置为jsonp格式数据或json格式都可以. 代码示例如下: $('#send').click(function () { $.ajax({ type : "GET", url : "a.php", dataType : "jsonp", success : function (data) { $.

原生js和jquery发送ajax请求及封装

原生js                                   // ajax get 五部曲function ajax_get(url,data){ // 异步对象 var ajax=new XMLHttpRequest(); // 设置url和请求方式 // url方法 如果有数据要把数据拼接到url中?name=jack&age=20 if(data){ url+=?; url+=data; }else{}; ajax.open('get',url); // 发送请求 aja

【第2章第300回】原生JS与jQuery对AJAX的实现

一.定义 W3C里这么解释AJAX: AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML).AJAX 不是新的编程语言,而是一种使用现有标准的新方法.AJAX 是与服务器交换数据并更新部分网页的艺术,在不重新加载整个页面的情况下. 就是利用JS来无刷新与后端交互,通过get和post方式把数据发送到后端,或者请求后端的数据,然后根据请求的数据进行改变DOM节点等操作,从而取消掉用form的submit方式一提交就会跳转页面的情况

解决iscoll.js 与jquery的AJAX配合使用时会造成回弹的问题

问题造成原因是因为iscoll会通过DOM来获取滚动区域的高度,而AJAX异步请求会在其获取滚动区域后再次改变DOM结构,滚动区域的高度会发生变化会造成回弹.AJAX请求改为同步( 添加 async: false,)即可(个人理解) http://www.cnblogs.com/JreeyQi/p/4926348.html(转载)