Ajax 프론트 엔 드 와 백 스테이지 상호작용

전단 백 엔 드 의 상호작용 은 비교적 정상 적 인 일이 다.예 를 들 어 로그 인 같은 기능:

전체적인 사고방식 과 논 리 는 다음 과 같다. 나 는 사용자 이름과 비밀 번 호 를 가 져 와 서 사용자 이름과 비밀 번 호 를 하나의 대상 으로 조합 하고 백 엔 드 서버 백 엔 드 서버 에 전달 하면 되 돌아 오 는 데 이 터 를 프론트 엔 드 에 일치 시 켜 야 한다. 프론트 엔 드 는 되 돌아 오 는 데이터 에 따라 성공 적 으로 로그 인 했 는 지 판단 한다.다음은 ajax 를 통 해 이 과정 을 실현 합 니 다.

url ： 로그 인 기능 에 접근 할 인터페이스 method: 서버 에 데이터 (POST) 를 보 내야 하 는 지, 아니면 서버 에서 데이터 (GET) data 를 가 져 와 야 하 는 지 를 나타 낸다. 프론트 엔 드 가 백 엔 드 에 전달 해 야 할 데이터 대상 success: 프론트 엔 드 가 백 엔 드 에 요청 을 보 낼 때 이 함 수 를 호출 하고 서버 가 돌아 온 데 이 터 를 보 여 줍 니 다. 돌아 온 데이터 에 따라 프론트 페이지 의 조작 error: 전단 에서 백 엔 드 로 요청 하 는 데 실 패 했 을 때 이 함 수 를 호출 합 니 다. 예 를 들 어 네트워크 연결 실패 다음은 약자 입 니 다.

$.ajax({
                url: "http://182.92.161.230:3000/session/login",
                method:'POST',
                data: {},
                success: function (data) {
                },
                error: function () {
                }
            });

다음은 ajax 사용 인 스 턴 스

$.ajax({
                url: "http://182.92.161.230:3000/session/login",
                method:'POST',
                data: {"email":$("#email").val(),"password":$("#password").val()},
                success: function (data) {
                    if(data.errcode==40002)
                    {
                        $("#email-or-password-error").text("       ");
                        setTimeout(dismiss_error_info(),6000);
                    }
                    if(data.errcode === 0)
                    {
                        localStorage.setItem("data",JSON.stringify(data.data));
                        window.location.href = "http://182.92.161.230/";
                    }
                },
                error: function () {
                }
            });

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

원생 Ajax와 jQuery Ajax의 차이점 예시 분석

선언: 이번에 소개한 것은 aax와 백그라운드를 이용하여 데이터 교환을 하는 작은 예이기 때문에 demo는 서버를 통해 열어야 합니다.서버 환경은 구축하기 매우 좋다. 인터넷에서wamp나xampp를 다운로드하여 한 ...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다