Jquery Ajax PHP MySQL による分類リスト管理の実装 (前編)_jquery

実際のアプリケーションでは、顧客カテゴリを管理し、顧客カテゴリの追加、削除、変更などの操作を実装する必要がありますが、これらの操作をどのようにより人間的に、ユーザーがより便利に操作できるようにするかが研究の課題となります。 。 主題。

準備段階
HTML や Jquery などのフロントエンドの知識、および基本的な PHP プログラムや MySql データベース関連の知識が必要です。この記事のデモ例を実装するには、まず mysql データベース:
が必要です。

CREATE TABLE `catalist` ( 
 `cid` int(11) NOT NULL auto_increment, 
 `title` varchar(100) NOT NULL, 
 `sort` mediumint(6) NOT NULL default '0', 
 PRIMARY KEY (`cid`) 
) ENGINE=MyISAM DEFAULT CHARSET=utf8; 

次に、jquery ライブラリをページに導入し、操作結果プロンプト プラグイン jNotify と削除確認プラグイン hiAlert を導入します。後者の 2 つのプラグインについては、このサイトで詳しく説明されています:
。 準備が必要なファイルをindex.phpのに追加します。

<script type="text/javascript" src="js/jquery.js"></script> 
<script type="text/javascript" src="js/jNotify.jquery.js"></script> 
<script type="text/javascript" src="js/jquery.alert.js"></script> 
<script type="text/javascript" src="js/global.js"></script> 
<link rel="stylesheet" type="text/css" href="css/alert.css" /> 

準備ができたら、本題に入りましょう。
index.php
Index.php はメイン ページで、データベース内の機密データを読み取り、リストに表示し、追加、削除、変更のための機能ボタンを提供します。

<&#63;php 
include_once('connect.php'); //连接数据库 
$query = mysql_query("select * from catalist order by cid asc"); 
while($row=mysql_fetch_array($query)){ 
 $list .= "<li rel='".$row['cid']."'><span class='del' title='删除'></span> 
 <span class='edit' title='编辑'></span><span class='txt'>".$row['title']."</span></li>"; 
} 
&#63;> 

上記のコードは、データ テーブル内のデータを読み取ってリスト文字列を返します。次に、文字列を対応するリストに出力する必要があります。コードは次のとおりです:

<div class="selectlist"> 
 <h3>客户类别</h3> 
 <ul id="catalist"> 
   <&#63;php echo $list;&#63;> 
 </ul> 
 <p><a href="javascript:;" onclick="addOpt()">新增一项</a></p> 
</div> 

データテーブルにいくつかのデータを追加してみると、カテゴリリストが表示されます。
CSS

.input{width:160px; padding:2px; border:1px solid #d3d3d3} 
.cur_tr{background:#ffc} 
.selectlist{width:280px; margin:30px auto; border:1px solid #ccc;} 
.selectlist h3{height:32px; line-height:32px; padding:0 4px; border-bottom:1px dotted #d3d3d3; 
 background:#f7f7f7} 
.selectlist h3 span{float:right; font-weight:500} 
.selectlist ul{margin-top:4px; margin-left:20px; list-style-type: disc} 
.selectlist ul li{line-height:26px} 
.selectlist p{line-height:28px; padding-left:6px} 
.selectlist ul li span{width:20px; height:20px} 
.selectlist ul li span.edit{ float:right;background:url(images/edits.gif) no-repeat 0 5px; 
cursor:pointer} 
.selectlist ul li span.del,.selectlist ul li span.dels,.selectlist ul li span.cancer{ 
 float:right;background:url(images/del.gif) no-repeat 0 5px; cursor:pointer} 
.selectlist ul li span.ok,.selectlist ul li span.oks{float:right;background:url(images/ok.gif) 
no-repeat 0 5px; cursor:pointer} 

CSS については詳しく説明しませんが、最終的な表示効果は次のようになります。

アイテム追加操作
addOpt() 関数を global.js に追加します。

function addOpt(){ 
 var str = "<li><span class='dels' title='取消'></span><span class='ok' title='保存'></span> 
 <input type='text' class='input' /></li>"; 
 $("#catalist").append(str); 
} 

[項目を追加] リンクをクリックして、新しい項目の入力ボックスを DOM に追加します。
ユーザーがコンテンツを入力して「保存」をクリックすると、ajax 操作がトリガーされます。まずコードを見てみましょう。

$(function(){ 
 //保存新增项 
 $(".ok").live('click',function(){ 
  var btn = $(this); 
  var input_str = btn.parent().find('input').val(); 
  if(input_str==""){ 
   jNotify("请输入类别!"); 
   return false; 
  } 
  var str = escape(input_str); 
  $.getJSON("post.php?action=add&title="+str,function(json){ 
   if(json.success==1){ 
    var li = "<li rel='"+json.id+"'><span class='del' title='删除'> 
    </span><span class='edit' title='编辑'></span><span class='txt'>"+ 
    json.title+"</span></li>"; 
    $("#catalist").append(li); 
    btn.parent().remove(); 
    jSuccess("恭喜，操作成功!"); 
   }else{ 
    jNotify("出错了！"); 
    return false; 
   } 
  }); 
 }); 
}); 

まず、ユーザーが入力したコンテンツを取得します。コンテンツが入力されていない場合は、ユーザーが入力したコンテンツがエスケープエンコードされ、バックグラウンド プログラムに正しく送信されます。認識のために。次に、$.getJSON メソッドを通じて、バックグラウンドの post.php への非同期 Ajax リクエストを開始します。バックグラウンドの post.php はパラメーター値を受け取り、関連する処理を実行します。フロントエンド コードはバックグラウンドから返された JSON データに応答し、追加が成功するとリストの最後に項目が追加されます。 「操作は成功しました」というプロンプトが表示されます。失敗した場合は、「エラー」というプロンプトが表示されます。
新しいアイテムの操作をキャンセルしたい場合は、「キャンセル」ボタンをクリックしたときに次のコードを実行してください:

//取消新增项 
$(".dels").live('click',function(){ 
  $(this).parent().remove(); //将新增项移除 
}); 

バックエンド post.php は新しいコンテンツを処理する必要があります。コードは次のとおりです:

include_once('connect.php'); //连接数据库 
$action = $_GET['action']; 
switch($action){ 
 case 'add': //新增项 
  $title = uniDecode($_GET['title'],'utf-8'); 
  $title = htmlspecialchars($title,ENT_QUOTES); 
  $query = mysql_query("insert into catalist (cid,title) values (NULL,'$title')"); 
  if($query){ 
   $insertid = mysql_insert_id($link); 
   $arr = array('id'=>$insertid,'title'=>$title,'success'=>1); 
  }else{ 
   $arr = array('success'=>2); 
  } 
  echo json_encode($arr); 
  break; 
  case '': 
  break; 
} 

フロントエンドによって送信されたコンテンツを受信し、それをデコードしてデータテーブルに書き込み、フロントエンド処理用の JSON データ形式を出力します。 uniDecode() 関数に関しては、読者はソース コードをダウンロードして詳細を学ぶことができ、主に jquery によって非同期で送信された中国語の文字列を正しく読み取って解析することができます。
項目の追加操作は完了しました。以下の項目の削除操作を参照してください。アイテムの削除操作
global.js に戻り、次のコードを $(function(){}) に追加します。

//删除项 
 $(".del").live('click',function(){ 
  var btn = $(this); 
  var id = btn.parent().attr('rel'); 
  var URL = "post.php?action=del"; 
  hiConfirm('您确定要删除吗？', '提示',function(r){ 
   if(r){ 
    $.ajax({ 
    type: "POST", 
    url: URL, 
    data: "id="+id, 
    success: function(msg){ 
     if(msg==1){ 
      jSuccess("删除成功!"); 
      btn.parent().remove(); 
     }else{ 
      jNotify("操作失败!"); 
      return false; 
     } 
    } 
    }); 
   } 
  }); 
 }); 

当然ですが、「削除」ボタンをクリックすると、バックグラウンドのpost.phpにもajaxリクエストが送信され、削除された項目に対応するパラメータIDがバックグラウンドに送信され、成功した場合にはバックグラウンド処理の結果が応答されます。を実行すると、ユーザーは「正常に削除されました」というプロンプトが表示され、remove() を使用してデータ項目を削除します。失敗した場合は、「操作が失敗しました」というプロンプトが表示されます。
バックグラウンドの post.php はパラメータを受け取り、それに応じて処理します:

case 'del': //删除项 
 $id = $_POST['id']; 
 $query = mysql_query("delete from catalist where cid=".$id); 
 if($query){ 
  echo '1'; 
 }else{ 
  echo '2'; 
 } 
 break; 

上記のコードスニペットは、post.phpのswitch文に追加され、delete文を実行し、フロントエンド処理の実行結果を出力します。
紙面の都合上、改造操作については以下の記事で解説しますので、お見逃しなくご注意ください。