프런트엔드 및 백엔드 데이터 상호작용 방법 요약_기본 지식

이 글은 프론트엔드와 백엔드 공동 개발 경험이 거의 없는 초보자에게 적합합니다.

HTML 할당

Element의 값이나 데이터명으로 출력

<input type="hidden" value="<&#63;php echo $user_avatar;&#63;>" />
<div data-value="<&#63;php echo $user_avatar;&#63;>"></div>

렌더링 결과

<input type="hidden" value="https://avatars1.githubusercontent.com/u/3949015&#63;v=3&s=40" />
<div data-avatar="https://avatars1.githubusercontent.com/u/3949015&#63;v=3&s=40"></div>

JS를 사용하여

가져오기

$('input').val();
// http://jquery.bootcss.com/jQuery.data/
$('div').data('avatar');

장점:

전역 변수를 차지하지 않으며 JS에서 자유롭게 얻을 수 있습니다.

사용 제안:

간단한 데이터를 전달하는 데 적합하며, 여러 개의 단순 데이터와 요소 간의 관계를 바인딩하는 데에도 매우 적합합니다.

<ul>
<li>nimojs <span data-userid="1" >删除</span></li>
<li>nimo22 <span data-userid="2" >删除</span></li>
<li>nimo33 <span data-userid="3" >删除</span></li>
<li>nimo44 <span data-userid="4" >删除</span></li>
<li>nimo55 <span data-userid="5" >删除</span></li>
</ul>
<script>
$('span').on('click',function(){
  $.post('/ajax/remove/',$(this).data('userid'),function(data){
    // ...
  })
})
</script>

JS 과제

3f1c4e4b6b16bbbd69b2ee476dc4f83a의 JavaScript 변수 선언에 데이터를 채웁니다.

<script>
var user_avatar = "<&#63;php echo $user_avatar;&#63;>";
// 渲染结果
// var user_avatar = "https://avatars1.githubusercontent.com/u/3949015&#63;v=3&s=40";
</script>

또는 Smarty 백엔드 템플릿 엔진을 사용하세요.

6919634607f14bdbe1a4299125db9861
var user_avatar = "{$user_avatar}";

장점:
데이터 전달은 매우 편리합니다. 프런트 엔드에서는 user_avatar 변수를 직접 호출하여 데이터를 사용합니다.

단점:

문자열 데이터를 전송하려면 전역 변수 user_avatar를 차지하게 됩니다. 전송할 데이터가 많으면 전역 변수도 많이 차지하게 됩니다.
반환된 데이터에 줄바꿈이 포함되어 있으면 JS에서 오류를 보고하게 됩니다.

// 渲染结果有换行符
var user_id = "https://avatars1.githubusercontent.com/u/3949015?v=3&s=40";
// Uncaught SyntaxError: Unexpected token ILLEGAL

최적화:

백엔드에서 반환된 모든 콘텐츠를 특정 변수가 가리키는 것을 통해 저장할 수 있어 전역 변수의 사용을 최소화할 수 있습니다. 예:

// PHP 代码
var SERVER_DATA = {
  username: {$username},
  userid: {$userid},
  title: {$title}
}
// 渲染结果
var SERVER_DATA = {
  username: "NimoChu",
  userid: 1,
  title: 'F2E'
}

사용 제안:

가능한 한 빨리 데이터를 JS로 전송해야 하고 데이터가 안정적이라고 확신할 때 이 방법을 사용하세요. 데이터 형식이 복잡한 경우 스크립트를 사용하여 JSON을 채우거나 AJAX를 사용하여 JSON을 얻는 것이 좋습니다.

JSON을 채우는 스크립트
JSON이란 무엇입니까?

3f1c4e4b6b16bbbd69b2ee476dc4f83a 태그에 JSON 데이터를 채우면 프런트 엔드가 DOM을 통해 JSON 문자열을 얻어 객체로 파싱합니다.

<script type="text/template" id="data">{"username":"nimojs","userid":1}</script>
<script>
var data = JSON.parse($('#data').html());
//{username:"nimojs",userid:1}
</script>

장점:

페이지가 로드된 후에 데이터를 얻을 수 있습니다. 전역 변수를 차지하지 않으며 대량의 데이터 컬렉션을 전달할 수 있습니다.

단점:

특히 데이터 양이 많은 경우 페이지의 초기 로딩이 느려집니다. 속도 저하의 원인은 파일 크기 때문일 뿐만 아니라 서버가 데이터를 쿼리하고 컬렉션을 반환하는 데 시간이 걸리기 때문에 AJAX를 사용하여 온디맨드 로드 및 로드 대기를 완료할 수 있습니다.

사용 제안:

DOM이 로드될 때 필요한 대규모 데이터 컬렉션을 전달하는 데 적합합니다. 예를 들어 프런트 엔드는 페이지 렌더링을 제어하고, 백엔드는 JSON 데이터 소스를 3f1c4e4b6b16bbbd69b2ee476dc4f83a에 채우며, 프런트 엔드는 JavaScript 템플릿 엔진을 사용하여 페이지를 렌더링합니다.

AJAX JSON 가져오기

AJAX를 사용하여 JSON 데이터 가져오기

<span id="showdata">查看资料</span>
<div style="display:none;" id="box">
  <h2>用户信息</h2>
  <p id="info"><img src="loading.gif" /></p>
</div>
$('#showdata').on('click',function(){
  $('#box').show();
  $.getJSON('/ajax/userdata/',function(oData){
    // oData = {"username":"nimojs","userid":1}
    $('#info').html('用户名：' + oData.username + '<br>用户ID：' + oData.userid);
  })
})

AJAX를 통해 사용자 정보를 얻는 예입니다. 진행과정은 다음과 같습니다.

페이지에는 시청정보만 표시됩니다
사용자가 정보를 보기 위해 클릭
사용자 정보 표시 및 이미지 로딩
사용자 정보를 얻기 위해 서버에 AJAX 요청을 보냅니다.
서버는 JSON 문자열을 반환하고 $.getJSON은 반환된 JSON 문자열을 자동으로 객체
로 변환합니다. 081157ee46b27f016eb1f52f4ee681ce

에 내용을 입력하세요.

장점:

전역 변수 및 DOM 노드를 점유하지 않으며, 데이터 획득을 위한 트리거 조건(페이지가 로드될 때, 사용자가 정보를 보기 위해 클릭할 때, 사용자가 버튼을 클릭할 때)을 자유롭게 제어할 수 있습니다. 데이터 가져오기를 시작할 때 로딩 이미지 자리 표시자를 사용하여 사용자에게 데이터를 읽고 있다는 메시지를 표시할 수 있습니다. 페이지의 모든 데이터를 로드하여 페이지 로드 속도가 느려지는 것을 방지합니다.

단점:

추가 HTTP 요청이 생성됩니다. DOM이 로드된 후 바로 얻을 수는 없습니다. 요청을 보내고 응답을 받아야 합니다.

사용 제안:

주요 정보가 아닌 정보 로드, 트리거 조건 설정(사용자가 정보를 보기 위해 클릭하는 경우), 친숙한 데이터 읽기 대기 프롬프트 제공에 적합합니다.

WebSocket은 실시간으로 데이터를 전송합니다
AJAX 요청과 응답을 서버에 문자 메시지를 보내고 서버가 문자 메시지에 대한 응답을 기다리는 것과 비교한다면 WebSocket은 서버에 전화를 거는 것과 같습니다.

여기에서는 WebSocket에 대해 많이 소개하지 않겠습니다. 참고 자료가 첨부되어 있습니다.

위키:WebSocket
HTML5 WebSocket을 사용하여 실시간 웹 애플리케이션 구축
Ajax 대 WebSocket

요약
모든 상황에는 적합한 방법이 있으며 이를 수행하는 절대적으로 올바른 방법은 없습니다. 실제 상황에 따라 데이터 수집 방법을 유연하게 선택하십시오.

위 내용은 이 글의 전체 내용입니다. 모두 마음에 드셨으면 좋겠습니다.