Expressjs、Twitter Bootstrap、BackBonejsについて学び始めています。コマンドラインツールを使用して基本的なExpressjsアプリを作成し、サインインフォームにindex.htmlを追加しました。ユーザーがイベントが添付されている[サインイン]ボタンをクリックすると、フォーム情報を取得して'/ login'ルートにajax呼び出しを行いますが、機能しません。
ここに必要なファイルのリスト:
ご協力ありがとうございました。
Expressjs、Twitter Bootstrap、BackBonejsについて学び始めています。コマンドラインツールを使用して基本的なExpressjsアプリを作成し、サインインフォームにindex.htmlを追加しました。ユーザーがイベントが添付されている[サインイン]ボタンをクリックすると、フォーム情報を取得して'/ login'ルートにajax呼び出しを行いますが、機能しません。
ここに必要なファイルのリスト:
ご協力ありがとうございました。
問題は、それがデフォルトの動作であり、他の方法で行うように指示されていないため、フォームがまだリダイレクトを介して送信していることです。また、リダイレクトが原因で、ブラウザはAjaxリクエストを中止しています。
リダイレクトを防ぐには、の.submit()
イベントにバインドして、次<form>
を使用する必要がありますevent.preventDefault()
。
$(document).ready(function () {
$('#login-form').submit(function (e) {
e.preventDefault();
});
});
ボタンをクリックするだけでなく、他のアクションを介して送信できる多くのブラウザー(たとえば、フォーカスがフォーカスされているときに押す)ではなく、Ajaxにこのイベントを使用することも価値があり.click()
ます。<button>
type="submit"
Enter<input type="text">
$(document).ready(function () {
$('#login-form').submit(function (e) {
e.preventDefault();
var _login = $('#login').val(),
_password = CryptoJS.SHA512($('#password').val()),
_remember = $('input:checkbox:checked').val() ? 1 : 0;
// etc.
});
});
1つは、ボタンのクリックによるデフォルトのアクションを防ぐ必要があります。
$('#btn-login').click(function () {
// ...
});
// should accept the passed event and `prevenDefault`, like...
$('#btn-login').click(function (e) {
e.preventDefault();
// ...
});