Jquery Ajax PHP MySQLで分類リスト管理を実装する(その2)_jquery

前回の記事では、リスト管理の追加・削除操作の実装方法を詳しく説明しました。フロントエンドページがajaxを介してバックエンドと通信し、フロントエンドページの対話的な操作に応答していることがわかります。バックグラウンド処理の結果に基づくこれは、Ajax および JSON アプリケーションの非常に典型的な例です。
この記事では、前の記事の例を継続して編集操作を完了します。
アイテムの編集操作
「編集」ボタンをクリックすると、対応する項目が直ちに編集状態になり、入力ボックスが表示されます。その後、「保存」ボタンをクリックして編集操作を完了するか、 をクリックします。 「キャンセル」ボタン 編集状態をキャンセルします。
まず、「編集」ボタンをクリックして編集状態にし、global.js の $(function(){...}) に次のコードを追加します。

//编辑选项 
$(".edit").live('click',function(){ 
  $(this).removeClass('edit').addClass('oks').attr('title','保存'); 
  $(this).prev().removeClass('del').addClass('cancer').attr('title','取消'); 
  var str = $(this).parent().text(); 
  var input = "<input type='text' class='input' value='"+str+"' />"; 
  $(this).next().wrapInner(input); 
}); 

コードからわかるように、実際には「編集」ボタンと「削除」ボタンのクラススタイルを変更し、そのtitle属性を変更してからカテゴリ名を入力ボックス(wrapInner)でラップしています。 、こうして編集状態に入りました。

変更したコンテンツをバックグラウンド処理に送信するには、[保存] ボタンをクリックすると次の処理が行われます。コードを参照してください:

//编辑处理 
$(".oks").live('click',function(){ 
  var input_str = $(this).parent().find('input').val(); 
  if(input_str==""){ 
    jNotify("请输入类别名称!"); 
    return false; 
  } 
  var str = escape(input_str); 
  var id = $(this).parent().attr("rel"); 
  var URL = "post.php?action=edit"; 
     
  var btn = $(this); 
  $.ajax({ 
      type: "POST", 
      url: URL, 
      data: "title="+str+"&id="+id, 
      success: function(msg){ 
        if(msg==1){ 
          jSuccess("编辑成功!"); 
          var strs = "<span class='del' title='删除'></span><span class='edit' 
          title='编辑'></span><span class='txt'>"+input_str+"</span>; 
          btn.parent().html(strs); 
        }else{ 
          jNotify("操作失败!"); 
          return false; 
        } 
      } 
  }); 
}); 

編集状態で「保存」ボタンをクリックすると、まず入力ボックスの内容が取得されます。内容が入力されていない場合は、ユーザーが入力した内容がエスケープエンコードされます。対応する編集項目の ID も取得し、入力内容と ID を $.ajax 経由でバックグラウンドの post.php にパラメータとして送信し、正常に返された場合はバックグラウンドで返された情報に応答します。 「編集が成功しました」というメッセージが表示され、編集ステータスが解除されると、「操作が失敗しました」というメッセージが表示されます。

項目を編集するバックグラウンドの post.php 処理は、前の記事の新しい項目を追加する操作と似ています。コードは次のとおりです。

case 'edit': //编辑项 
  $id = $_POST['id']; 
  $title = uniDecode($_POST['title'],'utf-8'); 
  $title = htmlspecialchars($title,ENT_QUOTES); 
  $query = mysql_query("update catalist set title='$title' where cid='$id'"); 
  if($query){ 
    echo '1'; 
  }else{ 
    echo '2'; 
  } 
  break; 

上記のコード スニペットは、post.php の switch ステートメントに追加されます。このコードは、フロントエンドから id パラメーターと title パラメーターを受け取り、title パラメーターをデコードして、データ テーブル内の対応する項目を更新し、実行を出力します。結果はフロントデスクまで。

編集状態をキャンセルするには、「キャンセル」をクリックして次のコードを実行します。

//取消编辑 
$(".cancer").live('click',function(){ 
  var li = $(this).parent().html(); 
  var str_1 = $(this).parent().find('input').val(); 
  var strs = "<span class='del' title='删除'></span><span class='edit' title='编辑'> 
  </span><span class='txt'>"+str_1+"</span>"; 
  $(this).parent().html(strs); 
}); 

実際、このコードは文字列を再構築し、編集状態を組み立てられた文字列に置き換えます。つまり、編集状態をキャンセルします。

このような実践的な事例を通じて、ユーザーの操作の一つ一つが非常にフレンドリーであり、ユーザーエクスペリエンスの一つであるフロントエンド技術の優位性を実感することができます。 Jquery ライブラリにより、ajax 操作が非常に簡単になります。この記事のコードでは、動的に作成された DOM 要素をバインドするために必要な jquery のライブ メソッドも使用されています。

上記の 2 つの記事は、Jquery Ajax PHP MySQL のカテゴリ リスト管理の実装に関する内容を編集者がまとめたものです。あなたの学習に役立つことを願っています。