Jquery Ajax PHP MySQL은 분류 목록 관리를 구현합니다(2부)

Jquery Ajax PHP MySQL은 분류 목록 관리를 구현합니다(2부)_jquery

WBOY

풀어 주다： 2016-05-16 15:34:38

원래의

1341명이 탐색했습니다.

이전 기사에서는 목록 관리의 추가 및 삭제 작업을 구현하는 방법을 자세히 설명했습니다. 프런트엔드 페이지는 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); 
});

로그인 후 복사

코드에서 볼 수 있듯이 "편집" 버튼과 "삭제" 버튼의 클래스 스타일이 실제로 변경되고 제목 속성이 수정된 후 카테고리 이름이 입력 입력 상자(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&#63;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의 스위치 문에 추가되었습니다. 코드는 프런트 엔드에서 id 및 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의 라이브 메서드도 사용합니다.

위 두 글은 모두 편집자가 정리한 카테고리 목록 관리를 구현하는 Jquery Ajax PHP MySQL에 대한 내용입니다. 여러분의 연구에 도움이 되길 바랍니다.