프런트엔드 및 백엔드 데이터 상호작용 방법 요약

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

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 과제

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

단점:

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

// 渲染结果有换行符
var user_id = "https://avatars1.githubusercontent.com/u/3949015&#63;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이란 무엇입니까?

저자별 최신 기사