HTML의 가변 데이터를 플라스크로 전달하십시오

HTML의 가변 데이터를 플라스크로 전달하십시오

웹 개발에서는 프론트 엔드 HTML 페이지의 데이터를 처리를 위해 백엔드 플라스크 애플리케이션으로 전달해야합니다. 이 데이터가 정적 인 경우 Jinja 템플릿에서 직접 URL을 빌드 할 수 있습니다. 그러나 데이터가 동적 인 경우, 예를 들어 JavaScript 변수와 같이 Jinja 및 JavaScript와 함께 구현해야합니다.

질문 : Jinja 템플릿의 JavaScript 변수와 직접 작동하지 않는 이유는 무엇입니까?

Jinja 템플릿 엔진이 서버 측에서 HTML 페이지를 렌더링하면 {{...}}의 컨텐츠를 해당 값으로 대체합니다. Jinja 템플릿에서 JavaScript 변수를 사용하면 '{{url_for ( "move_forward", title = data)}', flask/jinja는 JavaScript와 상호 작용할 수 없기 때문에 데이터가 무엇인지 알지 못합니다. Jinja는 단지 문자열을 교체하려고 시도하며 데이터 변수의 값은 클라이언트의 JavaScript 환경에만 존재합니다.

솔루션 : Jinja 및 JavaScript를 사용하여 URL을 동적으로 구축합니다

이 문제를 해결하기 위해 Jinja를 사용하여 URL의 기본 부분을 생성 한 다음 JavaScript를 사용하여 변수 값을 URL에 추가 할 수 있습니다.

예는 다음과 같습니다.

 <cript>
    var baseurl = '{{url_for ( "move_forward")}';
    var data = "shan";
    window.location.href = baseurl "/"data;
스크립트></cript>

코드 설명 :

1. var baseurl = '{{url_for ( "move_forward")}'; :이 코드 라인은 Jinja의 url_for 함수를 사용하여 Move_forward 경로의 기본 URL을 생성합니다. URL_FOR 함수는 /move_forward와 같은 플라스크 애플리케이션의 라우팅 구성을 기반으로 올바른 URL을 생성합니다. 이 URL은 서버 측에서 생성되며 HTML 페이지에 포함됩니다.
2. var data = "shan"; :이 코드 라인은 JavaScript 변수 데이터를 정의하고 값을 "Shan"에 할당합니다. 이는 사용자 입력 또는 다른 JavaScript 함수에서 얻은 동적으로 생성 된 값일 수 있습니다.
3. window.location.href = baseurl "/"data; :이 코드 라인은 JavaScript를 사용하여 기본 URL과 변수 데이터의 값을 스플릿 한 다음 Window.location.href를 새 URL로 설정합니다. 이로 인해 브라우저가 새 URL로 리디렉션되고 플라스크 경로로 데이터 값을 매개 변수로 전달합니다.

플라스크 백엔드 코드 :

 플라스크 수입 플라스크에서

app = flask (__ name__)

@app.route ( "/move_forward/<title>")
def move_forward (제목) :
    인쇄 (제목)
    return f "수신 된 제목 : {title}"

__name__ == '__main__':
    app.run (debug = true)</title>

코드 설명 :

1. @app.route ( "/move_forward/ :이 코드 라인은 Title이라는 매개 변수를 수용하는 플라스크 경로를 정의합니다.
2. def move_forward (title) : :이 코드 라인은 move_forward 라우팅을 처리하는 함수를 정의합니다. 이 함수는 URL에서 값을 추출한 Title이라는 이름의 매개 변수를 허용합니다.
3. 인쇄 (제목) :이 코드 라인은 플라스크가 수신 한 값을 볼 수 있도록 콘솔에 제목 값을 인쇄합니다.
4. return f "수신 제목 : {title}" :이 코드 줄은 수신 된 제목이 포함 된 문자열을 반환하고 브라우저에 표시합니다.

참고 :

• 플라스크 경로의 매개 변수 이름이 JavaScript 코드에 전달 된 매개 변수 이름과 일치하는지 확인하십시오.
• 여러 변수를 전달 해야하는 경우 & 기호를 사용하여 함께 연결하여 BaseUrl "/"Data1 "& Param2 ="Data2를 연결할 수 있습니다.
• 전달 된 데이터의 URL 인코딩을 고려하여 특수 문자를 올바르게 전달할 수 있도록하십시오. JavaScript의 encodeUricomponent () 함수를 사용하여 인코딩 할 수 있습니다.
• 많은 양의 데이터를 전달해야하거나 데이터가 더 복잡한 경우 게시물 요청을 사용하고 요청 본문으로 데이터를 보내는 것을 고려할 수 있습니다.

요약 :

Jinja 템플릿과 JavaScript를 결합하면 HTML 페이지의 가변 데이터를 플라스크 백엔드로 유연하게 전달할 수 있습니다. 이 접근 방식을 사용하면 URL을 동적으로 구축하고 변수 값을 플라스크 경로로 매개 변수로 전달할 수 있으므로보다 복잡한 웹 애플리케이션 기능이 가능합니다. Jinja는 서버 측에서 실행되고 JavaScript는 클라이언트 측에서 실행 되므로이 두 가지를 올바르게 사용하는 데 필수적이라는 것을 이해하십시오.

위 내용은 HTML의 가변 데이터를 플라스크로 전달하십시오의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!