わかりましたので、jquery と従来の ASP を使用して、自分のサイトから新しいログイン フォームを作成しようとしています。現在、非表示に設定されているドキュメントに含まれる div があり、ユーザーがログイン リンクを選択すると、ページをフォームに重ねて div がフェードインします。ユーザーが送信をクリックすると、ページが POST され、div オーバーレイはなくなります。それよりももっとスムーズにしたいです。そのため、ユーザーが送信をクリックすると、jquery は ajax などを使用してバックグラウンドでデータベース接続ページに投稿し、その ASP から応答テキストを取得して、ログインの成功またはエラー ラベルの誤りを表示します。
サイトでクラシック ASP を使用して、前回のログインで送信時にフォーム データを取得しています。次に、DB をチェックして、入力された内容が一致するかどうかを確認します。
jQuery でこれらすべてを処理し、DB 接続を含む ASP ページにバックグラウンドでクエリまたはその他のメソッドを介して値を送信して、送信がクリックされたときにページがリロードされないようにしたいと考えています。
私はたくさんの例を見てきましたが、うまくいくようには思えません。
これまでの作業機能で見るべきFIDDLEがあります。
どんな助けでも大歓迎です、前もって感謝します。
<table cellspacing="0" cellpadding="0" width="900" >
<tr>
<a href="index.asp" class="linkheader">Home</a> |
<a href="index1st.asp">1st</a> |
<a href="index2nd.asp">2nd</a> |
<a href="index3rd.asp">3rd</a> |
<a href="index4th.asp">4th</a> |
<a href='#' id='login' class='linkheader'>Log In</a></td>
</tr>
</table>
<!-- blur_login is transparent overlay. starts as hidden untill link is selected -->
<div id="blur_login">
<!-- show_login is container for login form -->
<div id="show_login">
<a class="OKclose" href="#" >[ Close ]</a>
<form method="" id="getin">
<p><label for="Username">Username</label><br />
<input name="Username" id="users" type="text" size="14" maxlength="14" autocomplete="off" tabindex="1"/>
</p>
<p><label for="last_name">Password</label><br />
<input name="last_name" type="password" size="14" maxlength="14" autocomplete="off" tabindex="2" /><br />
<label for="errors"></label>
</p>
<p><input type="submit" id="send" value="Log In →"></p>
</form>
</div>
</div>
</p>
$(document).ready(function() {
$(window).bind("resize", function(){
$("#blur_login").css("height", $(window).height());
$("#blur_logout").css("height", $(window).height());
});
//Adjust height of overlay to fill screen when page loads
$("#blur_login").css("height", $(document).height());
$('#login').click(function(a){
$("#blur_login").fadeIn();
// Page focus on fadein is the username input
$('#users').focus();
a.preventDefault;
return false;
});
$('#logout').click(function(b){
$("#blur_logout").fadeIn();
b.preventDefault;
return false;
});
$('#send').click(function(c){
//AJAX form submit here
});
// Functions for login form
var $submit = $("input[type=submit]"),
$inputs = $('input[type=text], input[type=password]');
// Checks if fields are empty, if so then disable loginbutton
function checkEmpty() {
return $inputs.filter(function() {
return !$.trim(this.value);
}).length === 0;
}
// Enables the submit button when characters have been entered in each field
$inputs.on('keyup blur', function() {
$submit.prop("disabled", !checkEmpty());
}).keyup(); // trigger any one
// When the close link is selected the window will fade out
$(".OKclose").click(function(d){
$("#blur_login").fadeOut();
d.preventDefault;
return false;
});
});