jqueryでajaxを使用したphpの例

15719 ワード

jquery Ajax 職場レジャー

最近はずっとjqueryを勉強しています.もちろんajax処理に夢中になっています.簡単で速いです.自分の学習ノートを貼って、自分の知識を固めることと、みんなの参考にすることです.

このセクションでは主にajaxの中の$postを練習します.まず、これはphpchinaの文章に基づいて練習したものです.http://www.phpchina.com/index.php?action-views-intemid-35556.また、この練習は主にデータベースとのデータのやり取りを練習します.

第一歩:あなたのデータベースにテスト情報を保存するためのテーブルを作成します.


    
    
    
    
     
     
     
     CREATE TABLE `directory` (   
     
     
     
     `id` INT NOT NULL AUTO_INCREMENT ,   
     
     
     
     `name` VARCHAR( 64 ) NOT NULL ,   
     
     
     
     `phone` VARCHAR( 16 ) NOT NULL ,   
     
     
     
     PRIMARY KEY ( `id` )      
     
     
     
     ) TYPE = MYISAM ;

私たちはdirectory表を作成してテスト情報を保存して、その中にいくつかのテストデータを出入りします.


    
    
    
    
     
     
     
     insert into `directory` (name,phone) values ('Tom Smith', '512-555-0111');       
     
     
     
     insert into `directory` (name,phone) values ('Bill Smith', '512-555-0112');       
     
     
     
     insert into `directory` (name,phone) values ('John Smith', '512-555-0113');       
     
     
     
     insert into `directory` (name,phone) values ('Jane Smith', '512-555-0114');       
     
     
     
     insert into `directory` (name,phone) values ('Sara Smith', '512-555-0115');

今までの第一歩は完成しました.次に私達は第二歩を行います.
第二ステップ:index.phpファイルコードの作成は以下の通りです.


      
      
      
      
       
       
       
       <html>   
       
       
       
         <head>   
       
       
       
           <title>Welcome to Ajax!!</title>   
       
       
       
           <script type="text/javascript" src="./jquery.js"></script>   
       
       
       
           <script type="text/javascript">   
       
       
       
             $(document).ready(function(){   
       
       
       
                 $("#search_results").slideUp();   
       
       
       
                 $("#search_button").click(function(e){   
       
       
       
                   e.preventDefault();   
       
       
       
                   ajax_search();   
       
       
       
                   });   
       
       
       
                 $("#search_term").keyup(function(e){   
       
       
       
                   e.preventDefault();   
       
       
       
                   ajax_search();   
       
       
       
                   });   
       
       
       
                 });   
       
       
       
             function ajax_search(){   
       
       
       
               $("#search_results").show();   
       
       
       
               var search_val=$("#search_term").val();   
       
       
       
               $.post("./find.php",{search_term:search_val},function(data){   
       
       
       
                   if(data.length>0){   
       
       
       
                     $("#search_results").html(data);   
       
       
       
                   }   
       
       
       
                   }   
       
       
       
               )   
       
       
       
             }   
       
       
       
           </script>          
       
       
       
         </head>   
       
       
       
        
       
       
       
         <body>   
       
       
       
           <h1> Search Our Phone Directory <h1>   
       
       
       
           <form id="searchform"    method="post">   
       
       
       
             <div >   
       
       
       
               <label for="search_term">Search Name/Phone</label>   
       
       
       
               <input type="text" name="search_term" id="search_term"/>   
       
       
       
               <input type="submit" value="search" id="search_button"/>   
       
       
       
             </div>   
       
       
       
           </form>   
       
       
       
           <div id="search_results"></div>   
       
       
       
         </body>   
       
       
       
       </html>

次のステップ3:
ステップ3:find.phpを作成する:


      
      
      
      
       
       
       
       <?php   
       
       
       
         define('HOST',"localhost");   
       
       
       
         define('USER',"root");   
       
       
       
         define('PWD',"");   
       
       
       
         define('DB','test');   
       
       
       
        
       
       
       
         $connect = mysql_connect(HOST,USER,PWD) or die("       ！");   
       
       
       
         mysql_select_db(DB) or die("       ");   
       
       
       
        
       
       
       
         $term=$_POST['search_term'];   
       
       
       
         //$term="Bill";   
       
       
       
        
       
       
       
         $sql = "select name,phone from directory where name like '%".$term."%' order by name asc";   
       
       
       
        
       
       
       
         //echo $sql;   
       
       
       
        
       
       
       
         $result = mysql_query($sql);   
       
       
       
        
       
       
       
         $string = "";   
       
       
       
        
       
       
       
         if(mysql_num_rows($result)>0){   
       
       
       
           while ($row = mysql_fetch_array($result)){   
       
       
       
             $string .="<b>".$row['name']."</b>-";   
       
       
       
             $string .="<b>".$row['phone']."</b>";   
       
       
       
             $string .="<br/>
";   
       
       
       
           }   
       
       
       
         }else{   
       
       
       
           $string = "No matches";   
       
       
       
         }   
       
       
       
        
       
       
       
         echo $string;

上記のコードをサービスの上に置いて実行すればいいです.ほえるのは簡単でしょう.

前のセクションの中の$post()メソッドは、下の階のajaxの高速パッケージです.下の部分は下の層の$ajax()方法で上記の機能をどのように実現するかを見てみましょう.簡単に言えば、もう一つの関数をjsに追加します.コードは以下の通りです.


     
     
     
     
      
      
      
      function ajax(){  
      
      
      
      $("#search_results").show();  
      
      
      
      var search_value=$("#search_input").val();  
      
      
      
      $.ajax({  
      
      
      
      type:"post",  
      
      
      
      url:"./find.php",  
      
      
      
      data:{'search':search_value},  
      
      
      
      success:function(data){  
      
      
      
      if(data.length>0){  
      
      
      
      $("#search_results").html(data);  
      
      
      
      }  
      
      
      
      }  
      
      
      
      }) 
     
     
     
     
           ajax_search()          ，            ！！！

DOM前世の生