`
T01闻慧15
  • 浏览: 2937 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

Ajax添加省份到下拉框里

阅读更多

一、jsp页面

<select name="province" >
         <option>请选择省份:</option>
</select>

 

$(function(){
 //第一步:创建XMLHttpRequest对象
 var xmlhttp;
 if (window.XMLHttpRequest){
   xmlhttp=new XMLHttpRequest();
   }
 else{
   xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
   }
 //第二步:调用open()
 xmlhttp.open("GET","${pageContext.servletContext.contextPath}/cityServlet.do?method=chooseCity",true);
//第三步:调用send() 
xmlhttp.send();
//第四步 
 xmlhttp.onreadystatechange = function(){
  if (xmlhttp.readyState==4){
   if(xmlhttp.status==200){
       var city = xmlhttp.responseText;
       var provinces = city.split(",");
       for(var i = 0 ; i<provinces.length-1 ; i=i+2){
        var opt = new Option(provinces[i+1],provinces[i]);
        $("select[name='province']").append(opt); 
       }
     }else{
      alert("错误");
     }
  }
 };
});

  

二、CityServlet.java(继承HttpServlet、重写方法、配置xml)

response.setContentType("text/html;charset=UTF-8");
PrintWriter out = response.getWriter();
out.print("01,山西,02,山东,03,河北");

 

分享到:
评论

相关推荐

    ajax 实现二级下拉框,地址联动,serverlet,java,xmlHttp

    在这个特定的场景中,我们讨论的是如何使用Ajax实现二级下拉框的联动,以及涉及到的技术如Servlet、Java和XMLHttp。 首先,二级下拉框联动通常用于地理信息的选择,例如省份选择后,城市下拉框自动更新对应省份的...

    ajax 实现下拉框 省份+城市

    当用户在省份下拉框中做出选择后,触发Ajax请求,将所选省份的ID发送到服务器。服务器端根据ID查询对应的城市信息,然后返回JSON格式的数据。 4. **JavaScript处理**: 客户端的JavaScript代码需要监听省份下拉框...

    ajax实现二级下拉框和用户名校验

    二级下拉框通常用于实现层级关系的选择,例如省份和城市的关系。在前端,我们可以使用HTML的`&lt;select&gt;`元素创建下拉框,然后通过Ajax向服务器发送异步请求,获取对应一级选择后相关的二级选项数据。JavaScript(通常...

    无刷新实现国家省份城市选择下拉框列表-(ajax的应用)

    例如,`processRequest1` 是处理国家选择的函数,当 AJAX 请求完成且状态为 200(表示请求成功)时,它会清空状态提示文本,并将服务器返回的响应文本(通常是 JSON 或 XML 格式)插入到省份下拉框中。这通常意味着...

    php框架thinkphp实现js(ajax)无限添加级联下拉框

    这个例子中的"php框架thinkphp实现js(ajax)无限添加级联下拉框"是关于如何利用ThinkPHP和JavaScript(AJAX)技术来创建一个动态的、可以无限级联的下拉菜单系统。下面我们将深入探讨这一主题。 1. **ThinkPHP框架...

    Ajax 无限级 联动下拉框

    无限级联动下拉框通常用于层级结构的数据展示,例如省份-城市-区县的筛选。当用户在一级下拉框选择某个选项时,二级下拉框会根据所选内容动态加载相关数据,以此类推。这种效果可以通过Ajax实现,每级下拉框的选项...

    AJAX级联下拉框源码

    在级联下拉框中,当用户在第一个下拉框中做出选择后,通过AJAX发送请求到服务器,服务器根据选择的值返回相应的数据,然后前端使用JavaScript处理这些数据,更新第二个下拉框的内容。 2. **HTML结构** 首先,我们...

    asp下拉框,如省份查询

    5. **事件处理**:添加SelectedIndexChanged事件处理程序,当用户选择省份时触发,动态加载对应城市的下拉框。这可能需要另一个数据库表来存储城市信息,并在事件处理程序中执行类似的查询和绑定过程。 6. **chen....

    ajax++jsp二级联动下拉框,无刷新分页

    当JSP与Ajax结合时,可以在用户交互过程中,通过Ajax发送请求到服务器,处理特定任务,然后将结果返回给客户端,所有这些操作都在后台完成,无需刷新整个页面。 **二级联动下拉框** 二级联动下拉框是一种常见的...

    AJAX二级下拉框联动

    在本案例中,我们关注的是"二级下拉框联动",这是一个常见的前端交互功能,通常用于表单中,例如选择省份后自动填充城市,或者选择类别后显示子类别等。这种联动效果能够提升用户体验,减少用户输入,提高数据准确性...

    脚本实现下拉框省份级联

    当用户在省份下拉框中做出选择时,城市下拉框会动态更新,显示对应省份的城市列表。 在实现这个功能时,我们主要依赖JavaScript的事件监听和DOM操作。下面是一些关键知识点: 1. **事件监听**:JavaScript提供`...

    Jquery各种插件和JQuery Ajax三级联动地区下拉框 & 非Ajax实现三级联动

    在jQuery中,可以使用`.change()`事件监听下拉框的选择变化,然后使用`.val()`获取选中的值,并根据这些值通过Ajax发送请求到服务器获取下一级别的数据。服务器返回数据后,使用jQuery的DOM操作方法,如`.append()`...

    ajax实现无刷新三联动下拉框

    数据处理:AJAX的`onreadystatechange`事件监听请求状态,当状态变为4(表示请求已完成)且状态码为200(表示请求成功)时,解析返回的JSON数据,利用JavaScript动态创建新的`&lt;option&gt;`元素并添加到相应的下拉框中。...

    Ajax实现三级联动下拉框

    4. **事件监听**:为每个下拉框添加事件监听器,当用户选择某个选项时触发Ajax请求。 5. **数据解析**:服务器返回的数据通常为XML或JSON格式,需要解析这些数据,并动态更新到下级下拉框中。 #### 代码解析 给定的...

    省份城市区县_下拉框三级联动选择

    在IT行业中,尤其是在网页开发和前端交互设计领域,"省份城市区县_下拉框三级联动选择"是一种常见的用户界面设计模式。这种设计主要用于让用户在输入地址或选择地理位置时,通过三个相互关联的下拉框依次选取省份、...

    ajax获取服务器以xml形式输出省市数据,并获取数据绑定前台下拉框和实现联动

    // 添加省份到省份下拉框 addOption(provinceSelect, provinceName); var cities = provinces[i].getElementsByTagName('city'); for (var j = 0; j ; j++) { var cityName = cities[j].getElementsByTagName...

    利益AJAX实现下拉框~无刷新

    3. **AJAX请求**:在事件处理函数中,通过AJAX发送请求到服务器,请求的数据通常是用户在第一个下拉框中的选择。这里可以使用`XMLHttpRequest`对象或者更现代的`fetch` API。 4. **服务器端处理**:服务器根据接收...

    Asp+Ajax无限级联动下拉框菜单Access版

    【Asp+Ajax无限级联动下拉框菜单Access版】是一种常见的前端交互设计技术,用于在网页中实现高效的数据筛选和导航。这个技术结合了Active Server Pages (ASP)、Ajax(异步JavaScript和XML)以及Microsoft Access...

    Ajax示例中国省份、城市、城镇联动选择列表框

    通过JavaScript事件监听,当用户在某个下拉框中做出选择时,会触发Ajax请求,更新其他下拉框的内容。 3. **JS**目录:包含JavaScript代码,用于实现Ajax请求和动态更新DOM。通常,这些文件会包含一个或多个函数,如...

Global site tag (gtag.js) - Google Analytics