Multi-table linkage Ajax

<%@ 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>
Multi-table linkage Ajax

Guess you like
