ログインフォームの例 (5 番)を試す:
クリックしてデータを確認すると、ページがリロードされるだけです。私が理解している限りでは、ajax はまさにこのことを回避するはずです。
明確化していただければ幸いです。比較的単純な問題だと思います。
文字通り、コードをコピーして貼り付けただけです。「mail.php」は現在実際には何もしていませんが、何よりもまず、#login_name と #login_pass の長さが 1 未満の場合に発生するはずの「#login_error」をトリガーしようとしています。現状では、ページが更新されるだけです。
それにもかかわらず、参照用のコード: js -
$(document).ready(function() {
$("#tip5").fancybox({
'scrolling' : 'no',
'titleShow' : false,
'onClosed' : function() {
$("#login_error").hide();
}
});
$("#login_form").bind("submit", function() {
if ($("#login_name").val().length < 1 || $("#login_pass").val().length < 1) {
$("#login_error").show();
$.fancybox.resize();
return false;
}
$.fancybox.showActivity();
$.ajax({
type : "POST",
cache : false,
url : "mail.php",
data : $(this).serializeArray(),
success: function(data) {
$.fancybox(data);
}
});
return false;
});
});
html -
<a id="tip5" href="#login_form">test</a>
<div style="display:none">
<form id="login_form" method="post" action="">
<p id="login_error">Please, enter data</p>
<p>
<label for="login_name">Login: </label>
<input type="text" id="login_name" name="login_name" size="30" />
</p>
<p>
<label for="login_pass">Password: </label>
<input type="password" id="login_pass" name="login_pass" size="30" />
</p>
<p>
<input type="submit" value="Login" />
</p>
<p>
<em>Leave empty so see resizing</em>
</p>
</form>
</div>