> 웹 프론트엔드 > JS 튜토리얼 > jQuery를 사용하여 Ajax 캡슐화를 구현하는 단계 공유

jQuery를 사용하여 Ajax 캡슐화를 구현하는 단계 공유

零到壹度
풀어 주다: 2018-04-09 15:57:10
원래의
1375명이 탐색했습니다.

이 글의 내용은 jQuery를 사용하여 Ajax 캡슐화를 구현하는 단계를 공유하는 것입니다. 특정 참조 값이 있습니다. 필요한 친구는 이를 참조할 수 있습니다.

load 방법

  • load(url,[data ] ,[콜백]). data는 제출된 데이터, callback은 콜백 함수, 콜백 함수는 응답 stutas xhr의 세 가지 매개변수를 전달할 수 있으며, 첫 번째 매개변수는 서버에서 반환된 콘텐츠, 두 번째 매개변수는 응답 상태 성공 또는 오류, 세 번째 매개변수입니다. 기본 js

  • $('#box').load(url)의 XMLHttpRequest 객체입니다. 대상 주소에서 얻은 콘텐츠를 현재 페이지 어딘가에 직접 로드하여 채울 수 있습니다.

전역 메소드 get()

  • $.get(url,[data],[callback],type) 유형은 반환된 콘텐츠의 형식을 나타냅니다. 원본 형식이 설정되지 않으면 강제 변환이 실패할 수 있습니다.

전역 메서드 post()

  • $.post(url,[data],[callback]).

전역 메서드 getJSON()

  • $.getJSON()(url,[data],[callback]).

  • 특정 상황에서 json 파일을 로드하는 데 사용됩니다.

전역 메서드 getSCRIPT()

  • $.getSCRIPT()(url,[data],[callback]).

  • 은 특정 상황에서 js 파일을 로드하는 데 사용됩니다. 일반적으로 사용되지 않습니다.

전역 메서드 ajax()

  • ajax() 메서드만 여러 키-값 쌍을 포함하는 객체인 하나의 매개변수만 전달합니다.

  • 가장 일반적으로 사용되는 형식:

$.ajax({
  url:, //请求的地址
  type:, //请求的方式'GET'或'POST'
  data:{
        },  //提交的信息
  dataType: 'json',//设置返回内容的数据类型
  timeout:  ,//设置超时,请求超过了这个时间值就会结束请求
  global: ,//设置是否触发全局事件,true或false
  error: function(xhr,errorText,errorType){//响应失败时执行的错误处理函数,会传三个参数,xhr对象,错误信息,错误类型
       }
  success:function(response,stutas,xhr){//响应成功后执行的回调函数
     console.log(response);
      },
  beforeSend : function(){//请求开始之前触发该事件},
complete : function(){//请求结束之后触发该事件}
})
로그인 후 복사

Form serialization

  • 일반적인 데이터 제출 방법: 제출된 데이터는 form

  • data:{ user:document.getElementById(‘user’), 
    emall:document.getElementById(‘emall’)//用dom方法或其他方法只要能获取到数据都行 
     }
    로그인 후 복사
  • Form의 사용자 이름과 이메일 주소로 가정합니다. serialization:
    data: $('form').serialize(), //직렬화 후 데이터 키-값 쌍을 문자열 형식으로 얻고 URL이 인코딩됩니다. serialize() 함수의 객체는 전체 양식 또는 양식 요소일 수 있지만 jQuery 객체만 될 수 있습니다.

  • param() 메소드
    $.param() 메소드는 키/값에 따라 배열이나 객체를 직렬화하는 데 사용되는 serialize() 메소드의 핵심입니다.
    객체를 직접 전달하는 첫 번째 제출 방법의 경우 이 기능을 사용하여 객체 전체를 직렬화할 수 있습니다.

data:$ .param({   
  user:document.getElementById('user'),
     emall:document.getElementById('emall')
    } )
로그인 후 복사
  • serializeArray() 메소드
    serializeArray 메소드는 양식의 각 필드를 json 형식의 배열로 직렬화하는 것입니다.

Load request

 jQuery提供两个全局事件。.ajaxStart和.ajaxStop。Ajax请求开始时会触发开始事件,请求结束时会触发结束事件。
로그인 후 복사
$(document).ajaxStart(function(){
     //请求开始时触发的行为
        }).ajaxStop(function(){
     //请求结束时触发的行为})
로그인 후 복사

jQuery xhr object

jqXHR 객체는 jsXHR 객체의 상위 집합인 $.ajax() 메서드에서 반환되는 객체입니다.

var jqXHR = $.ajax(      
      url:, //请求的地址            
      type:, //请求的方式'GET'或'POST'
      data:{
                      },  //提交的信息
             );
로그인 후 복사

jqXHR 개체는 연결 방식으로 쓰기를 지원하는 많은 새로운 속성과 메서드를 제공합니다. 동일한 콜백 함수를 덮어쓰지 않고 여러 번 실행할 수 있습니다.

위 내용은 jQuery를 사용하여 Ajax 캡슐화를 구현하는 단계 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿