Ajax 백엔드를 작성하는 방법은 무엇입니까? 프런트엔드 및 백엔드 상호 작용을 구현하는 방법(코드 예)

다음 글에서는 Ajax 백엔드 작성 방법을 소개하겠습니다. 프론트엔드와 백엔드 상호 작용을 달성하는 방법에는 특정 참조 가치가 있습니다. 도움이 필요한 친구가 이를 참조할 수 있기를 바랍니다.

머리말

프런트엔드와 백엔드 연결이란 무엇인가요? 이것을 이렇게 부르는 이유는 제가 초보 단계에서 프론트엔드 개발을 하면서 겪은 문제를 설명할 수 있는 다른 더 좋은 이름이 정말 생각나지 않기 때문입니다.

1. 프론트엔드는 좋은 웹사이트 인터페이스와 사용자 상호작용 디자인일 뿐만 아니라 백엔드와의 좋은 "커뮤니케이션"이기도 한다는 것을 우리는 모두 알고 있습니다.

그렇게 말하는데 백엔드와 프론트엔드가 정확히 무엇인가요? 늘 듣는 얘기인데 어떻게 연락해야 하나요?

2. CSS 기술이 능숙해지면 더 이상 모방 웹 사이트를 구현하는 데 만족하지 않고 진정으로 기업 발전을 이루고 싶거나 자체 애플리케이션을 개발하거나 작은 프로젝트를 하고 싶습니다. 인터뷰 도중.

Question

그럼 백엔드는 무엇인가요?

저는 백엔드 개발에 종사하지 않아서 더 말씀드리고 싶지 않습니다.

그러나 프론트엔드 개발자라면 최소한 두 가지를 알아야 합니다. 첫 번째는 웹 인터랙션 디자인을 잘하는 것이고, 두 번째는 백엔드에서 반환되는 데이터를 사용하는 것입니다.

즉, 백엔드 대 프런트엔드는 단순히 데이터를 처리한 다음 프런트엔드에서 사용할 데이터를 프런트엔드로 반환할 수 있다는 의미입니다.

물론 프론트엔드 작업에는 브라우저 호환성, 웹 성능 최적화 등도 포함됩니다.

그렇다면 백엔드에 어떻게 연락하나요?

이번에는 다른 방식으로 표현해야 합니다. 내 (프런트 엔드) 요청을 백엔드로 보냅니다.

제가 아는 한, 백엔드에 요청을 보내는 방법에는 다음과 같은 방법이 있습니다. 물론 Vue.js, React 등 다른 프런트엔드 개발 프레임워크를 사용하는 경우에는 다른 방법도 있을 것입니다. 하지만 나는 전통적인 방법만을 소개합니다.

Method

1.

태그의 action 속성을 사용하여 백엔드에 요청을 보냅니다.

다음과 같이 사용하세요:

<form method="发送请求所使用的方法" action="向后台发送请求的url(访问的地址)">
    <input type="hidden" name="访问后台API需要传的参数" value="参数的值"/>
</form>

이 방법은 간략하게 소개되었을 뿐이며 이 글의 주요 설명은 아닙니다.

그리고 이 방법에는 복잡한 요청 헤더를 설정할 수 없는 등 많은 제한 사항이 있습니다.

2. WebSocket을 사용하여 통신합니다. 이것은 직접 검색하거나 제공된 방법을 사용하여 간단히 API를 호출할 수 있습니다.

3.fetch() 방법, 이 방법도 아주 새로운 방법이지만 현재 호환되는 브라우저가 제한되어 있어 많이 사용되지는 않습니다.

4.ajax(Ajax), 이것은 매우 일반적이고 편리한 방법입니다. ajax를 소개하려면 Baidu에 가면 됩니다. Ajax에는 JavaScript의 ajax와 jQuery의 ajax가 있습니다.

1) 네이티브 js의 ajax는 XMLHttpRequest라는 객체를 기반으로 합니다. 아뇨, Ajax에 관한 모든 것은 이 객체를 기반으로 해야 합니다. Baidu의 기본 Ajax 작성 방법을 사용할 수 있습니다. 작성할 필요가 거의 없기 때문에 이해하기만 하면 됩니다.

2) jQuery는 일반적이고 간단한 여러 메소드를 캡슐화한 JavaScript 캡슐화 라이브러리입니다. 사용이 매우 간단합니다. 모든 프런트엔드 개발자가 마스터해야 하는 기술이라고 생각합니다. 따라서 이 글에서는 주로 jQuery encapsulated ajax를 사용한다.

Example

말을 너무 많이 해서 드디어 본론에 들어왔네요...

요청을 백엔드로 보내고 싶은데 백엔드가 있을텐데 백엔드를 모르겠어요, 그래도 해야 하나요? 백엔드를 배워야 하나요?

다행히 이 세상에는 오픈 플랫폼과 오픈 API라는 마법 같은 것이 있습니다. 더 유명한 것은 Sina Open API, Douban Open API, 주요 지도 오픈 플랫폼 등입니다.

이 개방형 플랫폼은 개방형 API(URL)를 제공하는 백엔드와 동일합니다. 오픈, 말하지 않아도 무슨 뜻인지 아시겠죠.

다음은 코드 조각입니다.

$.ajax({
    type: 'GET',                                                     // 请求的方式
    url: 'https://free-api.heweather.com/s6/weather/now?parameters', // 请求的地址（和风天气开放API）
    data: {                                                          // 请求所需要填的参数
        location: '中山,广东',                                        // 需要查询的城市或地区
        key: '9da*********************95bcb82f'                      // 用户认证key    },
    success: function(data) {                                        // 请求成功后，接收到data
        console.log(data); // 打印获取到的数据
                
        // 对获取到的数据稍作处理
        var basic = data.HeWeather6[0].basic;        var now = data.HeWeather6[0].now;
        console.log(basic);
        console.log(now);

    }
});

브라우저에서 F12를 누르면 콘솔 표시줄에 표시되는 결과가 나타납니다.

이제 프런트엔드와 백엔드를 연결하는 프로세스가 완료되었습니다!

여기서 제가 사용하고 있는 오픈 플랫폼은 날씨 데이터를 제공하는 Heweather(https://www.heweather.com)입니다. 이를 사용하면 자체 날씨 APP를 개발할 수 있습니다.

자, 제 소개는 여기까지입니다! 프론트엔드에 대한 지식은 정말 많습니다. 모두가 주도적으로 배우고 숙달해야 합니다!

요약: 위 내용은 이 글의 전체 내용입니다. 모든 분들의 공부에 도움이 되었으면 좋겠습니다. 더 많은 관련 튜토리얼을 보려면 JavaScript 비디오 튜토리얼, jQuery 비디오 튜토리얼, AJAX 비디오 튜토리얼을 방문하세요!

관련 권장 사항:

php 공공 복지 교육 비디오 튜토리얼

JavaScript 온라인 매뉴얼

AJAX 온라인 매뉴얼

jQuery 온라인 매뉴얼

위 내용은 Ajax 백엔드를 작성하는 방법은 무엇입니까? 프런트엔드 및 백엔드 상호 작용을 구현하는 방법(코드 예)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!