※TIP) JSON 객체 형태를 validate 하고 싶으면, Google 에서 JSON Validator 라고 쳐서 아무거나 쓰면 디버깅하기 쉽다


JSON each 문을 돌리는 문법


-- JS

var text = '{ "employees" : [' +

'{ "firstName":"John" , "lastName":"Doe" },' +

'{ "firstName":"Anna" , "lastName":"Smith" },' +

'{ "firstName":"Peter" , "lastName":"Jones" } ]}';


var textObj = JSON.parse(text);


위처럼 해당 JSON을 String 만들어서 JSON.parse 해도 좋고

아래처럼 JSON 자체를 변수에 담아도 좋다.


var obj = {

   "listData": [

                {

                    "dmNum": "",

                    "dmName": "정책",

                    "L1": "100.0",

                    "L2": "86.11",

                    "L3": "0.0",

                    "TOT": "89.79",

                    "TYPE": ""

                },

                {

                    "dmNum": "",

                    "dmName": "조직",

                    "L1": "100.0",

                    "L2": "70.73",

                    "L3": "12.5",

                    "TOT": "70.31",

                    "TYPE": ""

                },

                {

                    "dmNum": "",

                    "dmName": "위수탁 보안관리",

                    "L1": "75.0",

                    "L2": "50.0",

                    "L3": "0.0",

                    "TOT": "52.63",

                    "TYPE": ""

                }

         ]

};


-- HTML

<p id="demo">hi</p> 


<script>

$.each(obj, function(idx, item) {

$.each(item, function(key, value) {

console.log("key : " + key + " TOT : " + item[key].TOT + " dmName : " + item[key].L1);

});

});

</script>


each 문 2개를 사용해서 총 갯수만큼의 각 attr 에 접근이 가능하다.



저작자표시

'Client Standard > JavaScript & jQuery' 카테고리의 다른 글

[jQuery] select box 강제 change 시키기  (0) 2016.01.28
[우클릭방지] jquery 구문  (0) 2015.09.09
[Chart] FusionCharts 오픈 소스 API  (0) 2015.08.27
[Editor] Tiny  (0) 2014.12.29
[validation] 파일업로드 체크  (0) 2014.09.17

JSON 혹은 XML 데이터로 jquery chart 형식을 trial 버전으로 공개해주는

사이트가 있어 퍼왔다.


http://www.fusioncharts.com/dev/usage-guide/getting-started/your-first-charts/building-your-first-chart.html


해당주소는 위인데 정말이지 신세계다.

나중에 꼭 chart 쓸일이 있으면 이걸 써보는 것도 좋은 방법인듯 하다 :)

저작자표시

'Client Standard > JavaScript & jQuery' 카테고리의 다른 글

[우클릭방지] jquery 구문  (0) 2015.09.09
[JSON] for each  (0) 2015.08.27
[Editor] Tiny  (0) 2014.12.29
[validation] 파일업로드 체크  (0) 2014.09.17
[프린트] window.print()  (0) 2014.09.12

<main.jsp> (꼭 jsp로 작업하지 않아도 된다.)


<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Insert title here</title>

<script type="text/javascript">


var xhr = null;

function getXMLHttpRequest() {

if (window.ActiveXObject) {

try {

return new ActiveXObject("Msxml2.XMLHTTP");

} catch (e1) {

try {

return new ActiveXObject("Microsoft.XMLHTTP");

} catch (e2) {

return null;

}

}

} else if (window.XMLHttpRequest) {

return new XMLHttpRequest();

} else {

return null;

}

}


function requestHello(URL) {

param = f.name.value;

URL = URL + "?name=" + encodeURIComponent(param);

xhr = getXMLHttpRequest();

xhr.onreadystatechange = responseHello;

xhr.open("GET", URL, true);

xhr.send(null);

}

function responseHello(){

if(xhr.readyState == 4){

var str = xhr.responseText;

document.getElementById("message").innerHTML = str;

}else{

alert(!"Fail : "+httpRequest.status);

}

}

</script>

</head>

<body>

<form name="f">

<input type="text" name="name">

<input type="button" value="입력 " onclick="requestHello('hello.jsp')">

</form>

<div id="message"></div>


</body>

</html>



------------------------------------------------------------------


<hello.jsp>


<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Insert title here</title>

</head>

<body>

<%

request.setCharacterEncoding("UTF-8");

String name = request.getParameter("name");

%>

안녕하세요, <%=name %> 회원님!

</body>

</html>




================================================================================================




저렇게만 한다면 분명히 한글이 깨질 것이다.


 이 부분을 -> main.jsp : escape(encodeURIComponent(param))

hello.jsp :  java.net.URLDecoder.decode(request.getParameter("name"),"utf-8")


이렇게 다시 바꾸고 실행해보자.

그럼 한글이 제대로 나온다.


그래도 한글이 깨져서 나온다면 잘 저장하고 tomcat 을 restart 하면 된다.


저작자표시

'Client Standard > Ajax' 카테고리의 다른 글

[Jsonp] POST method 데이터전송  (0) 2017.03.30
[Ajax] Http/Https 크로스도메인 문제  (0) 2017.03.27
Js, Ajax Example  (0) 2013.02.23

<script type="text/javascript" src="<c:url value='/resource/js/tinymce/jscripts/tiny_mce/tiny_mce_src.js'/>"></script>      

<!-- webEditor -->


<script type="text/javascript" src="<c:url value='/resource/js/tinymce/jscripts/tiny_mce/lgekr_editor_init_customer.js'/>"></script>   

<!-- webEditor -->



<textarea title="" id="ippeditor" class="editor_holder">${faq.ippeditor}</textarea>

저작자표시

'Client Standard > JavaScript & jQuery' 카테고리의 다른 글

[JSON] for each  (0) 2015.08.27
[Chart] FusionCharts 오픈 소스 API  (0) 2015.08.27
[validation] 파일업로드 체크  (0) 2014.09.17
[프린트] window.print()  (0) 2014.09.12
[Js] 모바일, 웹 브라우저 체크  (0) 2014.08.25

var uploadFile1 = $('#uploadFile1').val();


var FileFilter = /\.(jpg|gif)$/i;

var extArray = new Array(".jpg", ".gif");   



if(uploadFile1 != ''){

if (!uploadFile1.match(FileFilter)){

alert("다음 파일만 업로드가 가능합니다.\n\n"  + (extArray.join("  ")) + "\n\n 업로드할 파일을 " + " 다시 선택하여 주세요.");

return false;

}

}

저작자표시

'Client Standard > JavaScript & jQuery' 카테고리의 다른 글

[Chart] FusionCharts 오픈 소스 API  (0) 2015.08.27
[Editor] Tiny  (0) 2014.12.29
[프린트] window.print()  (0) 2014.09.12
[Js] 모바일, 웹 브라우저 체크  (0) 2014.08.25
[API] jQuery select box  (0) 2014.08.22

퍼블리셔 : 미리보기 자체는 엄밀히 말하면 이중적 오류

window.print() 함수를 쓰며 -> 미리보기 + print 기능이 native로 제공된다.


참고 url

http://ggoreb.tistory.com/178 


저작자표시

'Client Standard > JavaScript & jQuery' 카테고리의 다른 글

[Editor] Tiny  (0) 2014.12.29
[validation] 파일업로드 체크  (0) 2014.09.17
[Js] 모바일, 웹 브라우저 체크  (0) 2014.08.25
[API] jQuery select box  (0) 2014.08.22
[jQuery] 이메일 창 활성화 / 비활성화  (0) 2014.05.30


navigator.userAgent



브라우저 userAgent 값들
iPhone, iPod, BlackBerry, Android, Windows CE, LG, MOT, SAMSUNG, SonyEricsson



<script type="text/javascript">
var mobileKeyWords = new Array('iPhone', 'iPod', 'BlackBerry', 'Android', 'Windows CE', 'LG', 'MOT', 'SAMSUNG', 'SonyEricsson');
for (var word in mobileKeyWords){
    if (navigator.userAgent.match(mobileKeyWords[word]) != null){
        location.href = "보내고 싶은 모바일 경로";
        break;
    }
}
</script>

저작자표시

'Client Standard > JavaScript & jQuery' 카테고리의 다른 글

[validation] 파일업로드 체크  (0) 2014.09.17
[프린트] window.print()  (0) 2014.09.12
[API] jQuery select box  (0) 2014.08.22
[jQuery] 이메일 창 활성화 / 비활성화  (0) 2014.05.30
[Mobile] 체크하기  (0) 2014.03.07

■ jQuery select box 관련 api

111


// select box ID로 접근하여 선택된 값 읽기

$("#셀렉트박스ID option:selected").val();


// select box Name로 접근하여 선택된 값 읽기

$("select[name=셀렉트박스name]").val();


// 같은 방식으로 span과 같은 다른 태그도 접근 가능하다~

$("span[name=셀렉트박스name]").text();


// 선택된 값의 index를 불러오기

var index = $("#셀렉트박스ID option").index($("#셀렉트박스ID option:selected"));


// 셀렉트 박스에 option값 추가하기

$("#셀렉트박스ID").append("<option value='1'>1번</option>");


// 셀렉트 박스 option의 맨앞에 추가 할 경우

$("#셀렉트박스ID").prepend("<option value='0'>0번</option>");


// 셀렉트 박스의 html 전체를 변경할 경우

$("#셀렉트박스ID").html("<option value='1'>1차</option><option value='2'>2차</option>");


// 셀렉트 박스의 index별로 replace를 할 경우

// 해당 객체를 가져오게 되면, option이 다수가 되므로 배열 객체가 되어 eq에 index를 넣어 개별 개체를 선택할 수 있다.

$("#셀렉트박스ID option:eq(1)").replaceWith("<option value='1'>1차</option>");


// 직접 index 값을 주어 selected 속성 주기

$("#셀렉트ID option:eq(1)").attr("selected", "selected");


// text 값으로 selected 속성 주기

$("#셀렉트ID")val("1번").attr("selected", "selected");


// value 값으로 selected 속성 주기

$("#셀렉트ID").val("1");


// 해당 index item 삭제하기

$("#셀렉트ID option:eq(0)").remove();


// 첫번째, 마지막 item 삭제하기

$("#셀렉트ID option:first").remove();

$("#셀렉트ID option:last").remove();


// 선택된 옵션의 text, value 구하기

$("#셀렉트ID option:selected").text();

$("#셀렉트ID option:selected").val();


// 선택된 옵션의 index 구하기

$("#셀렉트ID option").index($("#셀렉트ID option:selected"));


// 셀렉트박스의 아이템 갯수 구하기

$("#셀렉트ID option").size();


// 선택된 옵션 전까지의 item 갯수 구하기

$("#셀렉트ID option:selected").prevAll().size();


// 선택된 옵션 후의 item 갯수 구하기

$("#셀렉트ID option:selected").nextAll().size();


 // 해당 index item 이후에 option item 추가 하기

$("#셀렉트ID option:eq(0)").after("<option value='3'>3번</option>");


// 해당 index item 전에 option item 추가하기

$("#셀렉트ID option:eq(3)").before("<option value='2'>2번</option>");


// 해당 셀렉트 박스에 change event binding 하기

$("#selectID").change(function() {

alert($(this).val());

alert($(this).children("option:selected").text());

});

저작자표시

'Client Standard > JavaScript & jQuery' 카테고리의 다른 글

[프린트] window.print()  (0) 2014.09.12
[Js] 모바일, 웹 브라우저 체크  (0) 2014.08.25
[jQuery] 이메일 창 활성화 / 비활성화  (0) 2014.05.30
[Mobile] 체크하기  (0) 2014.03.07
[multi file upload] 업로드시 input file Add  (0) 2014.02.21



$('#chargeEmail3').change(function(){

$('#chargeEmail3 option:selected').each(function() {

if($(this).val() == 'self'){

$('#chargeEmail2').val('');

$('#chargeEmail2').attr("disabled", false);

} else if ($(this).val == 'select'){

$('#chargeEmail2').val('');

$('#chargeEmail2').attr("disabled", false);

} else {

$('#chargeEmail2').val($(this).text());

$('#chargeEmail2').attr("disabled", true);

}

});

});



<tr>

<th scope="row"><label for="chargeEmail">담당자  이메일</label></th>

<td>

<div class="item">

<input type="text" id="chargeEmail" name="chargeEmail" class="in_text" style="width:100px;" value="" maxlength="20" title="이메일 아이디" /> @

<input type="text" id="chargeEmail2" name="chargeEmail2" class="in_text" style="width:100px;" value="" maxlength="20" title="이메일 아이디" />

<select name="chargeEmail3" id="chargeEmail3" title="직접선택" style="width:160px;">

<option value="self">직접입력</option>

<option value="naver.com">naver.com</option>

<option value="hanmail.net">hanmail.net</option>

<option value="nate.com">nate.com</option>

<option value="daum.net">daum.net</option>

<option value="paran.com">paran.com</option>

<option value="gmail.com">gmail.com</option>

<option value="hotmail.com">hotmail.com</option>

<option value="yahoo.co.kr">yahoo.co.kr</option>

<option value="empal.com">empal.com</option>

<option value="lycos.co.kr">lycos.co.kr</option>

<option value="korea.com">korea.com</option>

<option value="dreamwiz.com">dreamwiz.com</option>

<option value="freechal.com">freechal.com</option>

</select>

</div>

</td>

</tr>

저작자표시

'Client Standard > JavaScript & jQuery' 카테고리의 다른 글

[Js] 모바일, 웹 브라우저 체크  (0) 2014.08.25
[API] jQuery select box  (0) 2014.08.22
[Mobile] 체크하기  (0) 2014.03.07
[multi file upload] 업로드시 input file Add  (0) 2014.02.21
[jQuery] Input[type=text] Enter 키 누르면 함수호출  (0) 2014.01.03

if (navigator.userAgent.match(/iPad/) == null && navigator.userAgent.match(/iPhone|Mobile|UP.Browser|Android|BlackBerry|Windows CE|Nokia|webOS|Opera Mini|SonyEricsson|opera mobi|Windows Phone|IEMobile|POLARIS/) != null){

location.href = "/m_index";

}

저작자표시

'Client Standard > JavaScript & jQuery' 카테고리의 다른 글

[API] jQuery select box  (0) 2014.08.22
[jQuery] 이메일 창 활성화 / 비활성화  (0) 2014.05.30
[multi file upload] 업로드시 input file Add  (0) 2014.02.21
[jQuery] Input[type=text] Enter 키 누르면 함수호출  (0) 2014.01.03
[Search] 검색 onkeypress 속성  (0) 2013.12.10

+ Recent posts

티스토리툴바