ajax 호출, 데이터(일반문자열,json) 반환, 콜백처리 ( asp 타입의 페이지 )

프로그래밍/ASP NET

ajax 호출, 데이터(일반문자열,json) 반환, 콜백처리 ( asp 타입의 페이지 )

도깨비방망이 2014. 1. 3. 16:07

ajax 호출, 데이터(일반문자열,json) 반환, 콜백처리 ( asp 타입의 페이지 )

- ajax 호출로 다양한 경우의 작업이 필요한 경우가 있음.

- 받고자 하는 변수값이 많을 때에는 json으로 return 받고, 적을때는 일반문자열로 return 받음

- 두가지 예제로 ajax 처리 ( json 리턴 , 일반문자열리턴 )

- 예제들의 경우 예전에 썼던 것을 변수명등을 변경한것이라 좀 안맞을수도 있음

1. json 리턴

- 영화평점 등록 예제

- 점수 등록하면 별 색깔 채우기, 평점, 참여자수를 변경시켜주는 예제

1) 호출 페이지

<script language="javascript" type="text/javascript">
<!--
	jQuery(document).ready(function () {
		jQuery('#btnscore').click(function () {
				var score = jQuery('#score').val();
				set_score(score);
		});
	});
	
	function set_score(score) {
		var url = '점수처리_ajax.aspx';
		var urlFull = url + '?seq=<%=drugseq%>&score=' + score;
		var msgtitle = '등록/변경';
		if ('<%=이미등록점수_item%>' == '' && score == '') {
			return;
		} else if (score == ''){
			msgtitle = '취소';
		}
		var title = '평가점수를';

jQuery.post(urlFull,
                		function (data) {
                		var result = jQuery.parseJSON(data);
	                	if (result.state != 'ok') {
	                		alert("점수등록에 문제가 발생하였습니다. 다시 한번 해 보세요.");
	                	}
                		else {
	                		alert("해당 " + title + " " + msgtitle + " 였습니다.");
	                		var des = '(' + result.PointAttend + '명 참여)';
	                		jQuery('#span_참여자').text(des);
	                		jQuery('#span_평점').text(result.AvgPoint);
				if (score == '') {
                				des = "약물의 점수를 주세요!";
	                		} else {
	                			des = "점수를 " + score + "로 주셨습니다.";
	                		}
                			jQuery('#내가_등록한_점수').text(des);
                			jQuery('#span_별퍼센트').attr("style", "width:" + result.star_percent + "%");
                		}
                	});
	}
//-->
</script>

<div class="scorebox mt10">

<div class="star_score">																								
</div>
    <div class="score01">
       <span class="tit1">평점</span>
       <span class="st_off">
         <span class="st_on" id="span_별퍼센트" style="width:<%=현재평점변수%>%"></span>
       </span>
       <span class="num" id="span_평점"><%=현재평점 %></span>
       <span class="text1" id="span_참여자">(<%=현재참여자%>명 참여)</span>
    </div>
    <div class="score02">
       <span class="tit1">
       <select name="score" id="score" onchange="MM_jumpMenu('parent',this,0)" class="select04">
         <option value="" selected="selected">점수 </option>
         <option value="-2" <%if(myscore_item=="-2") {%>selected<%} %>> -2 </option>     
		 <option value="-1" <%if(myscore_item=="-1") {%>selected<%} %>> -1 </option>    
		 <option value="0" <%if(myscore_item=="0") {%>selected<%} %>> 0 </option>    
		 <option value="1" <%if(myscore_item=="1") {%>selected<%} %>> 1 </option>    
		 <option value="2" <%if(myscore_item=="2") {%>selected<%} %>> 2 </option>     
        </select></span>
        <span class="mL5"><input id="btnscore" type="image" src="images/btn_ok.gif" /></span>
        <span class="text1" id="내가_등록한_점수"><%if(내가준점수==""){%>영화의 점수를 주세요!<%}else{%>점수를 <%=내가준점수%>로 주셨습니다.<%} %></span>
    </div>
   
</div>

2) ajax 처리 페이지

<% string sql = ""; sql += " EXEC set_score_ajax "; sql += "@iseq='" + seq + "'"; sql += ",@i아이디='" + 아이디 + "'"; sql += ",@iscore='" + score + "'"; // // DB 처리 // DataSet ds = dbclass.get_common_sql_result(sql); dt = ds.Tables[0]; if (dt.Rows[0]["State"].ToString().Equals("OK") == true) { strJson = "{\"state\":\"ok\", \"AvgPoint\":\"" + dt.Rows[0]["AvgPoint"].ToString() + "\",\"PointAttend\":\"" + dt.Rows[0]["PointAttend"].ToString() + "\",\"star_percent\":\"" + dt.Rows[0]["star_percent"].ToString() + "\"}"; } else { strJson = "{\"state\":\"err\", \"cnt\":0}"; } Response.Write(strJson); Response.End(); %>

2. 일반 문자열 리턴

- 클릭하면 전체갯수 + 1, 해제하면 전체갯수 - 1

1) 호출 페이지

<script language="javascript" type="text/javascript">  </script> <div class="score03"> <span class="tit1"> <% if ( 이미진행중클릭_item == "1" ) { imgName = "on.gif"; } else { imgName = "off.gif"; } %> <img src="<%=imgName%>" id="btning" alt="<%=이미진행중클릭_item%>" style="cursor:pointer;" /> </span> <span><img src="images/btn_presbg_left.gif" alt=""/></span> <span class="btnpres" id="span_진행중표시"><%=receiping_item %></span> <span><img src="images/btn_presbg_right.gif" alt=""></span> </div>

2) ajax 처리 페이지

저작자표시 비영리 변경금지