[JQuery] ajax 예제3

JQuery 2022. 5. 19. 14:16
function searchSiChange(obj){
	$.ajax({
		type: "POST", 
		url: "/portal/postaddr/addrSearch/searchAddr.do",
		dataType: "json",
		data: "searchAddr="+obj.value, 
		success: searchAddrResult
	});
}
				
function searchAddrResult(oj){
	try {
		var arrSignguNm = oj.signguNm.split("|");
		var tObj = document.getElementById("searchGu");
		removeAll(tObj);
						
		for (var i=0; i<arrSignguNm.length;i++){
			var opt = document.createElement("option");
			opt.value = arrSignguNm[i];
			opt.text = arrSignguNm[i]; 
			tObj.options.add(opt);
		}
	}	
	catch (err){
		alert("예외 오류입니다.");
	}
}

'JQuery' 카테고리의 다른 글

[JQuery] ajax POST방식  (0) 2022.05.18
[JQuery] ajax json 예제 2  (0) 2022.05.18
[JQuery] ajax json 예제  (0) 2022.05.18
[JQuery]ajax  (0) 2022.04.19
[JQuery]현재 페이지 URL 및 변수 가져오기  (0) 2022.04.19
블로그 이미지

마크제이콥스

초보 개발자의 이슈및 공부 내용 정리 블로그 입니다.

,

[JQuery] ajax POST방식

JQuery 2022. 5. 18. 15:45
$.ajax({
	type: "POST", 
  	url: "/testpost.jsp",
  	dataType: "json",
  	data: "svalue=text&tvalue=test2", 
  	success: function(msg){
  		alert( "Data : " + msg );
  	}
 });

TIP
ajax 동기화 옵션
async: false,   ==> 해당 문구 추가

 

'JQuery' 카테고리의 다른 글

[JQuery] ajax 예제3  (0) 2022.05.19
[JQuery] ajax json 예제 2  (0) 2022.05.18
[JQuery] ajax json 예제  (0) 2022.05.18
[JQuery]ajax  (0) 2022.04.19
[JQuery]현재 페이지 URL 및 변수 가져오기  (0) 2022.04.19
블로그 이미지

마크제이콥스

초보 개발자의 이슈및 공부 내용 정리 블로그 입니다.

,

[JQuery] ajax json 예제 2

JQuery 2022. 5. 18. 15:39
$.ajax({
	type: "POST", 
	url: "/ajaxtest/selectAjaxList.do",
	dataType: "json",
	data: "statsCscd=B&rtype=json", 
	success: function(oj){
		var json = eval(oj);
		if (json.length>0){
			var clevel = json[0].clevel;
			for (var i=0;i<json.length;i++){
				$("#tschRegistOrgcd").append("<option value='"+json[i].orgcd+"'>"+json[i].koreanOrgnm+"</option>");
			}
		}
	}
});

'JQuery' 카테고리의 다른 글

[JQuery] ajax 예제3  (0) 2022.05.19
[JQuery] ajax POST방식  (0) 2022.05.18
[JQuery] ajax json 예제  (0) 2022.05.18
[JQuery]ajax  (0) 2022.04.19
[JQuery]현재 페이지 URL 및 변수 가져오기  (0) 2022.04.19
블로그 이미지

마크제이콥스

초보 개발자의 이슈및 공부 내용 정리 블로그 입니다.

,

[JQuery] ajax json 예제

JQuery 2022. 5. 18. 15:35
$.ajax({
		  type: "POST", 
		  url: "${contextPath}/test/list.do",
		  dataType: "json",
		  data: "clevel="+clevel+"&catcode="+pcatcode, 
		  success: changeResult2
	});

	function changeResult2(oj){
		try 
		{
			var json = eval(oj);
			if (json.length>0){
				var clevel = json[0].clevel;
				for (var i=0;i<json.length;i++){
					$("#p_cate_cd"+eval(clevel)).append("<option value='"+json[i].catcode+"' etc='"+json[i].etc+"' ordby='"+json[i].ordby+"'>"+json[i].catname+"</option>");
				}
			}
			$("#p_cate_cd"+clevel).val($("#catcode").val()).attr("selected","selected");
		} catch (err) {
			 alert("예외 오류입니다." + err);
		}
	}
    
    [{"catcode":"506100", "clevel":"2", "pCatcode":"506", "catname":"타사", "catcode1":"506", "catcode2":"100", "catcode3":"", "catcode4":"", "catcode5":"", "catcode6":"", "matchcode":"", "etc":"", "ordby":"62", "isuse":"0"}, {"catcode":"506101", "clevel":"2", "pCatcode":"506", "catname":"자사", "catcode1":"506", "catcode2":"101", "catcode3":"", "catcode4":"", "catcode5":"", "catcode6":"", "matchcode":"", "etc":"", "ordby":"63", "isuse":"0"}, {"catcode":"506102", "clevel":"2", "pCatcode":"506", "catname":"우루사", "catcode1":"506", "catcode2":"102", "catcode3":"", "catcode4":"", "catcode5":"", "catcode6":"", "matchcode":"", "etc":"", "ordby":"64", "isuse":"0"}, {"catcode":"506103", "clevel":"2", "pCatcode":"506", "catname":"테스트", "catcode1":"506", "catcode2":"103", "catcode3":"", "catcode4":"", "catcode5":"", "catcode6":"", "matchcode":"", "etc":"", "ordby":"65", "isuse":"0"}, {"catcode":"506104", "clevel":"2", "pCatcode":"506", "catname":"서비스업체", "catcode1":"506", "catcode2":"104", "catcode3":"", "catcode4":"", "catcode5":"", "catcode6":"", "matchcode":"", "etc":"", "ordby":"66", "isuse":"0"}, {"catcode":"506105", "clevel":"2", "pCatcode":"506", "catname":"사랑의실", "catcode1":"506", "catcode2":"105", "catcode3":"", "catcode4":"", "catcode5":"", "catcode6":"", "matchcode":"", "etc":"", "ordby":"67", "isuse":"0"}, {"catcode":"506106", "clevel":"2", "pCatcode":"506", "catname":"정보사", "catcode1":"506", "catcode2":"106", "catcode3":"", "catcode4":"", "catcode5":"", "catcode6":"", "matchcode":"", "etc":"", "ordby":"68", "isuse":"0"}]

 

public static void printJSONValue(HttpServletResponse response, MyBuilderDescriptor mybuilderData) throws Exception {
		response.setContentType("application/x-json; charset=UTF-8");
		response.setHeader("Cache-Control", "no-cache");
		ZValue zvl = null;
		JSONArray jsonArray = new JSONArray();
		
		String[] arr_colm =  mybuilderData.getSbColum().toString().split(MyBuilderUtil.col);
		String[] arr_data =  mybuilderData.getSbData().toString().split(MyBuilderUtil.row);

		int len_colm = arr_colm.length;
		int len_data = arr_data.length;

		for (int i=0; i<len_data ; i++){
			
			for (int j=0; j<len_colm ; j++){
				String[] arr_dataColm = arr_data[i].split(MyBuilderUtil.col);
				zvl = new ZValue();
				zvl.put(arr_colm[j], arr_dataColm[j]);
			}
			jsonArray.add(zvl);
		}
		log2.debug(jsonArray.toString());
		response.getWriter().write(jsonArray.toString());
	}

'JQuery' 카테고리의 다른 글

[JQuery] ajax 예제3  (0) 2022.05.19
[JQuery] ajax POST방식  (0) 2022.05.18
[JQuery] ajax json 예제 2  (0) 2022.05.18
[JQuery]ajax  (0) 2022.04.19
[JQuery]현재 페이지 URL 및 변수 가져오기  (0) 2022.04.19
블로그 이미지

마크제이콥스

초보 개발자의 이슈및 공부 내용 정리 블로그 입니다.

,

[JQuery]ajax

JQuery 2022. 4. 19. 16:41
보다 자세하고 정확한 내용은 http://api.jquery.com/jQuery.ajax/ 를 참조

 

$.ajax({
    type : "POST" //"POST", "GET"
    , async : true //true, false
    , url : "Inquiry.jsp" //Request URL
    , dataType : "html" //전송받을 데이터의 타입

                               //"xml", "html", "script", "json" 등 지정 가능

                               //미지정시 자동 판단
    , timeout : 30000 //제한시간 지정
    , cache : false  //true, false
    , data : $("#inputForm").serialize() //서버에 보낼 파라메터

                     //form에 serialize() 실행시 a=b&c=d 형태로 생성되며 한글은 UTF-8 방식으로 인코딩

                     //"a=b&c=d" 문자열로 직접 입력 가능

                     //{a:b, c:d} json 형식 입력 가능
    , contentType: "application/x-www-form-urlencoded; charset=UTF-8"
    , error : function(request, status, error) {
     //통신 에러 발생시 처리
     alert("code : " + request.status + "\r\nmessage : " + request.reponseText);
    }
    , success : function(response, status, request) {
     //통신 성공시 처리
     $('#resultDIV').append(response);    
    }
    , beforeSend: function() {
     //통신을 시작할때 처리
     $('#ajax_indicator').show().fadeIn('fast'); 
    }
    , complete: function() {
     //통신이 완료된 후 처리
     $('#ajax_indicator').fadeOut();
    }
});

 

<!-- 결과를 저장할 영역 -->

<div id="resultDIV">

  <!-- Ajax 로딩시 이미지 출력 영역 -->
  <div id="ajax_indicator" style="display:none">
   <p style="text-align:center; padding:16px 0 0 0; left:50%; top:50%; position:absolute;"><img src="/Report/images/ajax-loader.gif" /></p>
  </div>?

</div>

 

참고 : Ajax 호출

$(document).ready(function(){       //도큐먼트 로딩 완료시
$("#inputForm").submit(function(){ //form에서 submit시
$("#searchBtn").click(function(){   //button 클릭시
function search(){                        //일반 함수로 정의하여 버튼 등에 onclick="search()"로 연결
$(function(){

'JQuery' 카테고리의 다른 글

[JQuery] ajax 예제3  (0) 2022.05.19
[JQuery] ajax POST방식  (0) 2022.05.18
[JQuery] ajax json 예제 2  (0) 2022.05.18
[JQuery] ajax json 예제  (0) 2022.05.18
[JQuery]현재 페이지 URL 및 변수 가져오기  (0) 2022.04.19
블로그 이미지

마크제이콥스

초보 개발자의 이슈및 공부 내용 정리 블로그 입니다.

,
alert(window.location.href);

jQuery.extend({
	getURLParam: function(strParamName){
		var strReturn = "";
		var strHref = window.location.href;
		var bFound=false;
      
		var cmpstring = strParamName + "=";
		var cmplen = cmpstring.length;
		if ( strHref.indexOf("?") > -1 ){
			var strQueryString = strHref.substr(strHref.indexOf("?")+1);
			var aQueryString = strQueryString.split("&");
			for ( var iParam = 0; iParam < aQueryString.length; iParam++ ){
				if (aQueryString[iParam].substr(0,cmplen)==cmpstring){
					var aParam = aQueryString[iParam].split("=");
					strReturn = aParam[1];
					bFound=true;
					break;
				}
       
			}
		}
     if (bFound==false) return null;
     return strReturn;
   }
 });

'JQuery' 카테고리의 다른 글

[JQuery] ajax 예제3  (0) 2022.05.19
[JQuery] ajax POST방식  (0) 2022.05.18
[JQuery] ajax json 예제 2  (0) 2022.05.18
[JQuery] ajax json 예제  (0) 2022.05.18
[JQuery]ajax  (0) 2022.04.19
블로그 이미지

마크제이콥스

초보 개발자의 이슈및 공부 내용 정리 블로그 입니다.

,