jQuery로 id 접근시 $(“#id”),
ex) $(“#header_area”)
class로 접근시 $(“.class”),
ex) $(“.section_nav”)
name으로 접근시 $(tag_name[name=name]),
ex) $(“input[name=search_value]“)
2017년 9월 29일 금요일
2017년 9월 14일 목요일
JSONP 및 Script console.log Tip
console.log 찍을 시 Object 상세 찍는법
console.log("object: %O", data);
JSNOP : http://kingbbode.tistory.com/26 여기에 제일 잘 정리되어있음
크로스도메인 해결하는데 Spring security에서 막혀 있어 filter + jsonp 로 해결함
http://www.codejs.co.kr/jquery-jsonp/
http://dev.epiloum.net/1311
JSONP is a method for sending JSON data without worrying about cross-domain issues.
JSONP does not use the XMLHttpRequest object.
JSONP uses the <script> tag instead.
실행시 주의사항
1. web.xml 에 filter 설정해서 해당 url 크로스도메인 허용해줌
2. java 값 리턴시 callback 함수로 감싸주어야함
3. script에서 호출하고 받을때 callback 함수 이름이 동일해야함
XML 부분
web.xml
<filter>
<filter-name>cors</filter-name>
<filter-class>com.test.api.common.util.CORSFilter</filter-class>
</filter>
<filter-mapping>
<filter-name>cors</filter-name>
<url-pattern>/test/*</url-pattern>
</filter-mapping>
Filter java 부분
public class CORSFilter implements Filter{
@Override
public void init(FilterConfig filterConfig) throws ServletException {
// TODO Auto-generated method stub
}
@Override
public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain)
throws IOException, ServletException {
HttpServletResponse response = (HttpServletResponse) res;
response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
response.setHeader("Access-Control-Max-Age", "3600");
response.setHeader("Access-Control-Allow-Headers", "x-requested-with");
response.setHeader("Access-Control-Allow-Origin", "*");
chain.doFilter(req, response);
}
}
JAVA 부분
@RequestMapping(value="/test.do", method = {RequestMethod.GET, RequestMethod.POST})
public void testApi(HttpServletRequest request, HttpServletResponse response) throws Exception{
try {
response.setContentType("text/html;charset=UTF-8"); //PrintWriter 한글깨짐해결
Authentication authentication = SecurityContextHolder.getContext().getAuthentication();
TestDetail testDetail = (TestDetail ) authentication.getPrincipal();
String userId = testDetail .getMember().getId();
String userName = testDetail .getMember().getUserName();
String callBack = request.getParameter("callback"); //jsonp callback 함수명
JSONObject obj=new JSONObject();
obj.put("userId", userId);
obj.put("userName", userName);
PrintWriter out = response.getWriter();
out.write(callBack + "("+obj.toString()+")");
out.flush();
out.close();
}
catch (Exception e){
logger.error("Exception : " + e.getMessage(), e);
}
}
Script 부분
function apiCheck(){
var aPI = "http://test/testApi.do?callback=?"; //callback 이게 컬백함수 이름임
$.getJSON( testAPI,
function( data ) {
console.log("data : " + data);
console.log("object: %O", data)
});
}
2017년 9월 12일 화요일
반복자 JAVA iterator
이터레이터(Iterator) 인터페이스
- 모든 컬렉션(Collection)으로 부터 정보를 얻을 수 있는 인터페이스 입니다.- 즉, 자신이 컬렉션(List, Set 등)이라면 이터레이터 인터페이스를 사용할 수 있습니다.
도서관에 비유
- 우리가 책을 보관하는 책장(컬렉션)이 있고, 그 곳에는 책(컬렉션 안에 들어갈 객체)이 있습니다.
- 이 책장은 도서관 사서(이터레이터)가 관리하게 됩니다.
- 사서는 단순 무지한 녀석이라 책장 처음부터 끝까지 한번에 하나씩 밖에 못 가져옵니다.
이터레이터가 가지고 있는 메서드
- boolean hasNext() : 다음 값이 있는지 없는지 확인, 있으면 true를 리턴하고 없으면 false를 리턴 --> if나 while문에서 쓰면 되겠죠?
- E next() : 다음 값을 리턴합니다. 어떤 형태인지 모르기 때문에 리턴 유형을 E로 하겠습니다.
- void remove() : 삭제 하는 메서드
Set<String> movie = new HashSet<String>();
movie.add("대부");
movie.add("반지의 제왕");
movie.add("겨울왕국");
movie.add("다크 나이트");
movie.add("해리포터");
movie.add("공공의 적");
Iterator<String> itr = movie.iterator();
// 이터레이터 객체 itr에 HashSet객체인 movie안에 있는 값들을 가져온다
// 모든 컬렉션 안에는 iterator()메서드가 있기 때문에 점찍고 사용하면 movie안에 있는 값들을 가져올 수 있다
while (itr.hasNext()) { // 값이 나올때까지 while문을 돈다
String s = itr.next(); // 문자열 변수 s에 다음값을 넣는다
System.out.println(s);
}
출처: http://bitnori.tistory.com/entry/JAVA-JAVA-ITERATOR-자바-이터레이터 [Bitnori's Blog]
출처: http://bitnori.tistory.com/entry/JAVA-JAVA-ITERATOR-자바-이터레이터 [Bitnori's Blog]
2017년 9월 1일 금요일
유효성 검사 jquery required
api 참조: https://jqueryvalidation.org/valid/
form 내부에
<input required="required" data-title="테스트">
required 의미는 값이 꼭 있어야한다를 뜻한다
참조 블로그 : https://mytory.net/archives/195
이런식으로 적은 후 저장 버튼 함수에
유효성 검사를 넣어두면 jquery 에 의해서 자동적으로 체크가 되며
그 대상의 data-title 값 + 지정해둔 message로 alert창이 뜬다
data-title 값이 없으면 id 값을 알려준다
즉 jquery valid 함수 하나로 required 설정된 곳은 다 검사 할 수 가 있다
$('#btnSave').on('click', function() {
if(!$('#frm').valid()) {
return;
}
}
jquery 설정 파일은 jquery.utils.js 내에서
1
jrx.define('validate.init', function() {
required : messages.해당값
}
2 $.validator.setDefaults({
여기를 보면 잘 설정되어있다
form 내부에
<input required="required" data-title="테스트">
required 의미는 값이 꼭 있어야한다를 뜻한다
참조 블로그 : https://mytory.net/archives/195
이런식으로 적은 후 저장 버튼 함수에
유효성 검사를 넣어두면 jquery 에 의해서 자동적으로 체크가 되며
그 대상의 data-title 값 + 지정해둔 message로 alert창이 뜬다
data-title 값이 없으면 id 값을 알려준다
즉 jquery valid 함수 하나로 required 설정된 곳은 다 검사 할 수 가 있다
$('#btnSave').on('click', function() {
if(!$('#frm').valid()) {
return;
}
}
jquery 설정 파일은 jquery.utils.js 내에서
1
jrx.define('validate.init', function() {
required : messages.해당값
}
2 $.validator.setDefaults({
여기를 보면 잘 설정되어있다
피드 구독하기:
글 (Atom)