Ajax實現省市區三級級聯

來源：懂視網責編：小OO 時間：2020-11-27 19:47:35

Ajax實現省市區三級級聯

address.html。<；，不需要引號，這里只有成功的時候才調用)* (注意：這方法有二個參數，一個就是xmlhttp，一個就是要處理的對象)*/ function ajaxrequest(url.methodtype.con.functionName) { //獲取XMLHTTPRequest對象 var xmlhttp = getajaxHttp()；//設置回調函數（響應的時候調用的函數） xmlhttp.onreadystatechange = function() { //這個函數中的代碼在什么時候被XMLHTTPRequest對象調用？ //當服務器響應時，"；POST"；，true，"；POST"；，true，true。

推薦度：

點擊下載本文 文檔為doc格式

導讀address.html。<；，不需要引號，這里只有成功的時候才調用)* (注意：這方法有二個參數，一個就是xmlhttp，一個就是要處理的對象)*/ function ajaxrequest(url.methodtype.con.functionName) { //獲取XMLHTTPRequest對象 var xmlhttp = getajaxHttp()；//設置回調函數（響應的時候調用的函數） xmlhttp.onreadystatechange = function() { //這個函數中的代碼在什么時候被XMLHTTPRequest對象調用？ //當服務器響應時，"；POST"；，true，"；POST"；，true，true。

這篇文章主要為大家詳細介紹了Ajax實現省市區三級級聯,數據來自mysql數據庫,具有一定的參考價值，感興趣的小伙伴們可以參考一下

address.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>

 <script type="text/javascript">

 /** 
 * 得到XMLHttpRequest對象 
 */
 function getajaxHttp() {
 var xmlHttp;
 try {
 // Firefox, Opera 8.0+, Safari 
 xmlHttp = new XMLHttpRequest();
 } catch (e) {
 // Internet Explorer 
 try {
 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 += 
 "<option value='"+jsonObj.addrList[i].id+"'>"
 +jsonObj.addrList[i].address+
 "</option>"
 }
 }
 //選中省后
 function pChange(){
 //先將市的之前的信息清除
 document.getElementById('selectCity').innerHTML="<option value='-1'>請選擇市</option>";
 //再將區的信息清除
 document.getElementById('selectArea').innerHTML="<option value='-1'>請選擇區</option>";
 //再將用戶的輸入清楚
 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 += 
 "<option value='"+jsonObj.cityList[i].id+"'>"
 +jsonObj.cityList[i].address+
 "</option>"
 }
 }
 //選中市以后
 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 += 
 "<option value='"+jsonObj.areaList[i].id+"'>"
 +jsonObj.areaList[i].address+
 "</option>"
 }
 }
 //點擊提交按鈕
 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;
 }

 </script>
<body>
 <select id="select" onchange="pChange()">
 <option value="-1">請選擇省</option>
 </select>
 <select id="selectCity" onchange="cChange()">
 <option value='-1'>請選擇市</option>
 </select>
 <select id="selectArea" onchange="aChange()">
 <option value='-1'>請選擇市</option>
 </select>
 <input type="text" id="addr" />
 <button onclick="confirM();">確定</button>
 <p id="show"></p>
</body>
</html>

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<Address> 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<Address> 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<Address> 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<Address> getProvince();
 /**
 * 根據省的id獲取市的信息
 * @param provinceId
 * @return
 */
 ArrayList<Address> getCityByProvinceId(int provinceId);
 /**
 * 根據市的id獲取區的信息
 * @param cityId
 * @return
 */
 ArrayList<Address> 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<Address> getProvince() {
 ArrayList<Address> addrList = new ArrayList<Address>();
 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 block
 e.printStackTrace();
 }
 }
 db.closeResoure();
 }
 return addrList;
 }
 @Override
 public ArrayList<Address> getCityByProvinceId(int provinceId) {
 ArrayList<Address> addrList = new ArrayList<Address>();
 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 block
 e.printStackTrace();
 }
 }
 db.closeResoure();
 }
 return addrList;
 }
 @Override
 public ArrayList<Address> getAreaByCityId(int cityId) {
 ArrayList<Address> addrList = new ArrayList<Address>();
 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 block
 e.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實現文件上傳技巧總結

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com