728x90

cache

기본값은 true로 dataType이 'script'나 'jsonp'일 때는 기본값이 false다.

false로 설정하면 요청된 페이지가 브라우저에 캐싱되지 않도록 한다. 

그리고 HEAD와 GET요청에만 정확하게 작동한다.

contentType

ajax를 통해서 서버에 데이터를 보낼 때 데이터 유형을 결정한다.

기본값은 'application/x-www-form-urlencoded; charset=UTF-8'이다.

jQuery 1.6부터는 false값을 설정하여 요청 헤더에 콘텐츠 타입을 설정하지 않을 수 있다.

 

processData

기본값은 true로 data속성의 값이 콘텐츠 타입에 맞게 쿼리 문자열로 처리된다.

처리되지 않은 데이터를 보내려면 이 속성값으 false로 바꾸면 된다.

 

이 내용은 ajax의 multipart/form-data로 이미지를 서버로 전송하려고 할 때

500 에러가 발생하면서 해결법을 찾을 때 나온 속성들이다.

해본 결과 cache는 설정 안 해줘도 된다.

function addReview(){
    var formData = new FormData($("#addReview")[0]);
   
    $.ajax({
        url: "addReview.do",
        method: "POST",
        data: formData,
        enctype: 'multipart/form-data',
        processData: false,
        contentType: false,
        success: function(data){
        	myModal.hide();
        },
        error: function(){
        	console.log("error");
        }
    });
}

 

 

더 자세한 내용은 jQuery 공식 사이트를 활용하세요.

https://api.jquery.com/jQuery.Ajax/#jQuery-ajax-settings-settings

 

jQuery.ajax() | jQuery API Documentation

Description: Perform an asynchronous HTTP (Ajax) request. The $.ajax() function underlies all Ajax requests sent by jQuery. It is often unnecessary to directly call this function, as several higher-level alternatives like $.get() and .load() are available

api.jquery.com

 

728x90
저작자표시 비영리

'JavaScript' 카테고리의 다른 글

JS 파일에서 contextpath 사용하기  (0) 2022.08.12
728x90

MyBatis Mapper XML파일

태그

  • 구문 태그 INSERT, UPDATE, DELETE, SELECT
  • sql - 다른 구문에서 재사용하기 위한 조각
  • cache - 해당 네임스페이스를 위한 캐시 설정
  • cache-ref - 다른 네임스페이스의 캐시 설정에 대한 참조
  • resultMap - 데이터베이스 결과 데이터를 객체에 로드하는 방법을 정의하는 엘리먼트
  • selectKey - 구문 태그의 실행 전이나 후에 실행할 구문을 지정한다.
  • => keyProperty 구문의 결과가 세팅될 프로퍼티
  • => order (BEFORE, AFTER)를 세팅할 수 있다. 말 그대로 sql 구문의 이전과 이후

태그의 속성

  • parameterType - SQL 구문에 사용할 파라미터 타입을 지정한다. 
  • => MyBatis의 경우 파라미터를 하나만 받아올 수 있기 때문에 객체로 받아오던지 hashmap을 사용한다.
  • => 객체를 넘길 경우 패키지 경로를 포함한 전체 클래스명이나 별칭을 넘겨야 한다. 
  • => 파라미터 표기법 #{} ex) int midx를 받아 온 경우 #{midx}
  • resultType - SQL 구문 작동 후 DB에서 받아오는 결과 타입
  • => 객체를 넘길 경우 패키지 경로를 포함한 전체 클래스명이나 별칭을 넘겨야 한다.

MyBatis CDATA

sql 구문에서 조건문과 같은 비교 연산자를 사용할지 mybatis에서

이를 문자열로 인식하지 않아 오류가 발생할 수 있다.

때문에 비교 연산자와 같이 문자가 아닌 특수문자를 사용할 때에는

오류를 피하고 정확한 구문을 사용하기 위해 CDATA 안에 쿼리를 작성한다.

 

jQuery serialize 메서드

form 태그에서 name 속성을 가진 태그들의 데이터를 문자열로 반환해준다.

<script>
	function Log(){
    	console.log($("#fm").serialize())
    }
</script<
<form id="fm">
	<input type="text" name="id">
    <input type="text" name="pwd">
    <input type="text" name="name">
    <input type="button" onclick="Log()" value="등록">
</form>

<!-- 출력되는 값 -->
<!-- id=input id에 입력한 값&pwd=input pwd에 입력한 값&name= input name에 입력한 값 -->
728x90
저작자표시 비영리

'노트' 카테고리의 다른 글

TIL 스프링 HTTP 요청, 응답 데이터 처리  (0) 2022.10.09
TIL 스프링의 기본 기능  (1) 2022.10.08
토이 프로젝트 주식 커뮤니티 만들기(9) - google chart 이용 그래프 그리기  (0) 2022.06.17
토이 프로젝트 주식 커뮤니티 만들기(8) - JSP 글쓰기  (0) 2022.06.14
토이 프로젝트 주식 커뮤니티 만들기(7) - JSP 로그인 페이지/ 아이디 찾기/ 비밀번호 찾기  (0) 2022.06.07
728x90

.each() 메서드

  • 매개변수로 입력한 함수를 사용한다.
  • for 반복문처럼 객체나 배열의 요소를 검사한다.
  • 기본 형태
<script>
	$.each(obj,function(index.item){});
    $(selector).each(function(index, item){});
    // index에는 배열의 인덱스가 오고 item에는 해당 인덱스의 값이 담긴다.
</script>
  • 예를 들어 여러개의 h1 태그가 있다면 각각의 값을 확인하고 사용할 수 있다.
<body>
	<h1> content1 </h1>
    <h1> content2 </h1>
    <h1> content3 </h1>
    <h1> content4 </h1>
    <h1> content5 </h1>
    <h1> content6 </h1>

<script>
	$("h1").each(function(idx,item){
    	//h1 각 태그에 적용할 함수 정의
    });
</script>
</body>

 

addClass() / removeClass() 메서드

  • addClass()는 문서 객체에 class 속성을 추가하는 메서드
  • removeClass()는 문서 객체에 class 속성을 제거하는 메서드
  • 예제 
  • class 버튼을 누르면 div1 class를 추가해 css가 적용되고 remove 버튼을 누르면 class가 삭제되어 css적용이 풀린다.
<head>
<style type="text/css">
	.div1 {
		display: inline-block;
		margin: 10px;
		background-color: yellow;
		border:1px solid black;
	}
</style>
</head>
<body>
	<div >div1</div>
	<div >div1</div>
	<button onclick="clickbtn()"> class </button>
	<button onclick="removeBtn()"> remove</button>
	
<script>
	function clickbtn(){
		$("div").addClass("div1");
	} 
	function removeBtn(){
		$("div").removeClass("div1");
	}
</script>
</body>

 

attr() / removeAttr() 메서드

  • 특정 속성의 값을 알아내거나 추가/ 제거할 수 있다.
<body>
	<input type="text" id="text1">

<script>
	//input의 타입의 값을 반환한다.
	$("input").attr("type");
    
    //input의 타입 속성의 값을 password로 변경/추가한다.
    $("input").attr("type","password");
    
    //input 태그에 있는 id 속성을 제거한다.
    $("input").removeAttr("id");
<script>
</body>

 

728x90
저작자표시 비영리

'노트' 카테고리의 다른 글

토이 프로젝트 주식 커뮤니티 만들기(6) - JSP 회원가입 페이지  (0) 2022.06.05
토이 프로젝트 주식 커뮤니티 만들기(5) - 초기화면 생성/JSP 드롭다운 버튼  (0) 2022.06.03
jQuery 필터링 메서드  (1) 2022.05.18
jQuery 개요, 기본 문법  (0) 2022.05.17
5월 6일 JSP  (0) 2022.05.07
728x90

기본 필터링 메서드

기본 필터링 메서드 .filter()의 두 가지 사용방법

<script>
	$(selector).filter(selector);
    //예제
    $("h1").filter(":odd").css("color","red");
    
    $(selector).filter(function(){});
    //예제
    $("div").filter(funtion(index,obj){
    	return index % 2 == 0;
    }).css("color","red");
</script>

필터 선택자 이용

  • 자주 사용하는 것들을 메서드로 제공한다.
  • .eq() - 특정 인덱스에 존재하는 객체 선택
  • .first() - 첫 번째에 위치하는 객체 선택
  • .last() - 마지막에 위치하는 객체 선택

. is() 메서드

  • 매개변수로 선택자를 입력받는다.
  • 선택한 객체가 선택자와 일치하는지 판별해 true/false를 반환한다.

 

728x90
저작자표시 비영리

'노트' 카테고리의 다른 글

토이 프로젝트 주식 커뮤니티 만들기(5) - 초기화면 생성/JSP 드롭다운 버튼  (0) 2022.06.03
jQuery 여러 메서드  (0) 2022.05.19
jQuery 개요, 기본 문법  (0) 2022.05.17
5월 6일 JSP  (0) 2022.05.07
5월 3일 JSP 게시판 페이징 학습  (0) 2022.05.03
728x90

jQuery 개요

  • 오픈소스 라이브러리
  • 복잡한 자바스크립트 문법을 간소화
  • 크로스 브라우징
  • 다양한 오픈소스 라이브러리 사용 가능

 

jQuery 기본 문법

<script>
	$(document).ready(function() {
    
    });
</script>

<!-- 간소화 -->

<script>
	$(function() {
    
    });
</script>
  • 문서가 준비 완료되면 전달된 함수를 실행하라는 의미
  • script를 html의 head안에 넣었을 경우 본문이 출력되기 전에 script가 먼저 실행되기 때문에 사용한다.
  • javascript의 onload와 같다.
  • $ 표시는 jQuery 문자를 간소화 한것

 

기본 선택자

<script>
	$("h1").css("color","red");
</script>
  • 가장 많이 사용하는 형태
  • $ 괄호 안에 들어가는 것은 선택 자이고. 뒤에 오는 것은 메서드이다.
  • h1 태그의 css color style을 red로 바꾼다.
  • 선택자에 쉼표를 사용해 하나 이상의 선택자를 사용할 수 있다.
  • id나 class 태그를 선택할 경우 css태그를 선택하는 것과 같다.
<script>
	$("h1").css("color","red");
    
    $("#id").css("color","red");
    $(".class").css("color","red");
    
</script>

 

자식 선택자/ 후손 선택자

  • 기본 선택자 앞에 붙여 사용하며 기본 선택자의 범위를 제한한다.
<script>
/* 자식 선택자 
바디의 E만 색이 변함 */
$("div > h1").css("color","red");

/* 후손 선택자 
바디의 A와 E의 색이 변함*/
$("div h1").css("color","red");

</script>
<body>
	<div>
    	<ul>
       		<li><h1>A</h1></li>
            <li>B</li>
            <li>C</li>
            <li>D</li>
        </ul>
        <h1>E</h1>
    </div>
</body>

속성 선택자

  • 기본 선택자 뒤에 붙여 사용
<script>
/*속성 안의 값이 특정 값과 같은 객체 선택*/
$("input[type=text]").css("color","red");

/*속성 안의 값이 특정 값을 단어로써 포함하는 객체 선택*/
$("input[type~='값']").css("color","red");

/*속성 안의 값이 특정 값으로 시작하는 객체 선택*/
$("input[type^='값']").css("color","red");

/*속성 안의 값이 특정 값으로 끝나는 객체 선택*/
$("input[type$='값']").css("color","red");

/*속성 안의 값이 특정 값을 포함하는 객체 선택*/
$("input[type*='값']").css("color","red");
</script>
  • 대괄호 말고 ":"을 사용하여 속성을 선택할 수도 있다.
<script>
	/*input 태그의 button 타입 선택*/
	$("input:button").css("color","red");
</script>

필터 선택자

요소:odd 홀수에 위치한 객체 선택
요소:even 짝수에 위치한 객체 선택
요소:first 첫 번째 위치한 객체 선택
요소:last 마지막에 위치한 객체 선택
요소:contains(문자열) 특정 문자열을 포함하는 객체 선택
요소:eg(n) n번째 위치하는 객체 선택
요소:gt(n) n번째를 초과하는 객체 선택
요소:lt(n) N번째 미만에 위치하는 객체 선택
요소:has(선택자) 선택자를 가지고 있는 객체 선택
요소:not(선택자) 선택자와 일치하지 않는 객체 선택
요소:nth-child(2n) 2n번째 위치하는 객체 선택

 

부분의 필터 선택자의 경우 배열에 담아 그 배열에 위치한 인덱스를 기준으로 객체를 선택한다.

때문에 예를 들어 odd의 경우 홀수에 위치한 객체를 선택하는데

배열에 [1,2,3,4,5]가 있을 경우 홀수라 1,3,5 가 선택되어야 할 것 같다.

[1,2,3,4,5]의 인덱스가 [0,1,2,3,4]라서 실제로는 2,4가 선택된다.

 

<script>
	/*예시*/
    /*여러 선택자를 사용해 봅시다.*/
    $("table tr:eq(1) td:gt(0)").css("color","yellow");
    $("table tr:eq(2) td:gt(0)").css("color","yellow");
    $("table tr:lt(3) td:nth-child(2)").css("color","yellow");
    $("table tr:lt(3) td:nth-child(3)").css("color","yellow");
</script>
728x90
저작자표시 비영리

'노트' 카테고리의 다른 글

jQuery 여러 메서드  (0) 2022.05.19
jQuery 필터링 메서드  (1) 2022.05.18
5월 6일 JSP  (0) 2022.05.07
5월 3일 JSP 게시판 페이징 학습  (0) 2022.05.03
4월 28일 게시판 글 삭제하기  (0) 2022.04.28

+ Recent posts

티스토리툴바