0

そのため、コードに問題があるようです。今、私はAJAXとjqueryの学習を始めたばかりなので、非常に新しいです。サイトの仕組みは次のとおりです。

ユーザーが [ログイン] ボタンをクリックすると、ユーザー名とパスワードを入力するフォームがボタンの下に表示されます。ユーザーがログインをクリックすると、私のajaxスクリプトがログインを処理し、アバターを更新して、ログインしていることを認識します。その後、ログアウトしたいときにログアウトをクリックすると、問題なくログアウトします。

私が抱えている問題は、ログイン/ログアウトプロセスを実行すると、ページを更新しないとフォームを再度表示できないことです。

理にかなっているといいのですが=/これが私が持っているコードです:

<script src="http://code.jquery.com/jquery-1.10.2.min.js" type="text/jscript"></script>
<script>
  $(function () {
    $('form').on('submit', function (e) {
      $.ajax({
        type: 'post',
        url: 'loginsystem/login.php',
        data: $('form').serialize(),
        success: function () {
            $("#loginForm").slideUp('slow');
            $("#playerFace").load('ajaxPHPScripts/getUserAvatar-100px.php');
            $("#loginLogout").load('ajaxPHPScripts/loginLogoutButton.php');
        }
      });
      e.preventDefault();
    });
  });
function doSomething() {
    $.ajax({
        type: 'get',
        url: 'loginsystem/logout.php',
        success: function () {
            $("#playerFace").load('ajaxPHPScripts/getUserAvatar-100px.php');
            $("#loginLogout").load('ajaxPHPScripts/loginLogoutButton.php');
        }
      });
}
$(document).ready(function(){
    $("#loginForm").hide();
  $("#loginbtn").click(function(){
    $("#loginForm").slideToggle('slow');
  });
});
$(document).ready(function() {
    $("#removeLoginForm").click(function(){
        $("#loginForm").slideUp('slow');
    });
});
</script>

htmlの場合：

<div id="sidebar">
            <div id="sidebarinner">
                <div id="sidebarInnerInner">
                    <div id="playerAvatar">
                        <table width="100%" border="0" cellspacing="0" cellpadding="0">
                          <tr>
                            <td style="width:100px;" id="playerFace"><img src="https://minotar.net/avatar/steve/100"></td>
                            <td style="text-align:center;"><?php ServerPing(); //pings to see if server is online?></td>
                          </tr>
                        </table>
                    </div>
                    <div id="joinAndLog">
                        <table width="100%" border="0" cellspacing="0" cellpadding="0" style="text-align:center; height:100%;">
                            <tr>
                                <td style="width:50%;" id="loginLogout"><?php LoginOrLogout(); ?></td>
                                <td style="width:50%;"><?php SignupOrManageAcc(); ?></td>
                            </tr>
                        </table>
                    </div>

                    <div id="loginForm">
                        <form class="sideForm" id="testform" style="text-align:center;  margin-bottom:10px;"> 
                            <input type="text" id="name" name="username" value="" placeholder="Username..."/> 
                            <br />
                            <input type="password" id="pass" name="password" value="" placeholder="Password..."/> 
                            <br />
                            <input id="submit" type="submit" name="submit" value="Login" style="width:25%; cursor:pointer;" /> 
                            <input type="reset" name="" value="Cancle" id="removeLoginForm" style="width:25%; cursor:pointer;" />
                            <br />
                            <!--a href="#" style="padding:0px; margin:0px;">Forgot Password</a-->
                        </form> 
                     </div>
</div>
4

3 に答える 3

0

更新されたコード:

$(document).ready(function(){
 $("#loginForm").hide();
 $("#loginbtn").on('click',function(){ // use .on() method
 $("#loginForm").slideToggle('slow');
});
});
$(document).ready(function() {
 $("#removeLoginForm").on('click',(function(){ // use .on() method
 $("#loginForm").slideUp('slow');
});
});
于 2013-10-15T05:05:06.437 に答える