Javascript를 사용하여 GET/POST 요청을 보내는 방법은 무엇입니까? (자세한 예시)

이 글에서는 Javascript를 사용하여 GET/POST 요청을 보내는 방법에 대한 관련 지식을 제공합니다. 양식 제출만 사용하는 경우 배경에서는 JavaScript를 사용하여 제출하는 방법을 살펴보겠습니다. 모두가 도움이 될 것입니다.

JQuery 기반 GET/POST 데이터 제출 방법

Javascript를 처음 접하는 분들이라면 저처럼 JQuery에 대해 완전히 불명확할 수 있으니 적절하게 대중화해야 합니다. JQuery는 빠르고 간결한 JavaScript 프레임워크입니다. 이는 JavaScript의 후속 제품입니다. Prototype 이후의 또 다른 훌륭한 JavaScript 코드 라이브러리(또는 JavaScript 프레임워크)입니다. JQuery의 설계 목적은 "적게 작성하고 더 많이 수행"입니다. 이는 더 적은 코드를 작성하고 더 많은 작업을 수행한다는 의미입니다.

일반적으로 사용되는 기능 코드를 JavaScript로 캡슐화하고 간단한 JavaScript 디자인 패턴을 제공하며 HTML 문서 작업, 이벤트 처리, 애니메이션 디자인 및 Ajax 상호 작용을 최적화합니다. JQuery의 핵심 기능은 다음과 같이 요약할 수 있습니다. 고유한 체인 구문과 짧고 명확한 다기능 인터페이스가 있으며 효율적이고 유연한 CSS 선택기가 있으며 CSS 선택기를 확장할 수 있으며 편리한 플러그인이 있습니다. 확장 메커니즘과 풍부한 플러그인. jQuery는 IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+ 등과 같은 다양한 주류 브라우저와 호환됩니다.

JQuery 공식 홈페이지 주소를 클릭하시면 방문하실 수 있습니다. 공식 버전에 따르면 최신 버전은 v3.2.1에 이르렀으므로 더 많은 기능을 얻으려면 공식 웹 사이트에서 최신 JQuery를 다운로드하는 것이 좋습니다.

JQuery는 매우 강력하지만 현재 기능을 구현하는 데 필요한 것은 두 가지 간단한 API뿐입니다. 클릭하면 전체 API 문서를 볼 수 있습니다. 또한 runnoob.com에서 Javascript에 대한 학습 자료도 있습니다.

$.get(url, data, callback)

Parameters	Description
url	필수, 요청해야 하는 URL을 지정
data	선택 사항, 전송되도록 지정 요청과 함께 서버에 보내는 데이터 형식은 json
callback	옵션, 반환 함수, 요청이 성공할 때 실행되는 함수

$.post(url, data, callback)

parameters	Description
url	필수, 요청해야 하는 URL을 지정합니다.
data	선택 사항, 요청과 함께 서버에 보낼 데이터를 지정합니다. 형식은 다음과 같습니다. json
callback	ional, Return the function, 요청이 성공했을 때 실행되는 함수

사용방법은 이렇습니다. 먼저 JQuery를 호출해야 하는 페이지에서 스크립트 태그를 사용하여 Jquery 파일을 가져옵니다. 예:

	<script src="static/js/jquery-3.2.1.min.js"></script>

그런 다음 웹 페이지의 빈 공간을 사용하여 전달해야 하는 메서드와 매개 변수를 선언하고 다음을 수행할 수 있습니다.

	<script>
		function doPost(url)
		{
			var val1 = document.getElementsByName("key1").value;
			var val2 = document.getElementsByName("key2").value;

			$.post(url, {'key1':val1, 'key2':val2});
		}
	</script>

그런 다음 onclick을 추가합니다. 입력/버튼 라벨 또는 데이터를 보내야 하는 위치에 속성을 지정하세요. 예:

	...
	<input type="button" value="submit" onclick="doPost(&#39;/&#39;)" />
	...

이렇게 하면 JQuery를 사용하여 데이터를 보낼 수 있습니다.

또 다른 방법은 양식을 작성하여 제출하는 것입니다.

Javascript/form을 사용하여 GET/POST 데이터 제출 방법 제출

/*
* @url: url link
* @action: "get", "post"
* @json: {'key1':'value2', 'key2':'value2'} 
*/
function doFormRequest(url, action, json)
{
    var form = document.createElement("form");
    form.action = url;
    form.method = action;

    // append input attribute and valus
    for (var key in json)
    {
        if (json.hasOwnProperty(key))
        {
            var val = json[key];
            input = document.createElement("input");
            input.type = "hidden";
            input.name = key;
            input.value = val;

            // append key-value to form
            form.appendChild(input)
        }
    }

    // send post request
    document.body.appendChild(form);
    form.submit();

    // remove form from document
    document.body.removeChild(form);
}

호출 방법은 매우 간단합니다. 이 코드 블록을 HTML 문서의 스크립트 태그에 복사한 다음 직접 사용할 수 있습니다. GET을 선택하세요. / POST 방법은 필요에 따라 다릅니다.
사용하면서 그 차이를 천천히 이해해야 합니다.

【관련 권장 사항: javascript 학습 튜토리얼】

위 내용은 Javascript를 사용하여 GET/POST 요청을 보내는 방법은 무엇입니까? (자세한 예시)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!