[jQuery] json, ajax, jquery 비동기 호출

# [jQuery] json, ajax, jquery 비동기 호출

1.비동기 호출

- 비동기 호출로 메시지 전송.

- 수신자 리스트는 json으로 변환하여 전달.

2.  브라우저 <--- json ---> 서버단

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

<script type="text/javascript" language="javascript" src="/jquery.library.js"></script>

<script type="text/javascript" src="/jquery.json-2.2.min.js"></script> 

... 

function sendMsg() {

var arr = new Array();

var i = 0;

$(".inputHpNum").each( function() {

        var o = new Object();

        o.phoneNo = $(this).val();

        arr[i++] = o;

    });

var encoded = $.toJSON(arr);

$form = $("#MsgFrom");

  var postData = $form.serialize();

postData += "&smsjsonPara="+encoded;

$.ajax( {

type :'POST'

,asyn :true

,url :'/msg/sendMsg.do?_method=send'

,data:postData

,dataType :"json"

,contentType :"application/x-www-form-urlencoded;charset=UTF-8"

,beforeSend : function(xhr){

}

,success : function(jsonData) {

var resultCnt = jsonData.sendResult;

if(resultCnt> 0){

alert("["+sendResultCnt+"]"+" 건이 발송 되었습니다.");

self.close();

} else {

alert("전송된 건이 없습니다.");

}

}

,error : function(xhr, textStatus) {

msgAlert("전송중 오류가 발생했습니다.");

}

,complete : function(xhr, textStatus) {

}

});

 

}
... 

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

....

<from name="MsgFrom" id="MsgFrom" onsubmit="return false;" method=get>

<input type="hidden" name="smsType" value="etc">

<dl class="send">

<dt><a href="javascript:initSms()"><img src="/btn/bt_clear.gif" alt="초기화"></a><span class="byte_txt"><label id="byteCnt">0</label> / byte</span></dt>

<dd class="intxt">

<textarea id="smsText" name="smsText" ></textarea>

</dd>

</dl>

<dl>

<dt>

<a id="addHpBtn" href="javascript:addHpNum();"><img src="/btn/bt_add.gif" alt="추가"></a>

<a href="javascript:modifyHpNum();"><img src="/btn/bt_update.gif" alt="수정"></a>

</dt>

<dd >

<table border="0" cellpadding="0" cellspacing="0" width="126">

<colgroup><col width="30"><col width="96"></colgroup>

<tr>

<th>순번</th>

<th>수신번호</th>

</tr>

</table>

<div class="box_scrl">

<table id="hpTable" border="0" cellpadding="0" cellspacing="0" width="126">

<colgroup><col width="30"><col width="96"></colgroup>

<tr id="hp1" >

<td class="num">1</td>

<td><input style="ime-mode:disabled" class="inputHpNum" type="text" value="<%=hpNo %>"><a href="#"><img src="/btn/bt_x.gif" alt=""></a></td>

</tr>

</table>

</div>

<div class="btn"><a href="javascript:sendMsg()"><img src="/btn/bt_send.gif" alt="발송하기"></a></div>

</dd>

</dl>

</form>

....

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

public ActionForward execSend(

BaseActionMapping mapping,

BaseValidatorForm form,

HttpServletRequest request,

HttpServletResponse response)

throws Exception {

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

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

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

JSONArray arrJson = JSONArray.fromObject(smsjsonPara);

SmsDto[] dtos = new SmsDto[arrJson.size()]; 

for(int i=0 ; i<arrJson.size() ; i++) {

dtos[i] = (SmsDto)net.sf.json.JSONObject.toBean(arrJson.getJSONObject(i), SmsDto.class);

dtos[i].setSmsMsg(smsText);

dtos[i].setSmsType(smsType); // 소분류 코드

}

int resCnt = this.mgt.sendMessage(dtos);

// 저장결과 전송

JSONObject obj = new JSONObject();

obj.put("sendResult", String.valueOf(resCnt));

response.setContentType("text/html;charset=UTF-8");

PrintWriter pw = response.getWriter();   

pw.write(obj.toString());

pw.close();    

return null;

}

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