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

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> <!--점수박스 --> <!-- scorebox --> <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> <!-- //scorebox --> <!--//점수박스 -->

 

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"> <!-- jQuery('#btning').click(function () { var myingExist = jQuery('#btning').attr('alt'); if (myingExist == '0') set_ing('A'); else set_ing('D'); }); function set_ing(workingTag) { var url = '처리_ajax.aspx'; var urlFull = url + '?seq=<%=seq%>&WorkingTag=' + workingTag; var msgtitle = '추가'; if (workingTag == 'D') msgtitle = '제거'; var title = '진행중 목록에 '; jQuery.post(urlFull, function (data) { if (data == '-1') { alert("현재 진행중 변경에 문제가 발생하였습니다. 다시 한번 해 보세요."); } else { alert(title + msgtitle + " 하였습니다."); if (workingTag == 'D') { jQuery('#btning').attr("src", "off.gif"); jQuery('#btning').attr("alt", "0"); jQuery('#span_진행중표시').text(data); } else { jQuery('#btning').attr("src", "on.gif"); jQuery('#btning').attr("alt", "1"); jQuery('#span_진행중표시').text(data); } } }); } //--> </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 처리 페이지

<% string sql = ""; sql += " EXEC set_ing_ajax "; sql += "@iseq='" + seq + "'"; sql += ",@i아이디='" + 아이디 + "'"; sql += ",@iworkingTag='" + workingTag + "'"; DataSet ds = dbclass.get_common_sql_result(sql); dt = ds.Tables[0]; if (dt.Rows[0]["State"].ToString().Equals("OK") == true) { Response.Write(dt.Rows[0]["Keys"].ToString()); } else { Response.Write("-1"); } Response.End(); %>