0
"変更"ボタンをクリックして、データベース内でUPDATEステートメントを実行するためにフォームデータを別のJSPページに送信しようとしています。なんらかの理由で、「ハム」アラートがポップアップしないので、AJAXコールでclick（）関数を実行するための「更新」idボタンを取得できません。申し訳ありませんが、複数のものを試してみたので、スクリプトタグで複数の方法をコメントアウトしました。誰かがこれで私を助けることができるだろうか？次のように現在のJSPページが見えます：私の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内にあるべきものはありません（例えば、送信ハンドラ）。他のビットとほぼ同じように見えるコードもあります。以下の答えが示唆しているように、あなたにスコープの問題を与えることはほぼ確実です。すべてを1つのdocument.readyにまとめることができます。開始するには、複製を削除してから、もう一度やり直してください。実際にあなたが何をやっているのか理解していなければ、document.readyなどを追加するだけのようです。 – ADyson
@ sundance91：質問を破棄して既存の回答を無効にしないでください。新しい質問がある場合は、新しい質問として投稿してください。また、これを変更した質問は基本的にスタックオーバーフローの形式では答えられないことに注意してください。それはあまりにも広すぎて、インターネットで利用可能なチュートリアルの数が無限に多くなると答えられます。 – David