Ajax と Jquery を使用してドロップダウンボックスの二次リンクを実装する-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

Ajax と Jquery を使用してドロップダウンボックスの二次リンクを実装する

亚连

Jun 09, 2018 pm 02:56 PM

ajax jquery ドロップダウンボックスデータベース

ここで、Ajax と Jquery を使用してデータベースと連携し、ドロップダウンボックスの二次連携を実現する例を共有します。これは非常に参考になり、皆さんの参考になれば幸いです。

まず、データベースを作成し、そこにデータを挿入する必要があります。

には、次の 2 つのテーブルが必要です:

図に示すように、

city: 都市テーブル

。

次に、それらに対応する関連するエンティティクラスを Java で作成します

その後、jdbc 操作を開始できます

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); 
   } 
   
 }

ログイン後にコピー

まず、ページがロードされるときにすべての州の情報を取得できます。 SQLステートメントは次のとおりです

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; 
 }

ログイン後にコピー

見つかったデータをバックグラウンドに配置し、すべての州に関するクエリされた情報を受け取るSelectedServletクラスを作成します

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());

ログイン後にコピー

ここでは、コレクションを使用してJsonオブジェクトを変換します

次のパッケージをインポートする必要があります。

それからフロントページを書き始めました:

<body> 
  省份:<select id="province"> 
   <option>--请选择省份--</option> 
  </select> 
   
  城市:<select id="city"> 
    <option>--请选择城市--</option> 
   </select> 
  <br/><br/> 
  <span></span> 
 </body>

ログイン後にコピー

そして、jQuery コードは次のとおりです: (インポートした jQuery のバージョンが比較的低いため、使用されるメソッドは getJson ではなく getJSON です)

$.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); 
 });

ログイン後にコピー

このように、ページがデータにロードされるときに取得できます

次に、リンクを実行し、最初に変更イベントをドロップダウンボックスに追加し、次に選択された情報を取得し、選択された情報を別の 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); 
 }); 
      
 });

ログイン後にコピー

サーバーは取得した情報をもとに SQL ステートメントを通じてクエリを実行します。 SQL コードは次のとおりです。

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 = &#39;"+ name +"&#39;) " 
     + " 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; 
 }

ログイン後にコピー

クエリされたデータをバックグラウンドに送信データを受信した後、バックグラウンドはそれを Json オブジェクトに変換して送信します。フロントデスクはコールバック関数を介してデータを直接取得でき、さまざまなページにジャンプする必要がなく、これはAjax (Asynchronous Javascript And XML)です

rree

ページを表示するコードは、先ほどjQueryステートメントにも書きました

効果は以下の通りです

上記は私がまとめたものです、今後皆さんのお役に立てれば幸いです。

jQueryでniceScrollスクロールバーの位置がずれている問題を解決する方法

JSでBaidu検索インターフェースを実装する方法

JSで二色ボール関数を実装する方法

以上がAjax と Jquery を使用してドロップダウンボックスの二次リンクを実装するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

ホットツール

ホットトピック

Gmailメールのログイン入り口はどこですか？

7508

CakePHP チュートリアル

1378

Steamのアカウント名の形式は何ですか

Win11 Activation Key Permanent

NYTの接続はヒントと回答です

Related knowledge

Hibernate はポリモーフィックマッピングをどのように実装しますか? Apr 17, 2024 pm 12:09 PM

Hibernate ポリモーフィックマッピングは、継承されたクラスをデータベースにマップでき、次のマッピングタイプを提供します。 join-subclass: 親クラスのすべての列を含む、サブクラス用の別個のテーブルを作成します。 table-per-class: サブクラス固有の列のみを含む、サブクラス用の別個のテーブルを作成します。 Union-subclass: join-subclass と似ていますが、親クラステーブルがすべてのサブクラス列を結合します。

iOS 18では、紛失または破損した写真を復元するための新しい「復元」アルバム機能が追加されます Jul 18, 2024 am 05:48 AM

Apple の最新リリースの iOS18、iPadOS18、および macOS Sequoia システムでは、さまざまな理由で紛失または破損した写真やビデオをユーザーが簡単に回復できるように設計された重要な機能が写真アプリケーションに追加されました。この新機能では、写真アプリのツールセクションに「Recovered」というアルバムが導入され、ユーザーがデバイス上に写真ライブラリに含まれていない写真やビデオがある場合に自動的に表示されます。「Recovered」アルバムの登場により、データベースの破損、カメラアプリケーションが写真ライブラリに正しく保存されない、または写真ライブラリを管理するサードパーティアプリケーションによって失われた写真やビデオに対する解決策が提供されます。ユーザーはいくつかの簡単な手順を実行するだけで済みます

HTML がデータベースを読み取る方法の詳細な分析 Apr 09, 2024 pm 12:36 PM

HTML はデータベースを直接読み取ることはできませんが、JavaScript と AJAX を通じて実現できます。この手順には、データベース接続の確立、クエリの送信、応答の処理、ページの更新が含まれます。この記事では、JavaScript、AJAX、および PHP を使用して MySQL データベースからデータを読み取る実践的な例を示し、クエリ結果を HTML ページに動的に表示する方法を示します。この例では、XMLHttpRequest を使用してデータベース接続を確立し、クエリを送信して応答を処理することで、ページ要素にデータを埋め込み、データベースを読み取る HTML の機能を実現します。

PHP と Ajax: オートコンプリート提案エンジンの構築 Jun 02, 2024 pm 08:39 PM

PHP と Ajax を使用してオートコンプリート候補エンジンを構築します。サーバー側スクリプト: Ajax リクエストを処理し、候補を返します (autocomplete.php)。クライアントスクリプト: Ajax リクエストを送信し、提案を表示します (autocomplete.js)。実際のケース: HTML ページにスクリプトを組み込み、検索入力要素の識別子を指定します。

PHP で MySQLi を使用してデータベース接続を確立するための詳細なチュートリアル Jun 04, 2024 pm 01:42 PM

MySQLi を使用して PHP でデータベース接続を確立する方法: MySQLi 拡張機能を含める (require_once) 接続関数を作成する (functionconnect_to_db) 接続関数を呼び出す ($conn=connect_to_db()) クエリを実行する ($result=$conn->query()) 閉じる接続 ( $conn->close())

PHP でデータベース接続エラーを処理する方法 Jun 05, 2024 pm 02:16 PM

PHP でデータベース接続エラーを処理するには、次の手順を使用できます。 mysqli_connect_errno() を使用してエラーコードを取得します。 mysqli_connect_error() を使用してエラーメッセージを取得します。これらのエラーメッセージをキャプチャしてログに記録することで、データベース接続の問題を簡単に特定して解決でき、アプリケーションをスムーズに実行できるようになります。

PHP と Ajax: 動的に読み込まれるコンテンツを作成するためのソリューション Jun 06, 2024 pm 01:12 PM

Ajax (非同期 JavaScript および XML) を使用すると、ページをリロードせずに動的コンテンツを追加できます。 PHP と Ajax を使用すると、製品リストを動的にロードできます。HTML はコンテナ要素を含むページを作成し、Ajax リクエストはロード後に要素にデータを追加します。 JavaScript は Ajax を使用して XMLHttpRequest を通じてサーバーにリクエストを送信し、サーバーから JSON 形式で商品データを取得します。 PHP は MySQL を使用してデータベースから製品データをクエリし、それを JSON 形式にエンコードします。 JavaScript は JSON データを解析し、ページコンテナーに表示します。ボタンをクリックすると、製品リストをロードするための Ajax リクエストがトリガーされます。

Golangでデータベースコールバック関数を使用するにはどうすればよいですか? Jun 03, 2024 pm 02:20 PM

Golang でデータベースコールバック関数を使用すると、次のことを実現できます。指定されたデータベース操作が完了した後にカスタムコードを実行します。追加のコードを記述せずに、個別の関数を通じてカスタム動作を追加します。コールバック関数は、挿入、更新、削除、クエリ操作に使用できます。コールバック関数を使用するには、sql.Exec、sql.QueryRow、または sql.Query 関数を使用する必要があります。

See all articles

Ajax と Jquery を使用してドロップダウンボックスの二次リンクを実装する

ホットAIツール

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

人気の記事

ホットツール

メモ帳++7.3.1

SublimeText3 中国語版

ゼンドスタジオ 13.0.1

ドリームウィーバー CS6

SublimeText3 Mac版

ホットトピック

Ajax と Jquery を使用してドロップダウン ボックスの二次リンクを実装する

ホットAIツール

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

人気の記事

ホットツール

メモ帳++7.3.1

SublimeText3 中国語版

ゼンドスタジオ 13.0.1

ドリームウィーバー CS6

SublimeText3 Mac版

ホットトピック

Ajax と Jquery を使用してドロップダウンボックスの二次リンクを実装する