jquery+ajax+%24.getJson.docx

js 同时被 3 个专栏收录
27 篇文章 0 订阅
26 篇文章 0 订阅
26 篇文章 0 订阅

<%@ 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%>">

    

      

<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">

 <title>省市县级联</title>

 <script type="text/javascript" src="jquery/jquery-1.4.2.js"></script>

 <script type="text/javascript" src="extjs/ext/jquery.json.js"></script>

 <script type="text/javascript">

 $(document).ready(function() {

    

$.getJSON(

"city",

 function(data){ 

$.each(data,function(cityIndex,city)

alert(city["cityname"]);

$("#province").empty();  //清空省列表

$("#province").append("<option value='0'>----选择省份----</option>");  //添加一个初始化选择项

$("#province").append("<option value="+city["cityid"]+">"+city["cityname"]+"</option>");

});

 }

   );

});

 

  function findCity(){

   $("#city").empty();  //清空城市列表

   $("#city").append("<option value='0'>----选择城市----</option>");  //添加一个初始化选择项

   $("#district").empty();   //清空区县列表

   $("#district").append("<option value='0'>----选择县区----</option>");  //添加初始化区县

   $.ajax({     

    type: "POST",   //发送给服务器的类型是 post

    url: "city",   //发送到服务器的地址 

    data: "op=findCity&pid="+$("#province").val(), //请求的参数

    dataType: "Json",   //接受返回的数据类型

    success:function(data){  //定义回调函数  success 为成功返回

     //1.转换成jquery对象,2.查找里面的citys节点,3.查找里面的 ctiy 节点

     $(data).find("citys").find("city").each(function (){//遍历 city节点

      var cid=$(this).find("cid").text();   //获取cid 的值

      var cname=$(this).find("cname").text();  //获取 cname的值

      $("#city").append("<option value='"+cid+"'>"+cname+"</option>"); //添加到city 列表中

     });

    }

   });

  }

  function findDistrict(){

   $("#district").empty();

   $("#district").append("<option value='0'>----选择县区----</option>");

   $.ajax({

    type: "POST",

    url: "district.do",

    data: "op=findDistrct&cid="+$("#city").val(),

    dataType: "xml",

    success: function (data){

     $(data).find("districtList").find("district").each(function (){

      var did=$(this).find("did").text();

      var dname=$(this).find("dname").text();

      $("#district").append("<option value='"+did+"'>"+dname+"</option>");

     });

    }

   });

  }

 </script>

 </head>

 <body>

    <select id="province" onchange="findCity()">

     <option value="0">----选择省份----</option>

     <c:forEach items="${provinceList}" var="p">

      <option value="${p.pid }">${p.pname }</option>

     </c:forEach>

    </select>

    <select id="city" onchange="findDistrict()">

     <option value="0">----选择城市----</option>

    </select>

    <select id="district">

     <option value="0">----选择县区----</option>

    </select>

  </body>

</html>

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 打赏
    打赏
  • 扫一扫,分享海报

参与评论 您还未登录,请先 登录 后发表或查看评论
©️2022 CSDN 皮肤主题:编程工作室 设计师:CSDN官方博客 返回首页

打赏作者

m13666368773

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值