溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
使用ajax怎么實現一個省市三級聯動效果？很多新手對此不是很清楚，為了幫助大家解決這個難題，下面小編將為大家詳細講解，有這方面需求的人可以來學習下，希望你能有所收獲。
ajax是一種在無需重新加載整個網頁的情況下，能夠更新部分網頁的技術，可以通過在后臺與服務器進行少量數據交換，使網頁實現異步更新。
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、數據庫池化
<?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>
看完上述內容是否對您有幫助呢？如果還想對相關知識有進一步的了解或閱讀更多相關文章，請關注億速云行業資訊頻道，感謝您對億速云的支持。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
