![\"\"](\"https:\/\/www.wsisp.com\/helps\/wp-content\/uploads\/2025\/05\/20250515142803-6825f9f348ecd.png\")
![\"\"](\"https:\/\/www.wsisp.com\/helps\/wp-content\/uploads\/2025\/05\/20250515142803-6825f9f363b89.png\")
<\/p><\/p>\n","protected":false},"excerpt":{"rendered":"1. \u7701\u5e02\u8054\u52a8：\u5728\u7f51\u9875\u4e0a，\u9009\u62e9\u5bf9\u5e94\u7684\u7701\u4efd\u4e4b\u540e，\u52a8\u6001\u7684\u5173\u8054\u51fa\u8be5\u7701\u4efd\u5bf9\u5e94\u7684\u5e02\u3002\u9009\u62e9\u5bf9\u5e94\u7684\u5e02\u4e4b\u540e，\u52a8\u6001\u5730\u5173\u8054\u51fa\u57ce\u5e02\u5bf9\u5e94\u7684\u533a\u3002<\/p>\n
2. \u8bbe\u8ba1\u6570\u636e\u5e93\u8868<\/p>\n
t_area （\u533a\u57df\u8868）
\nid(PK-\u81ea\u589e) codenamepcode
\n———————————————
\n1001 \u6cb3\u5317\u7701null
\n2002 \u6cb3\u5357\u7701null
\n3003 \u77f3\u5bb6\u5e84 001
\n4004 \u90af\u90f8 001
\n5005 \u90d1\u5dde 002
\n6006 \u6d1b\u9633 002
\n7 007 \u6c5f\u82cf null
\n8 008 \u5357\u4eac 007<\/p>\n
\u5c06\u5168\u56fd\u6240\u6709\u7684\u7701\u3001\u5e02\u3001\u533a\u3001\u53bf\u7b49\u4fe1\u606f\u90fd\u5b58\u50a8\u5230\u4e00\u5f20\u8868\u5f53\u4e2d\u3002
\n\u91c7\u7528\u7684\u5b58\u50a8\u65b9\u5f0f\u5b9e\u9645\u4e0a\u662fcode pcode\u5f62\u52bf\u3002 <\/p>\n
3. \u8fd9\u91cc\u53ea\u662f\u4e00\u4e2a\u6a21\u62df，\u6240\u4ee5\u5efa\u7684\u6570\u636e\u5e93\u662f\u4e0d\u5b8c\u6574\u7684，\u60f3\u8981\u5b8c\u6574\u7684\u6570\u636e\u5e93，\u53ef\u4ee5\u53bb\u7f51\u4e0a\u627e\u3002<\/p>\n
4. \u4e0a\u4ee3\u7801<\/p>\n
（1）\u81ea\u5199\u7684jQquery\u5e93<\/p>\n
function jQuery(selector){ \/\/ selector\u53ef\u80fd\u662f#id，\u4e5f\u53ef\u4ee5\u662f\u5176\u4ed6\u7684\u9009\u62e9\u5668，\u4f8b\u5982\u7c7b\u9009\u62e9\u5668：.class
\n if(typeof selector == "string"){
\n if (selector.charAt(0) == '#') {
\n domObj = document.getElementById(selector.substring(1));
\n return new jQuery();
\n }
\n }
\n if(typeof selector == "function"){
\n window.onload = selector;
\n }
\n this.html = function(htmlStr){
\n domObj.innerHTML = htmlStr;
\n }
\n this.click = function(fun){
\n domObj.onclick = fun;
\n }
\n this.val = function(v){
\n if (v == undefined) {
\n return domObj.value;
\n }else{
\n domObj.value = v;
\n }
\n }
\n this.change = function(fun){
\n domObj.onchange = fun;
\n }
\n \/\/ \u9759\u6001\u7684\u65b9\u6cd5：\u53d1\u9001ajax\u8bf7\u6c42
\n jQuery.ajax = function(jsonArgs){
\n var xhr = new XMLHttpRequest();
\n xhr.onreadystatechange = function(){
\n if (this.readyState == 4) {
\n if (this.status == 200) {
\n var jsonObj = JSON.parse(this.responseText);
\n jsonArgs.success(jsonObj);
\n }
\n }
\n }
\n if (jsonArgs.type.toUpperCase() == "POST") {
\n xhr.open("POST",jsonArgs.url,jsonArgs.async);
\n xhr.setRequestHeader("Content-Type","application\/x-www-form-urlencoded")
\n xhr.send(jsonArgs.data);
\n }
\n if (jsonArgs.type.toUpperCase() == "GET") {
\n xhr.open("GET",jsonArgs.url + "?" + jsonArgs.data,jsonArgs.async);
\n xhr.send();
\n }
\n }
\n}
\n$=jQuery;<\/p>\n
（2）html\u6587\u4ef6（Ajax\u8bf7\u6c42）<\/p>\n
<!DOCTYPE html>
\n<html lang="en">
\n<head>
\n <meta charset="UTF-8">
\n <title>\u7528ajax\u5b9e\u73b0\u7701\u5e02\u8054\u52a8<\/title>
\n<\/head>
\n<body>
\n<!–\u5f15\u5165\u81ea\u5df1\u7f16\u5199\u7684jQuery\u5e93–>
\n<script type="text\/javascript" src="\/ajax\/js\/jQuery-1.0.0.js"><\/script>
\n<!–<script src="https:\/\/code.jquery.com\/jquery-3.6.0.min.js"><\/script>–>
\n<script type="text\/javascript">
\n$(function(){
\n \/\/ \u53d1\u9001ajax\u8bf7\u6c42，\u83b7\u53d6\u6240\u6709\u7684\u7701\u4efd，\u7701\u4efd\u7684pcode\u662fnull
\n $.ajax({
\n type: "get",
\n url : "\/ajax\/listArea",
\n data : "t=" + new Date().getTime(),
\n async : true,
\n success:function(jsonArr){
\n var html = "<option value=\\\\"\\\\">–\u8bf7\u9009\u62e9\u7701\u4efd–<\/option>";
\n for (var i = 0; i < jsonArr.length; i++) {
\n var area = jsonArr[i];
\n html += "<option value=\\\\""+area.code+"\\\\">"+area.name+"<\/option>"
\n }
\n $("#province").html(html)
\n }
\n })
\n \/\/ \u53ea\u8981change\u53d1\u751f，\u5c31\u53d1\u9001ajax\u8bf7\u6c42
\n $("#province").change(function(){
\n $.ajax({
\n type: "get",
\n url : "\/ajax\/listArea",
\n data : "t=" + new Date().getTime()+ "&pcode="+this.value,
\n async : true,
\n success:function(jsonArr){
\n var html = "<option value=\\\\"\\\\">–\u8bf7\u9009\u62e9\u5e02–<\/option>";
\n for (var i = 0; i < jsonArr.length; i++) {
\n var area = jsonArr[i];
\n html += "<option value=\\\\""+area.code+"\\\\">"+area.name+"<\/option>"
\n }
\n $("#city").html(html)
\n }
\n })
\n })
\n})
\n<\/script>
\n<select id="province"><\/select>
\n<select id="city"><\/select>
\n<\/body>
\n<\/html> <\/p>\n
（3）servlet\u6587\u4ef6（\u540e\u7aef）<\/p>\n
package com.bjpowernode.ajax.servlet;<\/p>\n
import com.alibaba.fastjson.JSON;
\nimport com.bjpowernode.ajax.bean.Area;
\nimport jakarta.servlet.ServletException;
\nimport jakarta.servlet.annotation.WebServlet;
\nimport jakarta.servlet.http.HttpServlet;
\nimport jakarta.servlet.http.HttpServletRequest;
\nimport jakarta.servlet.http.HttpServletResponse;<\/p>\n
import java.io.IOException;
\nimport java.sql.*;
\nimport java.util.ArrayList;<\/p>\n
\/**
\n * \u52a8\u6001\u83b7\u53d6\u6240\u6709\u7684\u7701\u4efd
\n *\/
\n@WebServlet("\/listArea")
\npublic class ListAreaServlet extends HttpServlet {
\n @Override
\n protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
\n \/\/ \u8fde\u63a5\u6570\u636e\u5e93，\u83b7\u53d6\u6240\u6709\u7684\u5bf9\u5e94\u533a\u57df，\u6700\u7ec8\u54cd\u5e94\u4e00\u4e2aJSON\u683c\u5f0f\u7684\u5b57\u7b26\u4e32\u7ed9WEB\u524d\u7aef
\n Connection conn = null;
\n PreparedStatement ps = null;
\n ResultSet rs= null;
\n ArrayList<Area> areas = new ArrayList<>();
\n String pcode = request.getParameter("pcode");
\n String sql;
\n try {
\n Class.forName("com.mysql.cj.jdbc.Driver");
\n String url = "jdbc:mysql:\/\/localhost:3306\/bjpowernode?useUnicode=true&characterEncoding=UTF-8";
\n String user = "root";
\n String password = "1234";
\n conn = DriverManager.getConnection(url,user,password);
\n if (pcode == null){
\n sql = "select code,name from t_area where pcode is null";
\n ps = conn.prepareStatement(sql);
\n }else{
\n sql = "select code,name from t_area where pcode = ?";
\n ps = conn.prepareStatement(sql);
\n ps.setString(1,pcode);
\n }
\n rs = ps.executeQuery();
\n while (rs.next()) {
\n String code = rs.getString("code");
\n String name = rs.getString("name");
\n Area area = new Area(code, name);
\n areas.add(area);
\n }
\n } catch (ClassNotFoundException e) {
\n throw new RuntimeException(e);
\n } catch (SQLException e) {
\n throw new RuntimeException(e);
\n } finally{
\n if (rs != null) {
\n try {
\n rs.close();
\n } catch (SQLException e) {
\n throw new RuntimeException(e);
\n }
\n }
\n if (ps != null) {
\n try {
\n ps.close();
\n } catch (SQLException e) {
\n throw new RuntimeException(e);
\n }
\n }
\n if (conn != null) {
\n try {
\n conn.close();
\n } catch (SQLException e) {
\n throw new RuntimeException(e);
\n }
\n }
\n }
\n response.setContentType("text\/html,charset=UTF-8");
\n String json = JSON.toJSONString(areas);
\n response.getWriter().print(json);
\n }<\/p>\n
}<\/p>\n
5. \u5c55\u793a\u6548\u679c<\/p>\n<\/p>\n
<\/p><\/p>\n","protected":false},"excerpt":{"rendered":"
\u6587\u7ae0\u6d4f\u89c8\u9605\u8bfb429\u6b21\uff0c\u70b9\u8d5e7\u6b21\uff0c\u6536\u85cf2\u6b21\u30021. \u7701\u5e02\u8054\u52a8\uff1a\u5728\u7f51\u9875\u4e0a\uff0c\u9009\u62e9\u5bf9\u5e94\u7684\u7701\u4efd\u4e4b\u540e\uff0c\u52a8\u6001\u7684\u5173\u8054\u51fa\u8be5\u7701\u4efd\u5bf9\u5e94\u7684\u5e02\u3002\u9009\u62e9\u5bf9\u5e94\u7684\u5e02\u4e4b\u540e\uff0c\u52a8\u6001\u5730\u5173\u8054\u51fa\u57ce\u5e02\u5bf9\u5e94\u7684\u533a\u30023. \u8fd9\u91cc\u53ea\u662f\u4e00\u4e2a\u6a21\u62df\uff0c\u6240\u4ee5\u5efa\u7684\u6570\u636e\u5e93\u662f\u4e0d\u5b8c\u6574\u7684\uff0c\u60f3\u8981\u5b8c\u6574\u7684\u6570\u636e\u5e93\uff0c\u53ef\u4ee5\u53bb\u7f51\u4e0a\u627e\u3002\uff082\uff09html\u6587\u4ef6\uff08Ajax\u8bf7\u6c42\uff09\uff083\uff09servlet\u6587\u4ef6\uff08\u540e\u7aef\uff09\uff081\uff09\u81ea\u5199\u7684jQquery\u5e93\u3002<\/p>\n","protected":false},"author":2,"featured_media":37372,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[3236,99,187,3237,87],"topic":[],"class_list":["post-37374","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-server","tag-ajax","tag-java","tag-javascript","tag-jquery","tag-87"],"yoast_head":"\n