ajax實現(xiàn)省市三級聯(lián)動效果

來源：懂視網(wǎng) 責(zé)編：小OO 時間：2020-11-27 22:51:25

ajax實現(xiàn)省市三級聯(lián)動效果

本文實例為大家分享了ajax實現(xiàn)三級聯(lián)動效果的具體代碼，供大家參考，具體內(nèi)容如下：1、html代碼。<；<。DOCTYPE html>；<；html>；<；head>；<；meta charset="UTF-8">；<；title>；Title<；/title>；<；style type="text/css">；.wrap { background-color： beige；width： 400px；height： 200px；margin： 0 auto；text-align： center；margin-top： 200px；} .wrap select { width：130px；} <；<。

推薦度：

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

導(dǎo)讀本文實例為大家分享了ajax實現(xiàn)三級聯(lián)動效果的具體代碼，供大家參考，具體內(nèi)容如下：1、html代碼。<；<。DOCTYPE html>；<；html>；<；head>；<；meta charset="UTF-8">；<；title>；Title<；/title>；<；style type="text/css">；.wrap { background-color： beige；width： 400px；height： 200px；margin： 0 auto；text-align： center；margin-top： 200px；} .wrap select { width：130px；} <；<。

本文實例為大家分享了ajax實現(xiàn)三級聯(lián)動效果的具體代碼，供大家參考，具體內(nèi)容如下

1、html代碼

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <style type="text/css">
 .wrap
 {
 background-color: beige;
 width: 400px;
 height: 200px;
 margin: 0 auto;
 text-align: center;
 margin-top: 200px;
 }
 .wrap select
 {
 width:130px;
 height: 30px;
 }
 </style>
 <script type="text/javascript" src="jquery-1.8.3.min.js"></script>
</head>
<body>
<div class="wrap">
 <select id="province">
 </select>
 <select id="city">
 </select>
</div>
<script type="text/javascript">
 function getctiydata() {
 $("#city").empty();
 var pid = $("#province").val();
 $.ajax({
 url:"/getCitys?pid="+pid,
 dataType:"json"
 }).done(function (data) {
 for (var i in data)
 {
 $("#city").append($("<option value='"+ data[i].id +"'>"
 + data[i].name +"</option>"))
 }
 })
 
 }
 $.ajax({
 url: "/getAllProvince",
 dataType:"json"
 }).done(function (data) {
 for (var i in data)
 {
 $("#province").append($("<option value = '"+data[i].id+"'>"
 + data[i].name +"</option>"))
 }
 getctiydata()
 });

 $("#province").change(function () {
 getctiydata()
 })
</script>
</body>
</html>

2、javaservlet

package servlet;

import DButil.DataSourceUtil;
import com.alibaba.fastjson.JSON;
import domain.Province;
import org.apache.commons.dbutils.QueryRunner;
import org.apache.commons.dbutils.handlers.BeanListHandler;

import javax.jws.WebService;
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 java.io.IOException;
import java.sql.SQLException;
import java.util.List;

@WebServlet("/getAllProvince")
public class ProvinceServlet extends HttpServlet
{
 @Override
 protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException
 {
 resp.setContentType("application/json;charset=utf8");
 QueryRunner queryRunner = new QueryRunner(DataSourceUtil.getDataSource());
 String sql = "select * from province";
 try
 {
 List<Province> provinces = queryRunner.query(sql, new BeanListHandler<Province>(Province.class));
 Object json = JSON.toJSON(provinces);
 resp.getWriter().print(json);

 } catch (SQLException e)
 {
 e.printStackTrace();
 }

 }
}

package servlet;

import DButil.DataSourceUtil;
import com.alibaba.fastjson.JSON;
import domain.City;
import org.apache.commons.dbutils.QueryRunner;
import org.apache.commons.dbutils.handlers.BeanListHandler;

import javax.jws.WebService;
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 java.io.IOException;
import java.sql.SQLException;
import java.util.List;

@WebServlet("/getCitys")
public class CityServlet extends HttpServlet
{
 @Override
 protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException
 {
 resp.setContentType("application/json;charset=utf8");
 QueryRunner queryRunner = new QueryRunner(DataSourceUtil.getDataSource());
 String pid = req.getParameter("pid");
 String sql = "select * from City where pid=?";
 try
 {
 List<City> cities = queryRunner.query(sql, new BeanListHandler<City>(City.class), pid);
 Object toJSON = JSON.toJSON(cities);
 resp.getWriter().print(toJSON);
 } catch (SQLException e)
 {
 e.printStackTrace();
 }
 }
}

3、數(shù)據(jù)庫池化

<?xml version="1.0" encoding="UTF-8"?>
<c3p0-config>
 <default-config>
 <property name="driverClass">com.mysql.jdbc.Driver</property>
 <property name="jdbcUrl">jdbc:mysql://localhost:3306/text</property>
 <property name="user">root</property>
 <property name="password">root</property>
 <property name="acquireRetryAttempts">0</property>
 </default-config>
</c3p0-config>

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

ajax實現(xiàn)省市三級聯(lián)動效果

推薦度：

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

標(biāo)簽：實現(xiàn) ajax 三級聯(lián)動

熱門焦點

ajax實現(xiàn)省市三級聯(lián)動效果

ajax實現(xiàn)省市三級聯(lián)動效果

ajax實現(xiàn)省市三級聯(lián)動效果

最新推薦

猜你喜歡

熱門推薦