Web-Frontend
js-Tutorial
Verwenden Sie Ajax und Jquery, um die sekundäre Verknüpfung von Dropdown-Boxen zu implementieren
Verwenden Sie Ajax und Jquery, um die sekundäre Verknüpfung von Dropdown-Boxen zu implementieren
Jetzt werde ich ein Beispiel für die Zusammenarbeit mit Ajax und Jquery mit der Datenbank teilen, um die sekundäre Verknüpfung des Dropdown-Felds zu realisieren. Es hat einen guten Referenzwert und ich hoffe, es wird für alle hilfreich sein.
Zuerst müssen wir eine Datenbank erstellen und einige Daten darin einfügen
Zwei Tabellen werden benötigt:
Provinz: Provinztabelle
Stadt: Stadttabelle
wie gezeigt:
und erstellen Sie dann die relevanten in Java Die entsprechende Entitätsklasse
Dann können wir die JDBC-Operation starten
public class ConnectionFactory {
private static String driver;
private static String url;
private static String user;
private static String password;
static {
Properties prop = new Properties();
//读取文件
try {
InputStream in = ConnectionFactory.class.getResourceAsStream("./jdbc.properties");
prop.load(in);
driver = prop.getProperty("jdbc.driver");
url = prop.getProperty("jdbc.url");
user = prop.getProperty("jdbc.user");
password = prop.getProperty("jdbc.password");
} catch (IOException e) {
e.printStackTrace();
}
}
/**
* 获取连接对象
* @return
*/
public static Connection getConnection(){
Connection conn = null;
try {
Class.forName(driver);
conn = DriverManager.getConnection(url, user, password);
} catch (Exception e) {
throw new RuntimeException(e);
}
return conn;
}
/**
* 关闭资源
* @param conn
* @param pstmt
* @param stmt
* @param rs
*/
public static void close(Connection conn,PreparedStatement pstmt,Statement stmt,ResultSet rs){
try {
if (conn != null) {
conn.close();
}
if (pstmt != null) {
pstmt.close();
}
if (stmt != null) {
stmt.close();
}
if (rs != null) {
rs.close();
}
} catch (SQLException e) {
throw new RuntimeException(e);
}
}Zuerst können wir beim Laden der Seite alle Provinzinformationen abrufen, Die SQL-Anweisung lautet wie folgt:
Connection conn = null;
PreparedStatement pstmt = null;
Province province2 = null;
@Override
public ArrayList<Province> findAllPro() {
ResultSet rs = null;
ArrayList<Province> pros = null;
try {
String sql = "select id,place from province";
conn = ConnectionFactory.getConnection();
pstmt = conn.prepareStatement(sql);
pros = new ArrayList<Province>();
rs = pstmt.executeQuery();
while(rs.next()){
Province province = new Province();
province.setId(rs.getInt(1));
province.setPlace(rs.getString(2));
pros.add(province);
}
} catch (SQLException e) {
throw new RuntimeException(e);
}
return pros;
}Legen Sie die gefundenen Daten in den Hintergrund und erstellen Sie eine SelectedServlet-Klasse, um die abgefragten Informationen über alle Provinzen zu empfangen
response.setContentType("application/json;charset=utf-8");
response.setCharacterEncoding("utf-8");
request.setCharacterEncoding("utf-8");
//创建一个Place对象
ArrayList<Province> pros= new Place().findAllPro();
PrintWriter out = response.getWriter();
//将集合直接转换为Json对象
out.write(JSONArray.fromObject(pros).toString());Hier wird eine Sammlung verwendet, um Json-Objekte zu konvertieren , wir müssen die folgenden Pakete importieren
Dann beginnen wir mit dem Schreiben der Titelseite:
<body>
省份:<select id="province">
<option>--请选择省份--</option>
</select>
城市:<select id="city">
<option>--请选择城市--</option>
</select>
<br/><br/>
<span></span>
</body>Dann lautet der jQuery-Code wie folgt: (Da ich importiert habe Die jQuery-Version ist relativ niedrig, daher wird als Methode getJSON anstelle von getJson verwendet)
$.getJSON("SelectedServlet",function(data,textStatus){
var provinces = data;
var res = "";
for(var i =0;i<provinces.length;i++){
<span style="white-space:pre"> </span>res += "<option>"+provinces[i].place+"</option>";
}
$("#province").append(res);
});Auf diese Weise können die Daten beim Laden der Seite abgerufen werden
Dann führen wir erneut eine Verknüpfung durch. Fügen Sie zunächst ein Änderungsereignis zum Dropdown-Feld hinzu, rufen Sie dann die ausgewählten Informationen ab und senden Sie die ausgewählten Informationen an ein anderes CityServlet.
//下拉框改变时触发的事件
$("#province").change(function(){
var seled = $("option:selected").html();
$("span").html(seled);
$.getJSON("CityServlet",{
"province":encodeURI(encodeURI(seled))
},function(data){
$("#city").html("");
var citys = data;
var res = "";
for(var i = 0;i<citys.length;i++){
res += "<option>"+citys[i].place+"</option>";
}
$("#city").append(res);
});
});Der Server fragt die erhaltenen Informationen ab SQL-Anweisungen, SQL-Code Wie folgt:
public ArrayList<City> findAllCityByPro(String name) {
ResultSet rs = null;
ArrayList<City> citys = null;
try {
//通过名字获得所有值
String sql = "select c.city_place from city c ,"
+ "province p where c.province_id = "
+ " (select id from province where place = '"+ name +"') "
+ " and c.province_id = p.id";
conn = ConnectionFactory.getConnection();
pstmt = conn.prepareStatement(sql);
citys = new ArrayList<City>();
System.out.println(sql);
rs = pstmt.executeQuery();
while(rs.next()){
City city = new City();
city.setPlace(rs.getString(1));
citys.add(city);
}
System.out.println(citys);
} catch (SQLException e) {
e.printStackTrace();
}
return citys;
}sendet die abgefragten Daten an den Hintergrund. Nach dem Empfang der Daten konvertiert der Hintergrund sie in ein Json-Objekt und sendet es über die Rückruffunktion an die Rezeption Die Rezeption kann die Daten direkt über Ereignisse abrufen und muss nicht zu verschiedenen Seiten springen. Dies ist Ajax (asynchrones Javascript und XML).
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("application/json;charset=utf-8");
response.setCharacterEncoding("utf-8");
request.setCharacterEncoding("utf-8");
// String proName = "浙江";
String proName = URLDecoder.decode(URLDecoder.decode(request.getParameter("province"), "utf-8"),
"utf-8");
ArrayList<City> citys= new Place().findAllCityByPro(proName);
PrintWriter out = response.getWriter();
out.write(JSONArray.fromObject(citys).toString());
}Der Code zum Anzeigen der Seite war ebenfalls vorhanden in der jQuery-Anweisung geschrieben
Der Effekt ist wie folgt:
Ich hoffe, das Obige ist das, was ich für Sie zusammengestellt habe Es wird Ihnen in Zukunft hilfreich sein.
Verwandte Artikel:
So lösen Sie das Problem der Fehlausrichtung der niceScroll-Bildlaufleiste in jQuery
So implementieren Sie die Baidu-Suchschnittstelle in JS
So implementieren Sie die Doppelfarben-Ballfunktion in JS
Das obige ist der detaillierte Inhalt vonVerwenden Sie Ajax und Jquery, um die sekundäre Verknüpfung von Dropdown-Boxen zu implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
1378
52
Wie implementiert Hibernate polymorphe Zuordnung?
Apr 17, 2024 pm 12:09 PM
Die polymorphe Hibernate-Zuordnung kann geerbte Klassen der Datenbank zuordnen und bietet die folgenden Zuordnungstypen: Joined-Subclass: Erstellen Sie eine separate Tabelle für die Unterklasse, einschließlich aller Spalten der übergeordneten Klasse. Tabelle pro Klasse: Erstellen Sie eine separate Tabelle für Unterklassen, die nur unterklassenspezifische Spalten enthält. Union-Unterklasse: ähnelt der verbundenen Unterklasse, aber die Tabelle der übergeordneten Klasse vereint alle Spalten der Unterklasse.
iOS 18 fügt eine neue Albumfunktion „Wiederhergestellt' hinzu, um verlorene oder beschädigte Fotos wiederherzustellen
Jul 18, 2024 am 05:48 AM
Apples neueste Versionen der iOS18-, iPadOS18- und macOS Sequoia-Systeme haben der Fotoanwendung eine wichtige Funktion hinzugefügt, die Benutzern dabei helfen soll, aus verschiedenen Gründen verlorene oder beschädigte Fotos und Videos einfach wiederherzustellen. Mit der neuen Funktion wird im Abschnitt „Extras“ der Fotos-App ein Album mit dem Namen „Wiederhergestellt“ eingeführt, das automatisch angezeigt wird, wenn ein Benutzer Bilder oder Videos auf seinem Gerät hat, die nicht Teil seiner Fotobibliothek sind. Das Aufkommen des Albums „Wiederhergestellt“ bietet eine Lösung für Fotos und Videos, die aufgrund einer Datenbankbeschädigung verloren gehen, die Kameraanwendung nicht korrekt in der Fotobibliothek speichert oder eine Drittanbieteranwendung die Fotobibliothek verwaltet. Benutzer benötigen nur wenige einfache Schritte
Eine ausführliche Analyse, wie HTML die Datenbank liest
Apr 09, 2024 pm 12:36 PM
HTML kann die Datenbank nicht direkt lesen, dies kann jedoch über JavaScript und AJAX erreicht werden. Zu den Schritten gehören das Herstellen einer Datenbankverbindung, das Senden einer Abfrage, das Verarbeiten der Antwort und das Aktualisieren der Seite. Dieser Artikel bietet ein praktisches Beispiel für die Verwendung von JavaScript, AJAX und PHP zum Lesen von Daten aus einer MySQL-Datenbank und zeigt, wie Abfrageergebnisse dynamisch auf einer HTML-Seite angezeigt werden. In diesem Beispiel wird XMLHttpRequest verwendet, um eine Datenbankverbindung herzustellen, eine Abfrage zu senden und die Antwort zu verarbeiten. Dadurch werden Daten in Seitenelemente gefüllt und die Funktion des HTML-Lesens der Datenbank realisiert.
PHP und Ajax: Erstellen einer Autovervollständigungs-Vorschlags-Engine
Jun 02, 2024 pm 08:39 PM
Erstellen Sie eine Engine für Autovervollständigungsvorschläge mit PHP und Ajax: Serverseitiges Skript: Verarbeitet Ajax-Anfragen und gibt Vorschläge zurück (autocomplete.php). Client-Skript: Ajax-Anfrage senden und Vorschläge anzeigen (autocomplete.js). Praktischer Fall: Fügen Sie ein Skript in die HTML-Seite ein und geben Sie die Kennung des Sucheingabeelements an.
Ausführliches Tutorial zum Herstellen einer Datenbankverbindung mit MySQLi in PHP
Jun 04, 2024 pm 01:42 PM
So verwenden Sie MySQLi zum Herstellen einer Datenbankverbindung in PHP: MySQLi-Erweiterung einbinden (require_once) Verbindungsfunktion erstellen (functionconnect_to_db) Verbindungsfunktion aufrufen ($conn=connect_to_db()) Abfrage ausführen ($result=$conn->query()) Schließen Verbindung ( $conn->close())
Umgang mit Datenbankverbindungsfehlern in PHP
Jun 05, 2024 pm 02:16 PM
Um Datenbankverbindungsfehler in PHP zu behandeln, können Sie die folgenden Schritte ausführen: Verwenden Sie mysqli_connect_errno(), um den Fehlercode abzurufen. Verwenden Sie mysqli_connect_error(), um die Fehlermeldung abzurufen. Durch die Erfassung und Protokollierung dieser Fehlermeldungen können Datenbankverbindungsprobleme leicht identifiziert und behoben werden, wodurch der reibungslose Betrieb Ihrer Anwendung gewährleistet wird.
PHP vs. Ajax: Lösungen zum Erstellen dynamisch geladener Inhalte
Jun 06, 2024 pm 01:12 PM
Ajax (Asynchronous JavaScript and XML) ermöglicht das Hinzufügen dynamischer Inhalte, ohne die Seite neu laden zu müssen. Mit PHP und Ajax können Sie eine Produktliste dynamisch laden: HTML erstellt eine Seite mit einem Containerelement und die Ajax-Anfrage fügt die Daten nach dem Laden zum Element hinzu. JavaScript verwendet Ajax, um über XMLHttpRequest eine Anfrage an den Server zu senden, um Produktdaten im JSON-Format vom Server abzurufen. PHP nutzt MySQL, um Produktdaten aus der Datenbank abzufragen und in das JSON-Format zu kodieren. JavaScript analysiert die JSON-Daten und zeigt sie im Seitencontainer an. Durch Klicken auf die Schaltfläche wird eine Ajax-Anfrage zum Laden der Produktliste ausgelöst.
Wie verwende ich Datenbank-Callback-Funktionen in Golang?
Jun 03, 2024 pm 02:20 PM
Durch die Verwendung der Datenbank-Rückruffunktion in Golang kann Folgendes erreicht werden: Ausführen von benutzerdefiniertem Code, nachdem der angegebene Datenbankvorgang abgeschlossen ist. Fügen Sie benutzerdefiniertes Verhalten durch separate Funktionen hinzu, ohne zusätzlichen Code zu schreiben. Rückruffunktionen stehen für Einfüge-, Aktualisierungs-, Lösch- und Abfragevorgänge zur Verfügung. Sie müssen die Funktion sql.Exec, sql.QueryRow oder sql.Query verwenden, um die Rückruffunktion verwenden zu können.
