프런트엔드와 백엔드 데이터가 과학적으로 상호작용하는 방법

이번에는 프런트엔드와 백엔드 데이터를 과학적으로 상호작용하는 방법과 프런트엔드와 백엔드 데이터 상호작용에 대한 주의사항은 무엇인지 알려드리겠습니다. 실제 사례를 살펴보겠습니다.

HTML 할당

JS 할당

스크립트는 JSON을 채웁니다

AJAX는 JSON을 가져옵니다

WebSocket 실시간 데이터 전송

요약

1. HTML 할당은 Element

<div data-value="<?php echo $user_avatar;?>"></div>

렌더링 결과의 값 또는 데이터 이름을 출력합니다.

<div data-avatar="https://avatars1.githubusercontent.com/u/3949015?v=3&s=40"></div>

JS를 사용하여 $('input').val();

$('div').data('avatar');

을 얻습니다. 장점: 전역 변수를 차지하지 않으며 JS에서 자유롭게 얻을 수 있습니다.
사용 제안: 단순 데이터 전달에 적합하며 여러 단순 데이터를 요소에 바인딩하는 데에도 매우 적합합니다.

 <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>
  $(&#39;span&#39;).on(&#39;click&#39;,function(){ 
    $.post(&#39;/ajax/remove/&#39;,$(this).data(&#39;userid&#39;),function(data){ // ... })
  })</script>

2. JS 할당
은 <script>의 <a href="http://www.php.cn/wiki/48.html" target="_blank">JavaScript 변수 선언에 데이터를 채웁니다. </script>

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

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

<script>
  var user_avatar = "{$user_avatar}";</script>

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

문자열 데이터를 전송하려면 전역 변수 user_avatar를 차지하게 됩니다. 전송할 데이터가 많으면 전역 변수를 많이 차지하게 됩니다.

반환된 데이터에 줄 바꿈이 있으면 JS 오류가 발생합니다
// 렌더링 결과에 줄 바꿈 문자가 있습니다. var user_id = "https://avatars1.githubusercontent.com/u/3949015?v=3&s= 40";// Uncaught SyntaxError: 예상치 못한 토큰 ILLEGAL

Optimization: 백엔드에서 반환된 모든 콘텐츠는 가리키는 특정 변수에 저장될 수 있으므로 전역 변수의 사용이 최소화됩니다. 예: // PHP 코드 var SERVER_DATA = { 사용자 이름: {$username}, 사용자 ID: {$userid}, 제목: {$title}} // 렌더링 결과 var SERVER_DATA = { 사용자 이름: "NimoChu", 사용자 ID: 1, 제목 : 'F2E'}

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

3. 스크립트는 JSON을 채웁니다** JSON 구문**은 JSON 데이터를 <script> 태그에 채웁니다. </script>

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

장점: 페이지가 로드된 후에 데이터를 얻을 수 있습니다. 전역 변수를 차지하지 않으며 대량의 데이터 컬렉션을 전달할 수 있습니다.
단점: 특히 데이터 양이 많은 경우 페이지의 초기 로딩이 느려집니다. 속도 저하의 원인은 파일 크기 때문일 뿐만 아니라 서버가 데이터를 쿼리하고 컬렉션을 반환하는 데 시간이 걸리기 때문에 AJAX를 사용하여 온디맨드 로드 및 로드 대기를 완료할 수 있습니다.
사용 제안: DOM이 로드될 때 사용해야 하는 대규모 데이터 컬렉션을 전달하는 데 적합합니다. 예를 들어 프런트 엔드는 페이지 렌더링을 제어하고 백엔드는 JSON 데이터 소스를 <script>에 채우고 프런트 엔드는 JavaScript 템플릿 엔진을 사용하여 페이지를 렌더링합니다. Javascript 템플릿 엔진을 선택하는 방법은 무엇입니까? </script>

4. AJAX가 JSON을 가져옵니다. AJAX를 사용하여 JSON 데이터를 가져옵니다.

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

AJAX를 통해 사용자 정보를 가져오는 예입니다.

페이지에는 보기 정보만 표시됩니다

사용자가 정보를 보기 위해 클릭하면

사용자 정보 표시 및 사진 로딩

사용자 정보를 얻기 위해 서버에 AJAX 요청을 보냅니다

서버가 반환됩니다. JSON 문자열을 사용하면 $.getJSON이 자동으로 JSON 문자열을 객체로 변환

내용을

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

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

사용 제안: 기본이 아닌 정보 로드, 트리거 조건 설정(사용자가 정보를 보기 위해 클릭할 때) 및 친숙한 데이터 읽기 대기 프롬프트 제공에 적합합니다.

5. WebSocket은 실시간으로 데이터를 전송합니다. AJAX 요청과 응답을 서버에 문자 메시지를 보내고 서버가 문자 메시지에 대한 응답을 기다리는 것에 비유하면 WebSocket은 서버에 전화를 거는 것과 같습니다.
WebSocket은 여기에서 자세히 소개되지 않지만 참조 자료가 첨부되어 있습니다.

WebSocket**

HTML5 WebSocket을 사용하여 실시간 웹 애플리케이션 구축**

Ajax vs WebSocket**

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

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

관련 읽기:

html의 박스 모델에 대한 자세한 설명

boottrap-validator 사용에 대한 자세한 설명

sublime으로 html 헤더 코드를 빠르게 만드는 방법

위 내용은 프런트엔드와 백엔드 데이터가 과학적으로 상호작용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!