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

집

웹 프론트엔드

JS 튜토리얼

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 04:05 PM

프런트엔드 및 백엔드 데이터 상호 작용

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

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이란 무엇입니까?

핫 AI 도구

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

뜨거운 주제

Gmail 이메일의 로그인 입구는 어디에 있나요?

7369

자바 튜토리얼

1628

Cakephp 튜토리얼

1355

라라벨 튜토리얼

1266

PHP 튜토리얼

1215

Related knowledge

JavaScript로 문자열 문자를 교체하십시오 Mar 11, 2025 am 12:07 AM

JavaScript 문자열 교체 방법 및 FAQ에 대한 자세한 설명 이 기사는 JavaScript에서 문자열 문자를 대체하는 두 가지 방법 인 내부 JavaScript 코드와 웹 페이지의 내부 HTML을 탐색합니다. JavaScript 코드 내부의 문자열을 교체하십시오 가장 직접적인 방법은 대체 () 메소드를 사용하는 것입니다. str = str.replace ( "find", "replace"); 이 메소드는 첫 번째 일치 만 대체합니다. 모든 경기를 교체하려면 정규 표현식을 사용하고 전역 플래그 g를 추가하십시오. str = str.replace (/fi

사용자 정의 Google 검색 API 설정 자습서 Mar 04, 2025 am 01:06 AM

이 튜토리얼은 사용자 정의 Google 검색 API를 블로그 또는 웹 사이트에 통합하는 방법을 보여 주며 표준 WordPress 테마 검색 기능보다보다 세련된 검색 경험을 제공합니다. 놀랍게도 쉽습니다! 검색을 Y로 제한 할 수 있습니다

8 멋진 jQuery 페이지 레이아웃 플러그인 Mar 06, 2025 am 12:48 AM

손쉬운 웹 페이지 레이아웃에 대한 jQuery 활용 : 8 에센셜 플러그인 jQuery는 웹 페이지 레이아웃을 크게 단순화합니다. 이 기사는 프로세스를 간소화하는 8 개의 강력한 JQuery 플러그인을 강조합니다. 특히 수동 웹 사이트 생성에 유용합니다.

자신의 Ajax 웹 응용 프로그램을 구축하십시오 Mar 09, 2025 am 12:11 AM

그래서 여기 당신은 Ajax라는이 일에 대해 배울 준비가되어 있습니다. 그러나 정확히 무엇입니까? Ajax라는 용어는 역동적이고 대화식 웹 컨텐츠를 만드는 데 사용되는 느슨한 기술 그룹을 나타냅니다. 원래 Jesse J에 의해 만들어진 Ajax라는 용어

' this ' 자바 스크립트로? Mar 04, 2025 am 01:15 AM

핵심 포인트 JavaScript에서는 일반적으로 메소드를 "소유"하는 객체를 말하지만 함수가 호출되는 방식에 따라 다릅니다. 현재 객체가 없으면 글로벌 객체를 나타냅니다. 웹 브라우저에서는 창으로 표시됩니다. 함수를 호출 할 때 이것은 전역 객체를 유지하지만 객체 생성자 또는 그 메소드를 호출 할 때는 객체의 인스턴스를 나타냅니다. call (), apply () 및 bind ()와 같은 메소드를 사용 하여이 컨텍스트를 변경할 수 있습니다. 이 방법은 주어진이 값과 매개 변수를 사용하여 함수를 호출합니다. JavaScript는 훌륭한 프로그래밍 언어입니다. 몇 년 전,이 문장은있었습니다