溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

使用ajax怎么實(shí)現(xiàn)一個(gè)省市三級(jí)聯(lián)動(dòng)效果

發(fā)布時(shí)間：2021-04-20 16:03:36 來(lái)源：億速云 閱讀：212 作者：Leah 欄目：web開(kāi)發(fā)

使用ajax怎么實(shí)現(xiàn)一個(gè)省市三級(jí)聯(lián)動(dòng)效果？很多新手對(duì)此不是很清楚，為了幫助大家解決這個(gè)難題，下面小編將為大家詳細(xì)講解，有這方面需求的人可以來(lái)學(xué)習(xí)下，希望你能有所收獲。

什么是ajax

ajax是一種在無(wú)需重新加載整個(gè)網(wǎng)頁(yè)的情況下，能夠更新部分網(wǎng)頁(yè)的技術(shù)，可以通過(guò)在后臺(tái)與服務(wù)器進(jìn)行少量數(shù)據(jù)交換，使網(wǎng)頁(yè)實(shí)現(xiàn)異步更新。

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ù)庫(kù)池化

<?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>

看完上述內(nèi)容是否對(duì)您有幫助呢？如果還想對(duì)相關(guān)知識(shí)有進(jìn)一步的了解或閱讀更多相關(guān)文章，請(qǐng)關(guān)注億速云行業(yè)資訊頻道，感謝您對(duì)億速云的支持。

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手