프런트엔드와 백엔드 데이터가 과학적으로 상호작용하는 방법-JS 튜토리얼-php.cn

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

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();

$(&#39;div&#39;).data(&#39;avatar&#39;);

로그인 후 복사

을 얻습니다. 장점: 전역 변수를 차지하지 않으며 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 할당
은