Ajax实现省市区三级级联(数据来自mysql数据库)
这篇文章主要为大家详细介绍了Ajax实现省市区三级级联,数据来自mysql数据库,具有一定的参考和学习Ajax的价值，对ajax感兴趣的小伙伴们可以参考一下
实现Ajax实现省市区三级级联，需要Java解析json技术
整体Demo下载地址如下: 点我下载
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;
}
}以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持PHP中文网。
相关推荐：
Atas ialah kandungan terperinci Ajax实现省市区三级级联(数据来自mysql数据库). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
Gunakan ddrescue untuk memulihkan data pada Linux
Mar 20, 2024 pm 01:37 PM
DDREASE ialah alat untuk memulihkan data daripada fail atau peranti sekat seperti cakera keras, SSD, cakera RAM, CD, DVD dan peranti storan USB. Ia menyalin data dari satu peranti blok ke peranti lain, meninggalkan blok data yang rosak dan hanya memindahkan blok data yang baik. ddreasue ialah alat pemulihan yang berkuasa yang automatik sepenuhnya kerana ia tidak memerlukan sebarang gangguan semasa operasi pemulihan. Selain itu, terima kasih kepada fail peta ddasue, ia boleh dihentikan dan disambung semula pada bila-bila masa. Ciri-ciri utama lain DDREASE adalah seperti berikut: Ia tidak menimpa data yang dipulihkan tetapi mengisi jurang sekiranya pemulihan berulang. Walau bagaimanapun, ia boleh dipotong jika alat itu diarahkan untuk melakukannya secara eksplisit. Pulihkan data daripada berbilang fail atau blok kepada satu
Sumber terbuka! Di luar ZoeDepth! DepthFM: Anggaran kedalaman monokular yang cepat dan tepat!
Apr 03, 2024 pm 12:04 PM
0. Apakah fungsi artikel ini? Kami mencadangkan DepthFM: model anggaran kedalaman monokular generatif yang serba boleh dan pantas. Sebagai tambahan kepada tugas anggaran kedalaman tradisional, DepthFM juga menunjukkan keupayaan terkini dalam tugas hiliran seperti mengecat kedalaman. DepthFM cekap dan boleh mensintesis peta kedalaman dalam beberapa langkah inferens. Mari kita baca karya ini bersama-sama ~ 1. Tajuk maklumat kertas: DepthFM: FastMonocularDepthEstimationwithFlowMatching Pengarang: MingGui, JohannesS.Fischer, UlrichPrestel, PingchuanMa, Dmytr
Google gembira: prestasi JAX mengatasi Pytorch dan TensorFlow! Ia mungkin menjadi pilihan terpantas untuk latihan inferens GPU
Apr 01, 2024 pm 07:46 PM
Prestasi JAX, yang dipromosikan oleh Google, telah mengatasi Pytorch dan TensorFlow dalam ujian penanda aras baru-baru ini, menduduki tempat pertama dalam 7 penunjuk. Dan ujian tidak dilakukan pada TPU dengan prestasi JAX terbaik. Walaupun dalam kalangan pembangun, Pytorch masih lebih popular daripada Tensorflow. Tetapi pada masa hadapan, mungkin lebih banyak model besar akan dilatih dan dijalankan berdasarkan platform JAX. Model Baru-baru ini, pasukan Keras menanda aras tiga hujung belakang (TensorFlow, JAX, PyTorch) dengan pelaksanaan PyTorch asli dan Keras2 dengan TensorFlow. Pertama, mereka memilih satu set arus perdana
Kelajuan Internet Data Selular Perlahan pada iPhone: Pembetulan
May 03, 2024 pm 09:01 PM
Menghadapi ketinggalan, sambungan data mudah alih perlahan pada iPhone? Biasanya, kekuatan internet selular pada telefon anda bergantung pada beberapa faktor seperti rantau, jenis rangkaian selular, jenis perayauan, dsb. Terdapat beberapa perkara yang boleh anda lakukan untuk mendapatkan sambungan Internet selular yang lebih pantas dan boleh dipercayai. Betulkan 1 – Paksa Mulakan Semula iPhone Kadangkala, paksa memulakan semula peranti anda hanya menetapkan semula banyak perkara, termasuk sambungan selular. Langkah 1 – Hanya tekan kekunci naikkan kelantangan sekali dan lepaskan. Seterusnya, tekan kekunci Turun Kelantangan dan lepaskannya semula. Langkah 2 - Bahagian seterusnya proses adalah untuk menahan butang di sebelah kanan. Biarkan iPhone selesai dimulakan semula. Dayakan data selular dan semak kelajuan rangkaian. Semak semula Betulkan 2 – Tukar mod data Walaupun 5G menawarkan kelajuan rangkaian yang lebih baik, ia berfungsi lebih baik apabila isyarat lemah
Robot Tesla bekerja di kilang, Musk: Tahap kebebasan tangan akan mencapai 22 tahun ini!
May 06, 2024 pm 04:13 PM
Video terbaru robot Tesla Optimus dikeluarkan, dan ia sudah boleh berfungsi di kilang. Pada kelajuan biasa, ia mengisih bateri (bateri 4680 Tesla) seperti ini: Pegawai itu juga mengeluarkan rupanya pada kelajuan 20x - pada "stesen kerja" kecil, memilih dan memilih dan memilih: Kali ini ia dikeluarkan Salah satu sorotan video itu ialah Optimus menyelesaikan kerja ini di kilang, sepenuhnya secara autonomi, tanpa campur tangan manusia sepanjang proses. Dan dari perspektif Optimus, ia juga boleh mengambil dan meletakkan bateri yang bengkok, memfokuskan pada pembetulan ralat automatik: Berkenaan tangan Optimus, saintis NVIDIA Jim Fan memberikan penilaian yang tinggi: Tangan Optimus adalah robot lima jari di dunia paling cerdik. Tangannya bukan sahaja boleh disentuh
Dokumen berbilang modal Alibaba 7B memahami model besar memenangi SOTA baharu
Apr 02, 2024 am 11:31 AM
SOTA baharu untuk keupayaan memahami dokumen multimodal! Pasukan Alibaba mPLUG mengeluarkan kerja sumber terbuka terkini mPLUG-DocOwl1.5, yang mencadangkan satu siri penyelesaian untuk menangani empat cabaran utama pengecaman teks imej resolusi tinggi, pemahaman struktur dokumen am, arahan mengikut dan pengenalan pengetahuan luaran. Tanpa berlengah lagi, mari kita lihat kesannya dahulu. Pengecaman satu klik dan penukaran carta dengan struktur kompleks ke dalam format Markdown: Carta gaya berbeza tersedia: Pengecaman dan kedudukan teks yang lebih terperinci juga boleh dikendalikan dengan mudah: Penjelasan terperinci tentang pemahaman dokumen juga boleh diberikan: Anda tahu, "Pemahaman Dokumen " pada masa ini Senario penting untuk pelaksanaan model bahasa yang besar. Terdapat banyak produk di pasaran untuk membantu pembacaan dokumen. Sesetengah daripada mereka menggunakan sistem OCR untuk pengecaman teks dan bekerjasama dengan LLM untuk pemprosesan teks.
Daya hidup kecerdasan super membangkitkan! Tetapi dengan kedatangan AI yang mengemas kini sendiri, ibu tidak perlu lagi bimbang tentang kesesakan data
Apr 29, 2024 pm 06:55 PM
Saya menangis hingga mati. Dunia sedang membina model besar. Data di Internet tidak mencukupi. Model latihan kelihatan seperti "The Hunger Games", dan penyelidik AI di seluruh dunia bimbang tentang cara memberi makan data ini kepada pemakan yang rakus. Masalah ini amat ketara dalam tugas berbilang modal. Pada masa mereka mengalami kerugian, pasukan pemula dari Jabatan Universiti Renmin China menggunakan model baharu mereka sendiri untuk menjadi yang pertama di China untuk menjadikan "suapan data yang dijana model itu sendiri" menjadi kenyataan. Selain itu, ia merupakan pendekatan serampang dua mata dari segi pemahaman dan sisi penjanaan Kedua-dua pihak boleh menjana data baharu berbilang modal yang berkualiti tinggi dan memberikan maklum balas data kepada model itu sendiri. Apakah model? Awaker 1.0, model berbilang modal besar yang baru sahaja muncul di Forum Zhongguancun. Siapa pasukan itu? Enjin Sophon. Diasaskan oleh Gao Yizhao, pelajar kedoktoran di Sekolah Kecerdasan Buatan Hillhouse Universiti Renmin.
Robot pertama yang menyelesaikan tugas manusia secara autonomi muncul, dengan lima jari fleksibel dan kelajuan manusia luar biasa, dan model besar menyokong latihan angkasa maya
Mar 11, 2024 pm 12:10 PM
Minggu ini, FigureAI, sebuah syarikat robotik yang dilaburkan oleh OpenAI, Microsoft, Bezos, dan Nvidia, mengumumkan bahawa ia telah menerima hampir $700 juta dalam pembiayaan dan merancang untuk membangunkan robot humanoid yang boleh berjalan secara bebas dalam tahun hadapan. Dan Optimus Prime Tesla telah berulang kali menerima berita baik. Tiada siapa yang meragui bahawa tahun ini akan menjadi tahun apabila robot humanoid meletup. SanctuaryAI, sebuah syarikat robotik yang berpangkalan di Kanada, baru-baru ini mengeluarkan robot humanoid baharu, Phoenix. Pegawai mendakwa bahawa ia boleh menyelesaikan banyak tugas secara autonomi pada kelajuan yang sama seperti manusia. Pheonix, robot pertama di dunia yang boleh menyelesaikan tugas secara autonomi pada kelajuan manusia, boleh mencengkam, menggerakkan dan meletakkan setiap objek secara elegan di sisi kiri dan kanannya dengan perlahan. Ia boleh mengenal pasti objek secara autonomi
