Ajax实现省市区三级级联

web前端|js教程

Ajax,省市区,三级

web前端-js教程

这篇文章主要为大家详细介绍了Ajax实现省市区三级级联,数据来自mysql数据库,具有一定的参考价值，感兴趣的小伙伴们可以参考一下

易语言软件源码大全,使用vscode创建数据库,ubuntu ppt下载,tomcat 函数不更新,jsoup爬虫论文,mac怎么配置php环境,邳州seo优化哪家公司好,app展示网站模板htmllzw

address.html

微小区源码,vscode调编码,虚拟机安装ubuntu蓝屏重启,Jre配置Tomcat,sqlite表清空表,论坛插件破解,前端了配置数据的框架,招聘网站爬虫分析,php 调用 js 函数,利辛seo推广,wordpress 搞笑网站,网页倒计时加载,动易 企业 模板lzw

/** * 得到XMLHttpRequest对象 */ function getajaxHttp() { var xmlHttp; try { // Firefox, Opera 8.0+, SafarixmlHttp = new XMLHttpRequest(); } catch (e) { // Internet Explorertry {xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) {try {xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");} catch (e) {alert("您的浏览器不支持AJAX！");return false;} } } return xmlHttp; } /** * 发送ajax请求 * url--请求到服务器的URL * methodtype(post/get) * con (true(异步)|false(同步)) * functionName(回调方法名，不需要引号,这里只有成功的时候才调用) * (注意：这方法有二个参数，一个就是xmlhttp,一个就是要处理的对象) */ function ajaxrequest(url, methodtype, con, functionName) { //获取XMLHTTPRequest对象 var xmlhttp = getajaxHttp(); //设置回调函数（响应的时候调用的函数） xmlhttp.onreadystatechange = function() { //这个函数中的代码在什么时候被XMLHTTPRequest对象调用？ //当服务器响应时，XMLHTTPRequest对象会自动调用该回调方法 if (xmlhttp.readyState == 4) {if (xmlhttp.status == 200) {functionName(xmlhttp.responseText);} } }; //创建请求 xmlhttp.open(methodtype, url, con); //发送请求 xmlhttp.send(); } window.onload=function(){ ajaxrequest("addressSerlvet?method=provincial","POST",true,addrResponse); } //动态获取省的信息 function addrResponse(responseContents){ var jsonObj = new Function("return" + responseContents)(); for(var i = 0; i < jsonObj.addrList.length;i++){ document.getElementById(select).innerHTML +=""+jsonObj.addrList[i].address+"" } } //选中省后 function pChange(){ //先将市的之前的信息清除 document.getElementById(selectCity).innerHTML="请选择市"; //再将区的信息清除 document.getElementById(selectArea).innerHTML="请选择区"; //再将用户的输入清楚 document.getElementById("addr").innerHTML=""; var val = document.getElementById(select).value; if(val == -1){ document.getElementById(selectCity)[0].selected = true; return; } //开始执行获取市 ajaxrequest("addressSerlvet?method=city&provincial="+val,"POST",true,cityResponse); } //获取市的动态数据 function cityResponse(responseContents){ var jsonObj = new Function("return" + responseContents)(); for(var i = 0; i < jsonObj.cityList.length;i++){ document.getElementById(selectCity).innerHTML +=""+jsonObj.cityList[i].address+"" } } //选中市以后 function cChange(){ var val = document.getElementById(selectCity).value; //开始执行获取区 ajaxrequest("addressSerlvet?method=area&cityId="+val,"POST",true,areaResponse); } //获取区的动态数据 function areaResponse(responseContents){ var jsonObj = new Function("return" + responseContents)(); for(var i = 0; i < jsonObj.areaList.length;i++){ document.getElementById(selectArea).innerHTML +=""+jsonObj.areaList[i].address+"" } } //点击提交按钮 function confirM(){ //获取省的文本值 var p = document.getElementById("select"); var pTex = p.options[p.options.selectedIndex].text; if(p.value=-1){ alert("请选择省"); return; } //获取市的文本值 var city = document.getElementById("selectCity"); var cityTex = city.options[city.options.selectedIndex].text; if(city.value=-1){ alert("请选择市"); return; } //获取区的文本值 var area = document.getElementById("selectArea"); var areaTex = area.options[area.options.selectedIndex].text; if(area.value=-1){ alert("请选择区"); return; } //获取具体位置id文本值 var addr = document.getElementById("addr").value; //打印 document.getElementById("show").innerHTML = "您选择的地址为 " + pTex + " " + cityTex + " " + areaTex + " " + addr; } 请选择省 请选择市 请选择市确定

源码天堂官方网站,ubuntu 装sshd,ie浏览器tomcat,满脸血腥爬虫,php显示详细错误信息,seo优化的主要任务包括排名lzw

AddressServlet.java

package cn.bestchance.servlet;import java.io.IOException;import java.util.ArrayList;import javax.servlet.ServletException;import javax.servlet.annotation.WebServlet;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import cn.bestchance.dao.AddressDao;import cn.bestchance.dao.impl.AddressDaoImpl;import cn.bestchance.entity.Address;import net.sf.json.JSONArray;import net.sf.json.JSONObject;@WebServlet("/addressSerlvet")public class AddressSerlvet extends HttpServlet { private static final long serialVersionUID = 1L; private AddressDao dao = new AddressDaoImpl(); protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doPost(request, response); } /** * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse * response) */ protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setCharacterEncoding("utf-8"); response.setContentType("text/html;charset=utf-8"); String method=request.getParameter("method"); if("provincial".equals(method)){ getProvincial(request, response); } if("city".equals(method)){ getCity(request, response); } if("area".equals(method)){ getArea(request, response); } } /** * 根据市id获取该市下的区的全部信息 * @param request * @param response * @throws ServletException * @throws IOException */ protected void getArea(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { String cityId = request.getParameter("cityId"); // 从数据库中查询省的信息 ArrayList areaList = dao.getAreaByCityId(Integer.parseInt(cityId)); // 将集合转成json字符串 JSONObject jsonObj = new JSONObject(); JSONArray jsonArray = JSONArray.fromObject(areaList); jsonObj.put("areaList", jsonArray); String jsonDataStr = jsonObj.toString(); response.getWriter().print(jsonDataStr); } /** * 获取省的信息 并相应 * @param request * @param response * @throws ServletException * @throws IOException */ protected void getProvincial(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // 从数据库中查询省的信息 ArrayList addrList = dao.getProvince(); // 将集合转成json字符串 JSONObject jsonObj = new JSONObject(); JSONArray jsonArray = JSONArray.fromObject(addrList); jsonObj.put("addrList", jsonArray); String jsonDataStr = jsonObj.toString(); response.getWriter().print(jsonDataStr); } /** * 获取市的信息并相应 * @param request * @param response * @throws ServletException * @throws IOException */ protected void getCity(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { String provinceId = request.getParameter("provincial"); // 从数据库中查询省的信息 ArrayList addrList = dao.getCityByProvinceId(Integer.parseInt(provinceId)); // 将集合转成json字符串 JSONObject jsonObj = new JSONObject(); JSONArray jsonArray = JSONArray.fromObject(addrList); jsonObj.put("cityList", jsonArray); String jsonDataStr = jsonObj.toString(); response.getWriter().print(jsonDataStr); }}

AddressDao.java

package cn.bestchance.dao;import java.util.ArrayList;import cn.bestchance.entity.Address;public interface AddressDao { /** * 获取省的id和名称 * @return */ ArrayList getProvince(); /** * 根据省的id获取市的信息 * @param provinceId * @return */ ArrayList getCityByProvinceId(int provinceId); /** * 根据市的id获取区的信息 * @param cityId * @return */ ArrayList getAreaByCityId(int cityId);}

AddressDaoImpl.java

package cn.bestchance.dao.impl;import java.sql.ResultSet;import java.sql.SQLException;import java.util.ArrayList;import cn.bestchance.dao.AddressDao;import cn.bestchance.entity.Address;import cn.bestchance.util.DBUtil;public class AddressDaoImpl implements AddressDao { private DBUtil db = new DBUtil(); @Override public ArrayList getProvince() { ArrayList addrList = new ArrayList(); db.openConnection(); String sql = "select * from province"; ResultSet rs = db.excuteQuery(sql); try { while(rs.next()){ Address addr = new Address(); addr.setId(rs.getInt(2)); addr.setAddress(rs.getString(3)); addrList.add(addr); } } catch (SQLException e) { // TODO Auto-generated catch block e.printStackTrace(); }finally{ if(rs != null){ try {rs.close(); } catch (SQLException e) {// TODO Auto-generated catch blocke.printStackTrace(); } } db.closeResoure(); } return addrList; } @Override public ArrayList getCityByProvinceId(int provinceId) { ArrayList addrList = new ArrayList(); db.openConnection(); String sql = "select * from city where fatherID = " + provinceId; //431200 ResultSet rs = db.excuteQuery(sql); try { while(rs.next()){ Address addr = new Address(); addr.setId(rs.getInt(2)); addr.setAddress(rs.getString(3)); addrList.add(addr); } } catch (SQLException e) { // TODO Auto-generated catch block e.printStackTrace(); }finally{ if(rs != null){ try {rs.close(); } catch (SQLException e) {// TODO Auto-generated catch blocke.printStackTrace(); } } db.closeResoure(); } return addrList; } @Override public ArrayList getAreaByCityId(int cityId) { ArrayList addrList = new ArrayList(); db.openConnection(); String sql = "select * from area where fatherID = " + cityId; //431200 ResultSet rs = db.excuteQuery(sql); try { while(rs.next()){ Address addr = new Address(); addr.setId(rs.getInt(2)); addr.setAddress(rs.getString(3)); addrList.add(addr); } } catch (SQLException e) { // TODO Auto-generated catch block e.printStackTrace(); }finally{ if(rs != null){ try {rs.close(); } catch (SQLException e) {// TODO Auto-generated catch blocke.printStackTrace(); } } db.closeResoure(); } return addrList; }}

实体类Address.java

package cn.bestchance.entity;public class Address { @Override public String toString() { return "Address [id=" + id + ", address=" + address + "]"; } private int id; private String address; public int getId() { return id; } public void setId(int id) { this.id = id; } public String getAddress() { return address; } public void setAddress(String address) { this.address = address; } public Address() { super(); // TODO Auto-generated constructor stub } public Address(int id, String address) { super(); this.id = id; this.address = address; }}

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

基于Ajax表单提交及后台处理简单的应用

Ajax 上传图片并预览的简单实现

基于ajax html实现文件上传技巧总结