0

我有一个动态登录标题。2 个链接，登录/注册和个人资料/注销。

我有一个 php 类函数，用于检查是否登录并显示相关链接，它工作正常。

然后我转移到 ajax 登录，因为我不想刷新页面，登录框下拉并回滚。再次，它工作正常。

我注意到一个小问题，我的意思是非常烦人:)

登录后，新页面上的每一个页面刷新都会显示闪烁，其中“个人资料”变为“登录”，然后再次闪烁。它仅在页面加载时发生并且不会持续很长时间，但它不是很好。

有人可以帮我解决吗？我对 Ajax/jQuery 还很陌生，并且在这里的一些人的帮助下花了很长时间才使 ajax/jquery 部分首先起作用。

这是切换登录 div 的脚本

<script>
        window.onload = function(){
            $(function() {
                var loggedIn = <?php echo json_encode($general->loggedIn()); ?>;
                $("#loggedIn").toggle(loggedIn);
                $("#loggedOut").toggle(!loggedIn);
            });
        }
    </script>

谢谢

编辑：阿贾克斯

function validLogin(){

$('#error').hide();
var username = $('#username').val();
var password = $('#password').val();

if(username == ""){
    $('input#username').focus();
    return false;
}

if(password == ""){
    $('input#password').focus();
    return false;
}

var params = {username: username, password: password};
var url = "../loginProcessAjax.php";

$("#statusLogin").show();

$.ajax({
    type: 'POST',
    url: url,
    data: params,
    dataType: 'json',
    beforeSend: function() {
      document.getElementById("statusLogin").innerHTML= '<img src="../images/loginLoading.gif" /> checking...' ;
    },

    success: function(data) {

        $("#statusLogin").hide();

        if(data.success == true){

            $('#loggedIn').show();
            $('#loginContent').slideToggle();
            $('#loggedOut').hide();

        }else{
           // alert("data.message... " + data.message);//undefined
            $("#error").show().html(data.message);
        }

    },
    error: function( error ) {
        console.log(error);
    }
});
 }
4

3 回答 3

2

通过执行以下操作，使用 PHP 隐藏不需要的元素

<?php
$loggedIn = $general->loggedIn();
?>
... Some HTML

<div>
    <div id="loggedIn" <?php echo ( $loggedIn ? '' : 'style="display: none;"' ); ?>>
        .... Logged in stuff
    </div>
    <div id="loggedOut" <?php echo ( !$loggedIn ? '' : 'style="display: none;"' ); ?>>
        .... Logged Out Stuff
    </div>
</div>

<script>

    var loggedIn = <?php echo json_encode($loggedIn); ?>;

    $('#loginForm').submit(function() {
        ... Handle form submit
        ... When ajax returns true or false we can set loggedIn and then toggle the containers
    });

</script>
于 2013-07-23T21:01:19.577 回答
1 
// CSS-Stylesheet 
#loggedIn,
#loggedOut {display: none}

<script>
        $(document).ready(function() {
            var loggedIn = <?php echo json_encode($general->loggedIn()); ?>;     
            if (loggedIn == true) { // i can just guess here...
                $("#loggedIn").show();
            }
            else {
                $("#loggedOut").show();
            }
        });
</script>
于 2013-07-23T21:05:17.030 回答
0

三种可能的解决方案：

  • 如果script element放置在 内部body，请将其移动到head element。

  • 请改用以下脚本：

      $(document).ready(function () {
      'use strict';
      var loggedIn = <?php echo json_encode($general->loggedIn()); ?>;
      $('#loggedIn').toggle(loggedIn);
      $('#loggedOut').toggle(!loggedIn);
  });

  • 隐藏“登录”div使用中的两个链接，然后在使用中显示它们。有点脏，可能会起作用。$('#loggedIn
    a).hide();    window.onload event
    $('#loggedIn a).show();

于 2013-07-23T21:26:05.857 回答