(上級) PHP+Mysql+jQuery はクエリとリスト ボックスの選択操作を実装します

この記事では、Ajax を介して mysql データをクエリし、返されたデータを選択リストに表示し、最後に選択を通じて選択した選択にオプションを追加する方法について説明します。これは、多くのバックエンド管理システムで使用できます。この記事のリスト ボックスの操作は、jquery プラグインである Multiselect に依存しています。

<form id="sel_form" action="post.php" method="post"> 
   <p><input type="text" name="keys" id="keys" value="输入姓名或手机号码" onclick="this.value=&#39;&#39;" /> 
    <input type="button" id="searchOption" value="搜索" /> <span id="msg_ser"></span></p> 
   <div id="sel"> 
   <select name="liOption[]" id=&#39;liOption&#39; multiple=&#39;multiple&#39; size=&#39;8&#39;> 
   </select> 
   </div> 
   <input type="submit" value="提 交" /> 
</form>

説明すると、HTML コンテンツはフォームであり、クエリ入力ボックス、リスト ボックス、および関連ボタンが含まれています。

MYSQL データテーブル構造

CREATE TABLE IF NOT EXISTS `t_mult` ( 
  `id` int(11) NOT NULL auto_increment, 
  `username` varchar(32) NOT NULL, 
  `phone` varchar(20) NOT NULL, 
  PRIMARY KEY  (`id`) 
) ENGINE=MyISAM  DEFAULT CHARSET=utf8;

テーブル t_mult は、名前と携帯電話番号フィールドを含む連絡先情報テーブルです。

<link rel="stylesheet" type="text/css" href="jquery.multiselect2side.css" />

この例では、Multiselect プラグインに必要なスタイル ファイルのみが読み込まれています。他の CSS は自分でデザインできます。

まず、この例に必要な 2 つの js ファイルを参照する必要があります。

rree

それでは、Multiselect プラグインを呼び出してみましょう。

 
 
<link rel="stylesheet" type="text/css" href="jquery.multiselect2side.css" />

それでは、Ajax クエリ データを実行するための検索ボタンを書いてみましょう。

$("#liOption").multiselect2side({ 
    selectedPosition: 'right', 
    moveOptions: false, 
    labelsx: '待选区', 
    labeldx: '已选区' 
});

検索ボタンをクリックすると、Ajax の非同期操作が実行され、取得した検索ボックスの入力値が POST モードでバックグラウンド プログラムの action.php に渡されて処理されることを説明します。 1 が返されると、HTML ページに「レコードなし」というプロンプトが表示されます。それ以外の場合は、結果が左側のリスト ボックス (選択対象) に出力されます。ここが重要なポイントであることに注意してください。なぜリスト ボックスが XHTML の liOption ではなく、liOptionms2side__sx なのかということです。これは、Multiselect プラグインから始まります。Multiselect プラグインは、実際には、関連する操作のためにリスト ボックスを左右 2 つのリスト ボックスに置き換えます。プラグイン コードを見ると、見つけるのは難しくありません。左側の名前は liOptionms2side__sx、右側のリストは (選択された) ボックスの名前は liOptionms2side__dx です。これは後で使用します。

PHP

まずはaction.phpの処理を見てみましょう。

最初のステップはデータベースに接続することです。

$("#searchOption").click(function(){ 
    var keys=$("#keys").val(); 
    $.ajax({ 
         type: "POST", 
         url: "action.php", 
         data: "title="+keys, 
         success: function(msg){ 
            if(msg==1){ 
                $("#msg_ser").show().html("没有记录！"); 
            }else{ 
                $("#liOptionms2side__sx").html(msg); 
                $("#msg_ser").html(""); 
            } 
         } 
    }); 
    $("#msg_ser").ajaxSend(function(event, request, settings){ 
        $(this).html(""); 
    }); 
});

2 番目のステップは、データを読み取って出力することです。検索ボックスから渡された値を検出することで、さまざまな SQL ステートメントが構築され、出力用のデータが返されます。コードは次のとおりです。

$conn=mysql_connect("localhost","root",""); 
mysql_select_db("demo",$conn); 
mysql_query("SET names UTF8");

最後に、送信操作があり、バックグラウンドの post.php プログラムが最終的に送信されたアイテムの値。

$keys=trim($_POST['title']); 
$keys=mysql_real_escape_string($keys,$conn); 
if(!empty($keys)){ 
        $sql="select * from t_mult where username like '%$keys%' or phone='$keys'"; 
}else{ 
        $sql="select * from t_mult"; 
} 
$query=mysql_query($sql); 
$count=mysql_num_rows($query); 
if($count>0){ 
      while($row=mysql_fetch_array($query)){ 
          $str.="<option value=&#39;".$row[&#39;id&#39;]."&#39;>".$row[&#39;username&#39;]."-".$row[&#39;phone&#39;]."</option>"; 
    } 
    echo $str; 
}else{ 
      echo "1"; 
}

取得するのは、liOption の値ではなく、右側のリスト ボックスの liOptionms2side__dx の値であることに注意してください。

上記は、クエリとリスト ボックスの選択操作を実装するための (高度な部分) PHP + Mysql + jQuery の内容です。さらに関連する内容については、PHP 中国語 Web サイト (www.php.cn) に注目してください。