<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
//页面加载完之后加载
$(function () {
//GET 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数
/*
get方式:
url:请求路径
params:请求参数 key value key=value {"key":"value"}
function():回调函数 参数data 服务器返回的数据(参数)就是返回的结果
type:数据类型
返回内容格式,xml, html, script, json, text, _default。
*/
$.get("${pageContext.request.contextPath}/selectpro",function(d) {
//alert(d)
//获取id=proid的所在select
var $proid = $("#proid");
//遍历获取的数据
$(d).each(function () {
//向每个匹配的元素内部追加内容。
$proid.append($("<option value="+this.provinceid+">"+this.name+"</option>"))
})
},"json")
//当事件id发生改变时 触发change事件
$("#proid").change(function () {
//alert(this.value)
//获取当前id
var $pid = $(this).val();
//alert($pid)
//请求 url(路径) params(参数) 回调函数(回调数据)
$.get("${pageContext.request.contextPath}/selectCity",{
"pid":$pid},function (obj) {
//alert(obj)
//定位到id=cityid所在行
var $cityid = $("#cityid");
$cityid.html("<option>-请选择-</option>");
//遍历结果集
$(obj).each(function () {
$cityid.append($("<option value="+this.cityid+">"+this.name+"</option>"))
})
},"json")
})
});
</script>
</head>
<body>
<select id="proid" name="province">
<option>-省份-</option>
</select>
<select id="cityid" name="city">
<option>-请选择-</option>
</select>
</body>
</html>
多表联动Ajax
猜你喜欢
转载自blog.csdn.net/weixin_45627031/article/details/112253605
今日推荐
周排行