Jquery Ajax PHP MySQL implements classification list management (Part 2)_jquery

In the previous article, we explained in detail how to implement the addition and deletion operations of list management. It can be seen that the front-end page communicates with the backend through ajax and responds to the front-end page interactive operation based on the background processing results. This is a very typical Examples of Ajax and JSON applications.
This article will continue the example in the previous article and complete the editing operation.
Edit item operations
By clicking the "Edit" button, the corresponding item will immediately change to the editing state, and an input box will appear. The user can re-enter new content, then click the "Save" button to complete the editing operation, or click the "Cancel" button Cancel editing status.
First, click the "Edit" button to achieve the editing state, and add the following code to $(function(){...}) in global.js:

//编辑选项 
$(".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); 
}); 

As can be seen from the code, the class style of the "Edit" button and "Delete" button is actually changed, their title attribute is modified, and then the category name is wrapped with an input input box (wrapInner), thus generating Entered an editing state.
To submit the modified content to background processing, by clicking the "Save" button, the following things will happen, please see the code:

//编辑处理 
$(".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; 
        } 
      } 
  }); 
}); 

By clicking the "Save" button in the editing state, first obtain the content of the input box. If no content is entered, the user is prompted to enter the content. Then the content entered by the user is escape encoded, and the corresponding edit item is also obtained. ID, submit the input content and ID as parameters to the background post.php through $.ajax for processing, and respond to the information returned by the background. If the return is successful, the user will be prompted to "edit successfully" and the editing status will be released. If the return fails, , the user will be prompted with "Operation failed".
The background post.php processing of editing items is similar to the operation of adding new items in the previous article. The code is as follows:

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; 

The above code snippet is added to the switch statement of post.php. The code receives the id and title parameters from the front end, decodes the title parameters, then updates the corresponding items in the data table, and outputs the execution results to the front desk. deal with.
To cancel the editing state, execute the following code by clicking "Cancel":

//取消编辑 
$(".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); 
}); 

In fact, the code reassembles a string and replaces the edited state with the assembled string, that is, cancels the editing state.
Through such a practical application case, we can experience the superiority of front-end technology. Every step of the operation completed by the user is so friendly, which is an aspect of user experience. The Jquery library makes ajax operations so simple. The code in this article also uses jquery's live method, which is necessary to bind dynamically created DOM elements.

The above two articles are all the content about Jquery Ajax PHP MySQL implementing category list management that the editor has compiled for you. I hope it will be helpful to your study.