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

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

php中世界最好的语言
풀어 주다: 2018-03-09 11:40:11
원래의
1512명이 탐색했습니다.

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

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 할당

최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿