jQuery 통하여 Ajax 구현
jQuey의 Ajax 속성
url : request해서 데이터 전송할 url
data : 서버로 전송할 데이터의 parameter 설정값
datatype : 서버의 response 데이터의 형식(xml, text, json, html 등) 지정 값
- 디폴트시 auto
success(data) : 통신 성공 시, 호술되는 함수 지정값. 파라미터로 response 데이터(data)를 받음
error : 통신 실패 시, 호출되는 함수 지정값. 역시 파라미터로 response 데이터(data)를 받음
complete : 통신 성패 여부 관계 없이 통신 실행완료 후 실행되는 함수 지정값
async : 비동기(true)/동기(false) 지정
3.서버 기본 전송 값에서 결과로 str 받아처리하기
<script>
// 더하기 버튼을 누르면 첫번째 숫자의 값과 두번째 숫자의 값을 ajax를 통해 jQuery3.do쪽으로 전송하는 코드 작성
$('#plusBtn').click(function(){
var n1 = $('#firstNum').val();
var n2 = $('#secondNum').val();
$.ajax({
url: 'jQueryAjax3',
data: {n1:n1, n2:n2},
type: 'post',
datatype: 'text',
success: function(data){
console.log('전송 성공');
console.log("받아온 data값 = " +data);
},
error: function(data){
console.log('전송 실패');
},
async: true
});
});
</script>
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
int n1 = Integer.parseInt(request.getParameter("n1"));
int n2 = Integer.parseInt(request.getParameter("n2"));
int sum = n1 + n2;
response.getWriter().print(sum);
}
4. 객체형태 데이터를 서버에 전송하고 서버에서 처리하기
<h3>4. Object형태의 데이터를 서버에 전송, 서버에서 데이터 처리 후 서버 console로 출력</h3>
<!-- 여기서 말하는 콘솔은 이클립스 콘솔을 의미함 -->
학생1 : <input type="text" id="student1"><br>
학생2 : <input type="text" id="student2"><br>
학생3 : <input type="text" id="student3"><br>
<button id="studentTest">결과확인</button>
<script>
// 결과확인 버든을 누르면 학생1, 학생2, 학생3의 이름이 jQuery4.do 쪽으로 전송
// 전송된 학생들의 이름은 서버의 console창에 아래 예시와 같이 출력되고
// 화면에서는 "전송 성공"이라는 알람창이 뜸
// console 출력 예시 : 수업을 들을 하생은 ooo,xxx,ㅁㅁㅁ입니다
$('#studentTest').on('click',function(){
var student1 = $('#student1').val();
var student2 = $('#student2').val();
var student3 = $('#student3').val();
$.ajax({
url:'jQueryAjax4',
data: {student1:student1, student2:student2, student3:student3},
type: 'post',
/* datatype: 'text', */
success:function(data){
alert('전송 성공');
},
error: function(data){
alert('fail');
},
complete: function(){
alert('another func');
},
});
});
</script>
request.setCharacterEncoding("UTF-8");
String s1 = request.getParameter("student1");
String s2 = request.getParameter("student2");
String s3 = request.getParameter("student3");
System.out.printf("이름 출력 %s, %s, %s",s1,s2,s3);
