본문 바로가기

CLASS/AJAX5

#2-1 / id 중복체크 연습용(ajax) - POST Ajax Get : json 파일을 로드하기 위해but 중복체크는 값을 보내야 하므로 ( Ajax jsp -> do 로 ) => Post 통신 사용( 보내고 받는게 없으면 .do파일은 error뜨는게 맞음 ! )⚡ ajax POST 통신 연습용 : 문자열을 return 시켜서 사용함- jsp아이디 :  - jq (js는 하단에 있음)$(function(){ $("#btn").click(function(){ $.ajax({ url : "./jsp1ok.do", cache : false, type : "post", //pot 전송(data type,data,contentType 필요) //json 배열을 리턴받을 경우 : do 파일이라도 json type으로 받아야함 //(걍 문자열만.. 2024. 6. 24.
#1-4 / js, jquery - 외부 data load (CORS 해결) ❌❌  CORS 에러 ❌ ❌ : 도메인(ip)이 서로 다를경우 Access 오류로 인하여 데이터를 로드하지 못하는 상황 localhost일때는 문제발생X해결 : 1. json에서 ajax로 바로 로드가 안됨(CORS) , JSON -> JSP로 변환 후 외부로 송출2. script 통신(script 파일로 CORS JSON로드방식) - ajax안쓰고 jsp파일에 fileReader로 outprint 해주기=> 둘다 backend(상대방)에서 작업해줘야함 ⚡ 1. JSON -> JSP로 변환 후 외부로 송출 json파일을 바로 핸들링하기 어려우므로 jsp파일을 load후 핸들링- 내가 로드할 html파일 - 상대방(backend) 에서 만든 jsp파일trimDirectiveWhitespaces="true".. 2024. 6. 20.
#1-3 / 🌺 ajax(jquery) 🔽 이거갖구 놀거임=> product.json의 대표key : flat_product       => 나중에 mysql의 table명이 대표key가 됨 ,  mysql의 colomn명이 일반 key가 됨 ⚡ ajax(jquery) 기본=> javascript에 반해 parse를 따로 작성하지 않아도 됨!🔽반복문(jquery - each문) 이용한 html 출력//통신이 끝난 후 얘가 실행되어야 함$.fn.htmls = function(){ //jquery each : 2개인자 , js foreach : 3개인자 $.each($data["flat_product"],function($a,$b){ //$a : index번호 / $b : 자기자신 $("#box").app.. 2024. 6. 20.
#1-2 / ajax + json(key가 있는 배열) => 5초에 한번씩 실행 json의 [ ] 안에 { } 로 들어갈 시 key배열 ! => 백엔드가 가장 많이 만드는 형태key배열은 { }에 넣을것!! 나중에 mysql의 coloumn명이 key가 됩니다대표키는 table명[ {"seq": 1,"product":"모니터","price":195000}, {"seq": 3,"product":"냉장고","price":295000}, {"seq": 4,"product":"에어컨","price":395000}, {"seq": 9,"product":"세탁기","price":495000}]  👀 변수 형태의 function => 변수 형태의 function이 먼저 읽힘//일반 functionfunction aaa(){ alert("function")}//변수 형.. 2024. 6. 20.
#1-1 / 🌺 ajax(javascript) 기본 구조 1. javascript ajax2. jquery  ajax3. es ajax4. react ajax=> 다 다름 => 다알아야함 ⚡ json 구조원래는 database + java 로 만들어야함 배열 => [ ] (key 없는 배열)  or  { } (key배열일경우)json파일 내 주석사용  Xdatafile 종류 : xml,json(api서버가 없을 때) / jsp,do (api서버가 있을 때 )[ ["hong","kim","park"], ["22","32","42"]]  ⚡ ajax 기본 구조 : ajax는 비동기 통신전체 페이지를 새로 고치지 않고도 페이지의 일부만을 위한 데이터를 로드하는 기법 JavaScript를 사용한 비동기 통신, 클라이언트와 서버간에 XML 데이터를 주고받는 기술이다.즉.. 2024. 6. 20.