jsp에서 controller로 데이터 ajax로 보내기

form을 submit하면 form에있는 모든 데이터를 넘겨준다.

하지만 password_check는 필요하지 않고 VO에 없어서 에러가 발생했다.

이걸 해결하기 위해서 ajax를 통해 필요한 데이터만 담아서 보내려고 했으나 에러발생...

@ResponseBody를 통해서 jsp에서 controller에서 데이터 넘겨줄때 JSON형태로 줘야 하는데 그냥 보내서 그런 문제였다.

JSON형태로 만들어줘서 ajax에 담았다.

var data2 = {userId: userId , name: name, password: password};

var data = JSON.stringify(data2);

<form name="memberinsert" id="memberinsert" method="post" action="<c:url value='/join/memberinsert'/>">

<table width="550" align="center" border="1" bordercolor="ADD8E6" cellpadding="5">

<tr>

<td height="30" align="center" bgcolor="#FFDEAD">이름</td>

<td bgcolor="#E0FFFF"><input type="text" size="10" id="name" name="name" maxlength="10"></td>

</tr>

<tr>

<td height="30" align="center" bgcolor="#FFDEAD">아이디</td>

<td bgcolor="#E0FFFF"><input type="text" size="10" id="userId" name="userId" maxlength="10"></td>

</tr>

<tr>

<td height="30" align="center" bgcolor="#FFDEAD">비밀번호</td>

<td bgcolor="#E0FFFF"><input type="password" id="password" name="password" size=12 maxlength="12"></td>

</tr>

<tr>

<td height="30" align="center" bgcolor="#FFDEAD">비밀번호 확인</td>

<td bgcolor="#E0FFFF"><input type="password" id="password_check" name="password_check" size=12 maxlength="12"></td>

</tr>

<tr>

<td colspan="2" height="30" align="center" bgcolor="#FFDEAD"> 

<!-- <a href="void(0)" onclick="$('#memberinsert').getElementById('memberinsert').submit();return false;" >가입하기</a> -->

<a href="void(0)" onclick="$('#memberinsert').closest('form').submit();return false;" >가입하기</a> 

<input type="reset" value="리셋하기" onclick='init()'>

<input type="button" id="back" value="뒤로가기" onclick="javascript:location.href='/join/agreement';"></td>

</tr>

</table>

</form>

<a href="void(0)" onclick="$('#memberinsert').closest('form').submit();return false;" >가입하기</a>

submit은 할 수 없고 submit처럼 동작하기위해 return false;를 통해

a태그의 기능을 없애고 onclick으로 function을 호출해서 ajax형태로 원하는 데이터만 골라 보냈다.

var userId = document.getElementById('userId').value;

var name = document.getElementById('name').value;

var password = document.getElementById('password').value;

$.ajax({

type : "POST",

url : url,

data :data

/*{

"userId" : userId,

"name" : name,

"password" : password,

}*/,

cache : false,

contentType : "application/json;charset=UTF-8",

beforeSend : function (xhr)

{

xhr.setRequestHeader(header, token); 

},

success :function(data){

alert("회원가입 완료");

window.location.replace("<c:url value='/main'/>");

},

error:function(request,status,error){

alert("code:"+request.status+"\n"+"message:"+request.responseText+"\n"+"error:"+error);

}

});

데이터 안보내져서 하루종일 삽질했다!