본문으로 바로가기

ajax 호출 예제

category [ Web 관련 ]/jQuery 2020. 2. 29. 06:07
$.ajax({
    url:'/study/tmp/test.php', //request 보낼 서버의 경로
    type:'post', // 메소드(get, post, put 등)
    dataType: "jsonp",
    jsonpCallback: "myCallback",
    async: false, //동기: false, 비동기(기본값): ture
    data:{'id':'admin'}, //보낼 데이터,
	timeout: 2*60*60*1000, //2 hours,
    success: function(data) {
        //서버로부터 정상적으로 응답이 왔을 때 실행
    },
    error: function(err) {
        //서버로부터 응답이 정상적으로 처리되지 못햇을 때 실행
    }
});

 $.ajax({

     url : "호출주소", // 자신의 도메인 파일 호출 할 것 (cross domain 기본지원 안함 - " cross-domain 호출하기 편 " 볼것)
     type : "GET" , // GET or POST
     async : true , // 기본 비동기(true) 동기로 할꺼면 false
     cache : true , // 기본 true (304) false(200)

     
     //var post_date = new Object();
     //post_date['api_key'] = api_key;
     //post_date['landing_key'] = landing_key;
     //data: post_date ,

     data: "데이터" , // 전송할 데이터
                      // $('폼아이디').serialize(); - 폼통째로 전달 시리얼라이징
                      // name=데이터&tel=데이터 - 쿼리스트링 방식
                      // data : {'name':'test'} , - json 타입( 바깥 따옴표없다. 안에 따옴표 필수)


     dataType : // 데이터 타입(응답결과시) xml , html , text , json , jsonp , script ,text
     timeout : 1000 , // 1초 - 서버응답대기시간 설정 (millisecond) 
 
     contentType : // 응답되어 받을 문서의 Type 설정 
                              (기본 : application/x-wwwform-urlencoded;charset=UTF-8)
 
     beforeSend : function() { } ,// 전송전 호출할 함수
     complete :  function(jqXHR) { } , // 완료수 callback (complete or always)
     success :  function(jqXHR) { } , // 성공 후 callback (success or done)
                                                          // jqXHR 안에 결과로온 데이터가 문자열로 들어있음 
     error :  function(jqXHR) { } , // 오류발생시 callback(error or fail ) 

 });

 

CORS 오류 해결

서버측 해더에 아래 항목 추가

header('Access-Control-Allow-Origin: *'); //추가
header('Access-Control-Max-Age: 86400');
header('Access-Control-Allow-Headers: x-requested-with');
header('Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS');
header('Content-Type: text/html; charset=UTF-8');

 

function submit(){
    var formData = new FormData($("form[name='frm']")[0]);

    //객체존재
    alert(formData.has('name'));

    //값
    alert(formData.get('name'));
}

https://inpa.tistory.com/entry/JS-%F0%9F%93%9A-FormData-%EC%A0%95%EB%A6%AC-fetch-api

 

[JS] 📚 FormData 정리 (+ fetch api)

FormData FormData란 ajax로 form data 전송을 가능하게 해주는 객체입니다. 즉, HTML5의 태그를 대신 할 수 있는 객체 입니다. var formData = new FormData(); var formData = new FormData(document.getElemen..

inpa.tistory.com