jquery가 Ajax 요청을 구현하는 방법

Ajax 요청을 구현하기 위한 jquery 방법: 1. "$.ajax()" 방법; 2. "$.post()" 방법, 코드는 "$.post(url, data, func, dataType);" ; 3 , "$.get()" 메소드, 코드는 "$.get(url, data, func, dataType);" 4. "$.getJSON()" 메소드 등

이 튜토리얼의 운영 체제: Windows 10 시스템, jQuery 버전 3.6.0, Dell G3 컴퓨터.

jquery는 Ajax 요청을 구현합니다

Ajax는 전체 페이지를 새로 고치지 않고 브라우저와 서버 간에 통신하는 데 사용됩니다. 서버는 더 이상 전체 페이지를 반환하지 않고 데이터의 일부를 반환하며 다음을 통해 노드를 업데이트합니다. JavaScript의 DOM 작업. 데이터 전송 형식에는 xml, json 및 기타 형식이 포함되지만 가장 일반적으로 사용되는 형식은 json 형식입니다.
JavaScript 객체 XMLHttpRequest를 사용하여 네이티브 Ajax를 구현할 수 있지만 이 방법은 더 복잡하고 작성하기 어렵습니다. jQuery는 Ajax를 더 쉽게 시작할 수 있도록 Ajax를 구현하는 과정을 간략하게 소개합니다.

1. 태그에 jquery.js 파일을 소개합니다. 일반적인 jQuery Ajax 방식

(1) $.ajax()

①url: 링크 주소, 문자열 표현

②data: (선택) 서버로 보낼 데이터(GET, POST 모두)는 자동으로 변환됩니다. 키/값 쌍의 형태로 표현된 요청 문자열 형식은 요청 URL에 QueryString으로 추가됩니다. 형식은 {A: '...', B: '...'} ③type: "POST " 또는 "GET" , 요청 유형 ④timeout: 요청 시간 제한, 단위는 밀리초, 숫자 값
⑤cache: 요청 결과를 캐시할지 여부, bool은
을 의미합니다. ⑥contentType: 콘텐츠 유형, 기본값은 "application/x-www-form- urlencoded"
7dataType: 서버 응답 문자열로 표현되는 데이터 유형, json으로 채워지면 콜백 함수에서 데이터를 json으로 역직렬화할 필요가 없습니다
⑧success: 요청이 완료된 후 서버에서 다시 호출하는 함수 성공적인
⑩error: 요청이 실패한 후 서버에서 다시 호출되는 함수
⑩complete: 요청이 성공한 후 호출되는 함수, 요청의 성공 여부에 관계없이 성공 및 오류 함수가 설정된 경우 이 함수가 호출됩니다. 함수는 그 후에 호출됩니다
⑪async: 비동기적으로 처리할지 여부, bool은 기본값이 true입니다. 이 값을 false로 설정하면 JS는 아래쪽으로 실행되지 않지만 서버가 데이터를 반환하고 해당 콜백을 완료할 때까지 기다립니다. 하향 실행 전 함수
⑫username: 접속 인증 요청에 포함된 사용자 이름, 문자열
로 표시 ⑬password: 인증 요청에 포함된 비밀번호, 문자열 표현

 <script src="https://code.jquery.com/jquery-3.6.1.js"></script>

 <script type="text/javascript">
        function login1(){
            $.ajax({
                //${pageContext.request.contextPath}用于取后端方法的绝对路径的项目名
                url: "${pageContext.request.contextPath}/user/returnJson",
                type: "GET",
                data:'{name: 'James'}', //必须是字符串格式
                contentType:"application/json", //指定内容格式
                dataType:json,
                success: function(data) {  //括号里的data是服务器返回的数据
                    console.log(data);
                    document.getElementById("myDiv").innerText=data["name"];
                }
            });
        }
    </script>

(2) $.post()

Ajax 요청을 실행하고 서버에서 데이터를 로드하려면 POST 메서드를 사용하세요. 형식: $.post(url, data, func, dataType); 선택 매개변수:

①url: 링크 주소, 문자열 표현

②data: 서버에 전송해야 하는 데이터 형식으로, {A: '.. .', B : '...'}
③func: 요청이 성공한 후 서버가 다시 호출하는 함수입니다. 함수(data, status, xhr), 여기서 data는 서버가 반환한 데이터, status는 응답입니다. status, xhr은 XMLHttpRequest 객체입니다. 개인적으로 data 매개변수에 주목합니다.
④dataType: 서버가 반환하는 데이터 형식

<script>
    $('#btn1').click(function () {
        $.ajax({
            type:"post",	//提交方式
            url:'${pageContext.request.contextPath}/JSONServlet',
            data:{
                bookname:  $("#bookname").val()//val() 方法返回或设置被选元素的值。
            },
            dataType: "json",   	//返回数据的格式
            success:function (responseData) {
                var html = "";
                $('#dataTable tr:not(:first)').remove(); //删除第一行之外的所有行
                // $('#dataTable > tbody > tr').remove();   // 删除所有行，表头会被删除
                console.log(responseData);
                for (var i = 0; i < responseData.length; i++) {
                    html += &#39;<tr>';
                    html += '<td>'+responseData[i].bookid+'</td>'+'<td>'+responseData[i].bookname+'</td>'+'<td>'+responseData[i].price+'</td>'
                    html += '</tr>';
                }
                $('#dataTable').append(html);
            },
        });
    });
</script>

(3) $.get()

GET 메서드 사용 Ajax 요청을 실행하고 서버에서 데이터를 로드합니다. Form: $.get(url, data, func, dataType);

<script type="text/javascript">
        function login2(){
            $.post(
                "${pageContext.request.contextPath}/user/returnJson",
                 '{name: 'James'}',
                  "application/json",
                 function(data) {
                    console.log(data);
                    document.getElementById("myDiv").innerText=data["name"];
                }
            );
        }
    </script>

(4)$.getJSON()

Form: $.getJSON(url, data, func); GET 메서드를 사용하여 실행 Ajax 서버에서 JSON 형식 데이터를 로드하도록 요청합니다.

<script type="text/javascript">
        function login3(){
            $.get(
                "${pageContext.request.contextPath}/user/returnJson",
                function(data) {
                    console.log(data);
                    document.getElementById("myDiv").innerText=data["name"];
                }
            );
        }
    </script>

참고: 서버에서 반환하는 데이터 형식은 json으로 결정되므로 이 메서드에서는 dataType을 지정할 필요가 없습니다.

(5)$.load()

서버에서 직접 로드한 데이터를 지정된 DOM의 노드에 삽입합니다. 형식: $.load(url, data, func); 데이터가 있으면 POST 메서드를 사용하여 요청을 보내고, 없으면 GET 메서드를 사용하여 요청을 보냅니다.

아아아아

위 내용은 jquery가 Ajax 요청을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!