jQueryのUIのDialogでページ遷移

質問

jQueryのUIのDialogを使用してログイン画面を作成しています。
http://stacktrace.jp/jquery/ui/widgets/dialog.html

何とかjQueryのUIのDialogを使用してログイン画面を表示する事ができましたが...

下記がソースコードです。

$(document).ready(function(){
　　$("#dialog:ui-dialog").dialog("destroy");

　　$("#dialog-form").dialog({
　　　　autoOpen: false,
　　　　height: "auto",
　　　　width: 350,
　　　　modal: true,
　　　　buttons: {
　　　　　　"ログイン": function() {

　　　　　　　　↑
　　　　　　ここに記述
　　　　　　　　↓

　　　　　　}
　　　　}
　　});

$("#dialog-form").dialog("open");
});

<DIV id="dialog-form" title="ログイン">
<FORM method="post" action="login.php">
<FIELDSET>
<LABEL for="username">ユーザ名</LABEL>
<INPUT type="text" name="txtUsername" id="username" class="text ui-widget-content ui-corner-all" />
<LABEL for="password">パスワード</LABEL>
<INPUT type="password" name="txtPassword" id="password" value="" class="text ui-widget-content ui-corner-all" />
</FIELDSET>
</FORM>
</DIV>

行いたい事は下記の通りです。

1.各テキストボックスの入力チェック
2.OKの場合はページ遷移(login.php)して
　※login.htmlで入力された値(ユーザ名、パスワード)をlogin.phpに受け渡す。
3.入力エラーの場合はエラーダイアログを表示。
　エラーダイアログのOKボタンをクリックして再度、ログイン入力。

箇条書きで申し訳ありませんがどのように記述すればいいのでしょうか。
また上記の処理を実現するのに参考になるサイトがありましたら教えて下さい。
情けないんですがここ1週間、これで悩んでいます。
藁をもつかむ思いで...
些細な事でも何でも構いませんので宜しくお願いします。

回答No.1

H240S18B73 · ベストアンサー

$.post("login.php",{ユーザー名,パスワード},function(data){
data=(jsonかなんかで返ってきたデータを解読)
switch(data[状態の変数]){
case パスワード不一致:
(エラー内容を表す文言を表示させるとかの処理)
break;
case ログイン成功:
(クッキーにトークン発行されたか確認とかしてページ遷移)
break;
}
})

みたいなカンジの処理になるんじゃないでしょうか

補足

回答ありがとうございます。

せっかく説明していただいたんですが私の勉強不足で理解ができませんでしたので試しに下記の部分を下記のように記述してみてpostされるのかと思ってブラウザで実行してみましたがページ遷移しませんでした。

buttons: {
　　　　　　"ログイン": function() {
　　　　　　　　$.post("login.php");
　　　　　　}
　　　　}
※login.htmlと同じ場所にlogin.phpを作成しています。

申し訳ありませんがもう少し私にお力を貸していただけませんでしょうか。
宜しくお願いします。

回答No.3

H240S18B73

なんかいろいろと勘違いしてたっぽいので書き直し

ボタンが押されたら
$("#dialog-form form").submit()

してやりゃいいだけですね

回答No.2

H240S18B73

$.postはAjaxの関数です
ページ遷移はしません

login.phpがやるのは送られてきたパスワードとユーザー名をDBに照らし合わせて
それが登録されたものかどうかの判定をしてクッキーなりトークンを発行して
ログインできたかできなかったかの返答を返すまで

ページ遷移はlogin.phpが返答を返してからです

それでちゃんとログイン成功してクッキーにトークンが入ってれば
ページ遷移自体は普通にlocation.href="http://......"でもしてやればいいかと
できればユーザーがアクセスしようとして「ログインが必要です」と
突っ返されたもとのところに飛ばしてあげるのが理想

あとログインOKなのにクッキーが入ってないようなら
『クッキーを有効にしてください』とかメッセージを表示するのが親切