js가 thinkphp5 데이터와 상호작용하는 방법

최근 몇 년간 프론트엔드 기술의 급속한 발전은 프론트엔드와 백엔드 분리 개발 모델에 더 나은 가능성을 제공했습니다. 개발에 있어서 흔히 사용되는 프론트엔드 개발 언어인 자바스크립트(JS)도 프론트엔드 개발에 없어서는 안 될 부분이 되었습니다. 이 경우 JS가 백엔드 프레임워크인 php5(줄여서 TP5)와 상호 작용하는 방식은 개발자가 우려하는 문제 중 하나가 되었습니다. 이번 글에서는 JS와 tp5 간의 데이터 상호작용 방법을 여러 측면에서 자세히 소개하겠습니다.

1. 프런트엔드 및 백엔드 데이터 상호 작용 방법

프런트 엔드 및 백엔드 데이터 상호 작용에는 일반적으로 동기식과 비동기식의 두 가지 방법이 있습니다. 동기 방식은 프런트 엔드가 요청을 보낸 후 응답하기 전에 백 엔드가 데이터를 반환할 때까지 기다려야 함을 의미합니다. 비동기 방식은 프런트 엔드가 요청을 시작한 후에 계속 기다릴 필요가 없습니다. 아래쪽으로 실행하고 처리하기 전에 백엔드 데이터가 반환될 때까지 기다립니다.

실제 개발에서는 지연 등의 단점으로 인해 동기화 방식이 점점 덜 사용되게 되었습니다. 비동기 방식은 프런트엔드와 백엔드 데이터 상호작용의 주요 방식이 되었습니다. 다음 논의에서는 비동기 모드에서 JS와 tp5 데이터 간의 상호 작용 방법을 주로 설명합니다.

2. Ajax를 사용하여 비동기 통신을 구현합니다

비동기 통신에서 핵심은 Ajax를 사용하여 프런트엔드 및 백엔드 데이터 통신을 구현하는 것입니다. Ajax는 Asynchronous JavaScript and XML(Asynchronous JavaScript and XML)의 약자로 JavaScript를 이용한 비동기 통신 기술입니다. 전체 페이지를 다시 로드하지 않고도 페이지의 일부를 업데이트할 수 있습니다.

Ajax를 사용할 때 프론트엔드 부분에는 JS 코드를, 백엔드 부분에는 tp5 코드를 작성해야 합니다. 프런트 엔드가 Ajax 요청을 보낸 후 백 엔드는 요청을 받은 후 Json 데이터(XML 형식의 데이터일 수도 있음)를 반환합니다. 데이터가 반환된 후 프런트엔드 JS에 의해 처리됩니다.

다음은 실제 개발 사례를 바탕으로 JS와 tp5 간의 구체적인 비동기 상호작용 구현을 자세히 소개합니다.

1단계: 프런트엔드에 프런트엔드 코드 작성

먼저 프런트엔드에서 사용자 권한을 설정하는 페이지를 작성합니다. 페이지에서는 권한 추가 및 삭제라는 두 가지 작업을 구현해야 합니다. 여기서는 "추가" 작업을 예로 들어 설명하겠습니다.

먼저 버튼을 클릭하면 권한 정보를 입력하는 양식이 나타나도록 페이지에 버튼을 작성해야 합니다. 동시에 권한 정보를 편리하게 표시하려면 페이지에 모든 권한 정보를 표시하는 테이블도 작성해야 합니다.

다음 JS 코드를 사용하여 권한 정보를 표시하는 HTML 테이블을 생성하세요.

function getAuthorityTable() {
    $.ajax({
        type: "GET",
        url: "/index/getAuthorityTable",
        dataType: "json",
        success: function (data) {
            var table = "<table><thead><tr><th>权限编号</th><th>权限名</th><th>操作</th></thead><tbody>";
            for (var i = 0; i < data.length; i++) {
                table += "<tr><td>" + data[i]["id"] + "</td><td>" + data[i]["authority_name"] + "</td><td><button onclick='deleteAuthority(" + data[i]["id"] + ")'>删除</button></td></tr>";
            }
            table += "</tbody></table>";
            $("#authorityTable").html(table);
        }
    });
}

여기에서는 ajax를 사용하여 백엔드 데이터를 비동기적으로 획득하고 권한 번호, 권한 이름 및 삭제 작업의 세 부분으로 구성된 HTML 테이블을 생성합니다. 그 중 getAuthorityTable() 메소드는 프론트엔드 요청 URL을 정의하고, 요청 결과로부터 HTML 테이블을 생성하여 페이지에 표시합니다.

2단계: 백엔드에 tp5 코드 작성

URL 요청에 응답하려면 서버 측에 메소드를 작성해야 합니다. tp5에서는 컨트롤러와 모델을 사용하여 구현할 수 있습니다.

예를 들어 컨트롤러 인덱스 컨트롤러에 setAuthority 메소드를 추가할 수 있습니다.

public function setAuthority()
{
    $authority_name = input('post.authority_name');
    $model = new Authority();
    if ($model -> add_authority($authority_name)) {
        $this -> success('添加权限成功!');
    } else {
        $this -> error('添加权限失败！');
    }
}

위 코드에서는 입력 메소드를 사용하여 POST 매개변수를 수신하고 Authority 모델 클래스의 add_authority 메소드를 호출하여 권한 정보를 추가합니다. 마지막으로 tp5에 내장된 $this->success 및 $this->error 메소드를 사용하여 상태 정보를 반환하여 작업의 성공 또는 실패를 프런트엔드에 알립니다.

3단계: JS를 사용하여 프런트 엔드에서 요청 보내기

프런트 엔드 JS 코드에서 구현해야 합니다. 버튼을 클릭한 후 백엔드로 요청을 보내고 백엔드에서 반환된 응답을 받아야 합니다.

권한 추가 작업을 예로 들어 버튼 클릭 이벤트에서 이 작업을 구현하세요.

function addAuthority() {
    var authority_name = $("#authorityName").val();
    $.ajax({
        type: "POST",
        url: "/index/setAuthority",
        dataType: "json",
        data: {authority_name: authority_name},
        success: function (data) {
            alert(data.msg);
        }
    });
}

위 코드에서는 POST 메서드를 사용하여 서버에 요청을 보내고 "authority_name"을 매개변수로 SetAuthority 컨트롤러에 보냅니다. 다음으로 data.msg를 사용하여 작업 상태 정보를 반환합니다.

3. 기타 주의 사항

위 내용 외에도 주의가 필요한 사항이 있습니다.

1. 크로스 도메인 요청: Ajax 요청은 비동기식이므로 도메인 이름은 프런트엔드와 백엔드입니다. 각각 보안을 보장하기 위해 프런트엔드 JS는 백엔드 서버와 동일한 도메인 이름을 사용하지 않습니다. 이때 도메인 간 요청 문제 해결을 고려해야 합니다. 일반적인 솔루션에는 JSONP 사용, 백엔드에 헤더 추가 등이 포함됩니다.

2. CSRF 공격: ajax 비동기 요청은 CSRF(교차 사이트 요청 위조) 보안 문제로 이어질 수 있으므로 tp5는 CSRF 공격을 방지하기 위해 자체 방법을 사용했습니다. 개발 중에 thinkconfig.php 파일에서 관련 매개변수를 수정할 수 있습니다.

3. 프론트엔드 및 백엔드 상호작용 검증: 시스템 보안을 보장하기 위해 프론트엔드 및 백엔드 데이터 상호작용 프로세스 중에 검증이 필요합니다. 관련 작업에는 tp5 Validator 클래스를 사용할 수 있습니다. .

4. JSON 데이터 처리: Ajax 비동기 요청 중에 JSON 형식 데이터를 처리해야 하기 때문에 프런트엔드 JS는 Json.stringify, JSON.parse 및 기타 메서드를 사용하여 관련 작업을 수행하는 경우가 많습니다.

간단히 말하면 JS와 tp5 간의 데이터 상호작용은 ajax의 비동기 통신 방식을 기반으로 합니다. JS와 tp5의 커뮤니케이션 방법을 이해하고 해당 도구와 방법을 익히면 웹사이트 개발을 보다 효율적으로 완료할 수 있습니다. 동시에 개발 과정에서 몇 가지 보안 및 검증 문제도 고려해야 합니다. 이 글이 독자들에게 도움이 되기를 바랍니다.

위 내용은 js가 thinkphp5 데이터와 상호작용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!