더 이상 고민하지 않고 구체적인 내용은 다음과 같습니다.
//js
<script type="text/javascript"> function myBtn_f() { var cnt = $('#myCnt').val(); syncAjax('myAjax.html', { 'cnt' : cnt }, function(result) { if (100 == result.statusCode) { var data = result.lst; var $d = $('#myDiv'); alert("[" + data + "]"); for ( var i = 0; i < data.length; i++) { var input1 = $("<input type='text' name='input1' />"); input1.attr('value', data[i]); $d.append(input1); } } else { alert("error"); } }); } function syncAjax(myUrl, myData, sufn) { $.ajax({ url : myUrl, data : myData, type : 'post', dataType : 'json', cache : false, async : false, success : function(result) { if (result.statusCode == 200) { alert("会话超时,请重新登录!"); window.location.href = "index.jsp"; } else { if (sufn) sufn(result); } }, error : function(msg) { alert("error:" + msg); } }); }; </script>
//html
<tr> <td><input type="text" id="myCnt" /></td> <td><div id="myDiv"></div></td> </tr> <input id="myBtn" type="button" value="create" onclick="myBtn_f()" />
//백스테이지
@RequestMapping("myAjax") @ResponseBody public String myAjax( @RequestParam(defaultValue = "0", required = false) int cnt) { List<String> lst = new ArrayList<String>(); for (int i = 0; i < cnt; i++) { lst.add("no:" + i); } JSONObject result = new JSONObject(); result.put("statusCode", 100); result.put("lst", lst); return result.toString(); }
목록 데이터를 반환하고 입력 태그를 동적으로 생성하고 목록 데이터를 입력 태그에 할당하는 jQuery ajax 요청에 대한 모든 소개가 끝났습니다. 모두에게 도움이 되기를 바랍니다.