以下の ajax は、chrome、IE、opera、safari で完全に動作します。しかし、どういうわけかfirefoxでは機能しません。参照エラーと表示され、イベントが定義されていません。return false の代わりに event.preventDefault() を使用してみましたが、確かに運が悪いです。送信ボタンをクリックすると、firefox ではページが loginCheck.php にジャンプし、成功を示します。しかし、それは私が意図した方法ではありません。メッセージ「成功」は、別のページにジャンプして別のページにメッセージを表示するのではなく、同じページ自体に返される必要があります。
フォームは次のとおりです。
<form id="loginForm" class="ajax" action="ajax/loginCheck.php" style="padding-left: 10px;" method="post">
Username: <br/>
<input name="username" class="required" type="text"> <br/>
<span class="small">
<a class="mouseOver forgot" href="include/recover.php?mode=u_name">Forget username ?</a>
</span><br/>
Password: </br>
<input name="password" class="required" type="password"> <br/>
<span class="small">
<a class="mouseOver forgot" href="include/recover.php?mode=u_password">Forget password ?</a>
</span><br/>
<input type="submit" class="button" value="sign in">
//when login button is clicked
(function(){
$('form.ajax').on('submit' , function(){
//alert('about to pass data');
var that = $(this),
url = that.attr('action'),
type = that.attr('method'),
data = {}; //declaration of data of array type
that.find('[name]').each(function(index, value){
var that = $(this),
name = that.attr('name'),
value = that.val();
data[name] = value;
});
$.ajax({
url: url,
type: type,
data: data,
success: function(response){ //code to run if request success
var result = $.trim(response);
console.log(response);
if(result == "success"){
$('#interaction').load('interaction.php'); //load logout icong
$('#rightbar').load('rightbar.php'); //load user panel
$('.loginCheck').html("");
}else{
$('.loginError').show();
$('.loginError').html(response);
}
}
});
return false;
});
})();