PHP/AJAX 응용 프로그램 구조

Question

저는 PHP/AJAX 응용 프로그램을 작성 중이며 신속하게 관리하기 어려워지고 있습니다!

이 응용 프로그램은 데스크탑 응용 프로그램과 매우 유사하게 작동하므로 거의 모든 사용자 작업으로 AJAX 호출이 발생합니다.

이러한 모든 작업에 대해 데이터를 PHP 스크립트에 게시하고 서버 측 작업을 처리하는 해당 PHP 기능을 실행하는 jQuery가 있습니다.

$('.delete-project').on('click', function(){ 
    // Ajax request to http://myapp.co.uk/ajax/delete_project 
}); 

$('.delete-user').on('click', function(){ 
    // Ajax request to http://myapp.co.uk/ajax/delete_user 
}); 

$('.delete-keyword').on('click', function(){ 
    // Ajax request to http://myapp.co.uk/ajax/delete_keyword 
}); 

내가 일을 더 나은 방법이 있는지 해요,하지만 방법이 일반적으로 이루어집니다 유사한 코드를 많이 피하기 위해 : 나는 이런 식으로 뭔가를해야 내 jQuery를 파일에 의미

? 위의 액션은 항목 유형과 데이터베이스 ID를 게시하는 하나의 '삭제'아약스 요청으로 롤아웃 될 수 있지만 많은 기능이 다른 데이터를 게시하고 다른 매개 변수가 필요하므로 하나의 jQuery 핸들러 아래에 깔끔하게 맞지 않습니다.

AJAX 응용 프로그램을 함께 사용해야하는 방법에 대한 자료를 찾았지만 확장 가능한 AJAX 응용 프로그램을 작성하는 방법이 아니라 AJAX 요청 등을 만드는 초보 자습서 만 제공합니다.

AJAX의 작동 방식을 알고 있습니다. 가능한 경우 jQuery와 PHP를 줄이는 측면에서 구현하는 가장 좋은 방법을 찾고 있습니다.

이런 종류의 문제를 다루는 훌륭한 자료가 있습니까?

Answer 1

당신은 예를 들어, HTML에서 속성을 사용하여 하나 개의 삭제 기능으로 모든 사람을 롤백 할 수 있습니다 :

$('.delete').on('click', function(){ 
    var delete = $(this).attr('data-delete'); 
    // Ajax request to http://myapp.co.uk/ajax/delete_{delete} 
}); 

그런 다음 HTML이 될 것 같은 뭔가 :

<a href="#" class="delete" data-delete="project">Delete</a> 

More information on data-attributes

Answer 2

당신 해당 버튼에 ID 속성을 설정하고 submit-button과 같은 클래스를 설정할 수 있습니다. 호출 할 URL을 정의하는 ID 속성 값을 사용하는 동안

그리고 그런 식으로, 그 $('.submit-button')에 핸들러를 걸어 :

$('.submit-button').on('click', function(){ 
    $action = $(this).attr('id'); //lets say the ID's value is 'delete_project' 
    $url = 'http://myapp.co.uk/ajax/' + $action; 
    // Ajax request to http://myapp.co.uk/ajax/delete_project is done 
}); 

어쨌든 바탕 화면처럼되는 경향이 모든 웹 응용 프로그램은 무리입니다 JS와 약간의 PHP가 뒤 따르는 몇몇 HTML은 ... 항상 심하게 유지 보수가 가능합니다 ...

이 경우 [extJs] [1]을 한 번 사용하면 jQuery와 모듈 만 사용하게됩니다. 글자를 쓰려면 최소한의 HTML이 필요합니다 ...

Answer 3

복사 및 붙여 넣기 솔루션이 아니지만 REST API 작성 방법을 찾을 때 확장 가능한 클라이언트 - 서버 애플리케이션을 작성하는 방법에 대한 아이디어가 더 많을 수도 있습니다. 이러한 애플리케이션을 빌드 할 때 명확한 서버 측 API를 유지하는 REST 구조가 매우 훌륭한 것으로 알고 있으며 해당 클라이언트 부분을 올바르게 수행하는 방법에 대한 자습서가 있습니다.

Answer 4

제 애플리케이션에서는 아약스 호출도 많이합니다.좋아 당신이 그것을 호출 할 것 다음

 
var MySite = function() 
{ 

    AjaxWrapper : function(type,url,data,callback,noloading) 
    { 

     $.ajax({ 
      type: type, 
      url: url, 
      data: data, 
      success:function(json) 
      { 

       if(json.status === true) 
       { 

        if(typeof callback === 'function') 
        { 

         callback(json); 

        } else { 

         // A generic success handler 

        } 

       } else { 

        // An error handler 

       } 

      } 
     }); 

    }; 

}(); 

:

 
MySite.AjaxWrapper("GET", "somehref", {}, function(json) 
{ 

    // json has the result of your json callback 
    // you could also make this a separate function 
    // or not have it 

}); 

이하자 당신이 전화를 귀하의 아약스를 내가 일을 할 수있는 가장 쉬운 방법은 자신에게 등 모든 아약스 통화에 대한 래퍼를 만들 것을 발견 네가 원하는 무엇이든에. 그런 다음 데이터 속성이나 ajax가 필요한 모든 항목에 대해 표준 href를 사용하고이 함수를 통과하는 모든 링크에 이벤트를 추가 할 수 있습니다. 또는, 만약 당신이 어떤 것을하기를 원한다면 콜백 함수를 다른 것들과 다르게 만드십시오.

저는 이것을 설명하기가 어렵습니다. 그러나 이것은 제가 아약스가 많은 두 개의 프로젝트에 사용했던 것이며, 훨씬 더 쉽게 만들어줍니다!

$('.actions').on('click', function (e) { 
    e.preventDefault(); 
    var action = $(this).data('action'), 
     id = $(this).data('id'); 

    $.get('/local/handler.php', { 
     'action': action, 
     'id': id 
    }, function() { 
     // Callback stuff here 
    }); 

}); 

그리고 HTML : 모든 행동에 대한 하나의 기능을 가지고하는 것입니다 내가 이런 짓을 했을까

 
$('a[class|="delete"]').on("click", function() 
{ 

    MySite.AjaxWrapper("POST", $(this).attr("href"), {param:number1}, DeleteHandler); 

}); 

Answer 5

방법 : 당신이 다음과 같이 사용할 수 귀하의 경우에 대한 예를 들어

:

<a href="#" class="actions" data-action="delete-project" data-id="<?=$project_id?>">Delete Project</a> 

<a href="#" class="actions" data-action="delete-user" data-id="<?=$user_id?>">Delete User</a> 

<a href="#" class="actions" data-action="delete-keyword" data-id="<?=$keyword_id?>">Delete Keywork</a> 

그리고 PHP 파일에는을 기반으로하는 if 문이 있어야합니다.요청 된 조치를 수행하는 매개 변수.

편집 :

• 이 방법은 당신없는 당신은 미래에 당신의 응용 프로그램을 확장 할 수 있도록 그냥 작업을 삭제할 수 제한.

• 다른 액션이 큰 목록 (예 : 많은 종류의 삭제, 업데이트, 추가)이되면 각 액션에 대해 별도의 PHP 파일을 만들고 하나의 마스터 파일에 include을 만듭니다. 이렇게하면 쉽게 확장 할 수 있습니다.

Answer 6

도움이 될지 확실하지 않지만 코드가 커질 때 코드를 줄이기 위해 일부 기능을 만들 수 있습니다. 우선 jQuery .ajax 함수를 자신의 커스텀 래퍼 함수에 넣음으로써 ajax 호출의 중복을 막을 수있다. 예를 들어 :

function ajaxGet(myUrl, queryString, successCallback, errorCallback) { 
    if(queryString) myUrl+= "?" + queryString; 
    $.ajax({ 
     url: myUrl, 
     type: "GET", 
     data: null, 
     success: function (res) { 
      if(!successCallback) return; 
      else successCallback(res); 
     }, 
     failure: function (res) { 
      if(!errorCallback) return; 
      else errorCallback(res); 
     } 
}, 

래퍼 함수를 ​​작성하면 클릭 기능의 각 반복해서 $ 아약스 호출 코드를 복제하지 않고 필요한 데이터를 전달할 수 있습니다. 게시물을 사용하여 ajax 호출에 대해 유사한 함수를 작성할 수도 있습니다. 당신은 동적으로 추가 코드를 줄이기 위해 클릭 기능을 만들 수 :

function buildClicks() { 
    setupClick([url], [data], [success], [error], [$(elem)]); 
    setupClick([url], [data], [success], [error], [$(elem)]); 
    setupClick([url], [data], [success], [error], [$(elem)]); 
} 

//Setup clicks for each button or link 

function setupClick(url, data, success, error, elem) { 
    elem.click(function() { 
     ajaxGet(url, data, success, error); 
    }); 
} 

이 예에서 나는 당신이 "GET"사용하여 쿼리 문자열을 추가 있으리라 믿고있어. 사용자 정의 "POST"기능을 사용하여 예를 들어 JSON 형식의 객체를 쉽게 전달할 수 있습니다. 이 경우 [데이터]는 쿼리 문자열이 아닌 개체입니다.

죄송합니다.이 코드는 가장 명확하지 않습니다. 좀 더 설명해 드리겠습니다. buildClicks 함수를 사용하면 필요한 데이터를 전달하여 여러 요소에서 여러 클릭 이벤트를 설정할 수 있습니다. 위의 함수를 사용하면 데이터를 전달하는 경우 확실하지 않습니다. 동적으로 클릭을 생성하면 반복되는 .click 코드를 반복해서 복사하지 않아도됩니다.문서의 buildClicks 함수를 호출하면됩니다.

$(document).ready(function() { buildClicks(); }); 

참고 : 성공 및 오류 콜백이 호출이 밖으로 성공적으로 완료 또는 오류 중 하나 때 실행될 기능입니다. 이러한 함수를 사용하지 않으려면 생략 할 수 없거나 null을 전달할 수 있습니다. 함수 이름 끝에 "()"을 사용하지 않는 함수는 전달해야합니다. 그렇지 않으면 함수는 ajax 호출의 성공 또는 실패 전에 실행됩니다. 예 :

ajaxGet("http://testurl.com", null, ajaxSuccess, ajaxFailure); 

ajaxSuccess() { 

} 

ajaxFailure() { 

}