「成功」時にリダイレクトする次の JavaScript コードの何が問題になっていますか?
$('#recordUser').click(function () {
$.ajax({
type: 'POST',
url: 'api/RecordUser',
data: $("#recordUserForm").serialize(),
dataType: 'json',
success: function (userEmail) {
var newUrl = "/Home/AnotherPage?email=" + userEmail.Email;
$(location).attr('href', newUrl);
//I have also tried following ways to redirect:
//window.location.href = "/Home/AnotherPage?email=" + userEmail.Email;
//window.location = "/Home/AnotherPage?email=" + userEmail.Email;
//window.location.replace(newUrl);
},
error: function (xhr, status, err) {
console.log(xhr);
}
});
});
//#recordUser is a button inside a form with method="post"
フォームのHTML :
<form id="recordUserForm" accept-charset="UTF-8" method="post">
<div class="...">
<input id="recordUserEmail" class="span6" name="Email" type="text">
</div>
<button class="..." id="recordUser">Submit</button>
</form>
Chrome と Firefox でこれをテストしましたが、両方でリダイレクトは発生しません。サーバーコードが正常に動作していることを確認しました。
Chrome で JavaScript をデバッグ モードで実行すると、リダイレクト コマンドでページがリダイレクトされますが、デバッガを閉じるとリダイレクト コマンドが機能しなくなります。
HTMLフォームから「メソッド」属性を削除すると、URLにクエリ文字列が表示されますが、ページは同じ場所に残ります。たとえば、私が localhost:80 にいてフォームを送信した場合、URL は予想される newUrl ではなく localhost:80?email=email に変更されます。奇妙なことに、これをデバッグで実行すると、期待どおりに動作します。なんで？
誰かが間違いを指摘し、上記のコードが Chrome デバッグ モードでのみ動作する理由を指摘できれば、感謝/幸せでしょうか? また、「エラー」コールバックで有用なエラー メッセージを出力する方法を知りたいですか? 役立つとは、エラーの原因 (例: 例外メッセージ、スタック トレースなど) を示すものであり、手動で挿入する必要があるものではありません。
更新 1
ボタンのhtmlを次のように変更すると
<input class="..." id="recordUser" value="Submit" type="button"/>
スクリプトでクリックメソッドを使用すると、正常に動作します。
buttonそれを機能させる方法と、スクリプトがChromeデバッグモードで機能していた理由を教えてくれる回答をいただければ幸いです。
更新 2
typeUpdate1 を投稿しているときに、 の htmlに がないことに気付きましたbutton。たぶん、私はそれが としてマークされているのでbutton、型を指定するのは冗長になると思っていましたが、そうではありません。
<button type="button" class="..." id="recordUser">Submit</button>
元の JavaScript を使用した上記のマークアップは、期待どおりに機能するようになりました。それで、唯一の質問は、なぜChromeデバッグモードで機能したのかということだと思いますか?