무회blog

js(jQuery) Ajax ,Test_001 하기, (txt 파일 load 해서 읽어 오기) 본문

js/jQuery

js(jQuery) Ajax ,Test_001 하기, (txt 파일 load 해서 읽어 오기)

최무회 2022. 6. 19. 21:28
/**
 * js(jQuery) Ajax Test 하기
 * TODO:
 * , js -> 렌더링 순서 , html -> head -> body , (CSS -> DOM 순서), 외부 링크 CSS 먼저/ Script body 아래 추천
 * , js -> ajax(test)
 * , 참고사이트 : https://www.w3schools.com/jquery/jquery_ajax_load.asp
 */

$(function () {
  /**
   * test load, to
   * responseTxt - 호출성공시 결과 내용 포함  /  contains the resulting content if the call succeeds
   * statusTxt - 상태 포함                   / contains the status of the call
   * xhr - XMLHttpRequest 객체 포함          / contains the XMLHttpRequest object
   */
  //   ----------------------------------------
  $(function () {
    $("button").click(function () {
      $("#div1").load("ddemo_test.txt", function (responseTxt, statusTxt, xhr) {
        console.log("clickButton");
        if (statusTxt == "success")
          alert("External content loaded successfully!");
        if (statusTxt == "error")
          alert("Error: " + xhr.status + ": " + xhr.statusText);
      });
    });

    /** test load method
     * local 테스트 시 에러가 날수 있음 ,
     * chrome 바로가기로 만든 아이콘에서 우클릭 -> 속성 -> 대상 에다가 아래 내용 추가
     *  --disable-web-security --user-data-dir=%LOCALAPPDATA%\Google\chromeTemp -–allow-file-access-from-files
     * 그러면 로컬에서 Security 걸려서 Cors 에러가 날 가능성 제거하여 ajax test 가 가능 함
     *
     */
    //   ----------------------------------------
    // $("button").click(function () {
    //   console.log("clickButton");
    //   //   $("#div1").load("demo_test.txt");
    //   $("#div1").load("demo_test.txt #p1");
    // });
  });
});

demo_test.txt
0.00MB

 

Comments