데이터베이스에서 UPDATE 문을 수행하기 위해 "변경"버튼을 클릭하고 다른 JSP 페이지로 양식 데이터를 보내려고합니다. 어떤 이유로 나는 "햄"경고가 팝업되지 않기 때문에 AJAX 호출과 함께 click() 함수를 실행하는 "업데이트"id 버튼을 얻을 수 없습니다. 죄송합니다. 여러 가지를 시도했기 때문에 스크립트 태그에서 여러 가지 주석 처리 방법을 주석 처리했습니다. 누군가가 나를 도와 줄 수 있습니까?내 AJAX 게시물 요청이 어떻게 작동하지 않습니까?
<!DOCTYPE html>
<head>
<script src="/.jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
<script src="http://code.jquery.com/jquery=latest.min.js" type="text/javascript">
var getUrlParameter = function getUrlParameter(sParam) {
var sPageURL = decodeURIComponent(window.location.search.substring(1)),
sURLVariables = sPageURL.split('&'),
sParameterName,
i;
for (i = 0; i < sURLVariables.length; i++) {
sParameterName = sURLVariables[i].split('=');
if (sParameterName[0] == sParam) {
return sParameterName[1] == undefined ? true : sParameterName[1];
}
}
};
$(document).ready(function() {
var key = getUrlParameter("key");
});
$(form).submit(function() {
if (-1 == this.action.indexOf('register')) {
var jForm = $(this);
$.post(this.action, $(this).serialize(), function(data) {
if (data.status == 'SUCCESS') {
jForm[0].action = data.redirectUrl;
jForm.submit();
}
return false;
}
}
});
window.onload = function() {
document.getElementById("submit").onclick = function() {
location.href = "/View.jsp";
}
}
window.onload = function() {
document.getElementById("update").onclick = function() {
location.href = "/View.jsp";
}
}
$(document).ready(function() {
$('#update').on('click', function(e) {
alert('ham');
$.ajax({
type: "post",
url: "change.jsp",
data: $("#form").serialize(),
success: function(msg) {
alert(msg.data);
},
error: function(xhr, ajaxOptions, thrownError) {
alert(xhr.status);
alert(thrownError);
}
});
$(document).ready(function() {
function click() {
alert('ham');
$.ajax({
type: "post",
url: "change.jsp",
data: $("#form").serialize(),
success: function(msg) {
alert(msg.data);
},
error: function(xhr, ajaxOptions, thrownError) {
alert(xhr.status);
alert(thrownError);
}
});
window.location.href = "change.jsp";
return false;
}
});
/*function validateForm(){
var x=document.forms["insert"]["ID"].value;
alert(x.len());
if(x==null||x==""){
alert("ID must be filled out");
return false;
}
}*/
</script>
</head>
<body>
...
<form id="myForm" action="register" method="post" name="insert">
ID:
<input type="text" name="ID" required value="<%=id%>" />
<br/> RHINO:
<input type="text" name="rhino" required value="<%=rhino%>" />
<br/> OX:
<input type="text" name="ox" required value="<%=ox%>" />
<br/> HORSE:
<input type="text" name="horse" required value="<%=horse%>" />
<br/>
<input type="submit" value="Submit" id="submit" />
<!--<input type="submit" value="Update" id="change"/>-->
<button id="update" onclick="return click()">Change</button>
</form>
...
</body>
</html>
약간 엉망입니다. 다중 docment.ready 및 window onload 함수. 때로는 서로 보입니다. document.ready 내에 있어야하는 일부 항목 (예 : 제출자 핸들러)이 아닙니다. 또한 꽤 다른 비트의 복제본 인 것으로 보이는 코드입니다. 아래 답변에서 알 수 있듯이 거의 확실하게 범위 지정 문제를 제시합니다. 모든 것을 하나의 document.ready로 통합하여 시작할 수 있습니다. 중복을 제거한 다음 다시 시도하십시오. 마치 당신이하고있는 일을 실제로 이해하지 않고서도 기분이 좋아지면 document.ready 등을 추가하는 것처럼 보입니다. – ADyson
@ sundance91 : 질문을 훼손하거나 기존 응답을 무효화하지 마십시오. 새로운 질문이 있으면 새로운 질문으로 게시하십시오. 또한 이것을 변경 한 질문은 본질적으로 스택 오버플로 형식에서 확인할 수 없음을 유의하십시오. 그것은 너무 광범위했고 인터넷에서 사용 가능한 자습서의 끝없는 수에 의해 대답 될 것입니다. – David