javascript - 从注销按钮重定向后，网站不加载索引样​​式

标签 javascript php jquery

我有 index.php(获取登录表单)

login.php(登录脚本)

home.php(主站点)

logout.php(简单销毁并 header 到index.php)

我的问题是，当我按下 home.php 中的按钮时，它会将我发送到 logout.php，然后进一步发送到 index.php，它不会在 index.php 中加载我的样式，而只会给我一个无样式的 index.php除非我手动重新加载页面

在 home.php 中我得到:(删除了脚本，因为那里有很多东西)

<?php


session_start();

if(!isset($_SESSION['login_user'])){
	header("location: index.php");
}

				
?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>MY WEBSITE PAGE</title>
<style>
body {
    background-color: #1B1F2A;
    font-family: 'Roboto', sans-serif;
	color:white;
}

.pageone { 
	color:white;
	background-color:white;
	font-family: 'Open Sans', sans-serif;
	background: #092756;
	background: -moz-radial-gradient(0% 100%, ellipse cover, rgba(104,128,138,.4) 10%,rgba(138,114,76,0) 40%),-moz-linear-gradient(top,  rgba(57,173,219,.25) 0%, rgba(42,60,87,.4) 100%), -moz-linear-gradient(-45deg,  #670d10 0%, #092756 100%);
	background: -webkit-radial-gradient(0% 100%, ellipse cover, rgba(104,128,138,.4) 10%,rgba(138,114,76,0) 40%), -webkit-linear-gradient(top,  rgba(57,173,219,.25) 0%,rgba(42,60,87,.4) 100%), -webkit-linear-gradient(-45deg,  #670d10 0%,#092756 100%);
	background: -o-radial-gradient(0% 100%, ellipse cover, rgba(104,128,138,.4) 10%,rgba(138,114,76,0) 40%), -o-linear-gradient(top,  rgba(57,173,219,.25) 0%,rgba(42,60,87,.4) 100%), -o-linear-gradient(-45deg,  #670d10 0%,#092756 100%);
	background: -ms-radial-gradient(0% 100%, ellipse cover, rgba(104,128,138,.4) 10%,rgba(138,114,76,0) 40%), -ms-linear-gradient(top,  rgba(57,173,219,.25) 0%,rgba(42,60,87,.4) 100%), -ms-linear-gradient(-45deg,  #670d10 0%,#092756 100%);
	background: -webkit-radial-gradient(0% 100%, ellipse cover, rgba(104,128,138,.4) 10%,rgba(138,114,76,0) 40%), linear-gradient(to bottom,  rgba(57,173,219,.25) 0%,rgba(42,60,87,.4) 100%), linear-gradient(135deg,  #670d10 0%,#092756 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3E1D6D', endColorstr='#092756',GradientType=1 );
}

.td{
	color:white;
}

.th{
	color:white;
}
 
.widget {
    margin: 0 auto;
    width:15%;
    margin-top:50px;
    background-color: #222D3A;
    border-radius: 5px;
    box-shadow: 0px 0px 1px 0px #06060d;
 
}

#myStyle{
	color:white;
}

#willitwork2{
	color:white;
}
 
.header{
    background-color: #29384D;
    height:40px;
    color:#929DAF;
    text-align: center;
    line-height: 40px;
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;
    font-weight: 400;
    font-size: 1.5em;
    text-shadow: 1px 1px #06060d;
}

#chartContainer{
	<!--position: fixed;
	top: 0;
	right: 0;
	width:80%;
	height:80%; -->
	width: 75%;
	position: fixed;
	left: 47%;
	top: 15%;
	margin-left: -37.5%;
	
}
 
.chart-container{
    padding:0px;
}

canvas{
        width: 100% !important;
        max-width: 100%;
        height: auto !important;
		color: #ffffff;
    }
 
.shadow {
    -webkit-filter: drop-shadow( 0px 3px 3px rgba(0,0,0,.5) );
    filter: drop-shadow( 0px 3px 3px rgba(0,0,0,.5) );
}


</style>
<!--<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>-->
<link rel='stylesheet' href='stylesheets/normalize.css'>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/jquery-ui.min.js"></script>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script type="text/javascript" src="js/Chart.min.js"></script>
<script type="text/javascript">
</script>
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">

<link href="restive.css" media="all" rel="stylesheet" type="text/css" />
</head>
<body>
	 

	 
<div data-role="page" id="pageone" class="pageone">
  <div data-role="header" data-position="fixed">
    <h1>Bar & Tap Concept</h1>
  </div>

  <div data-role="main" class="ui-content">
  
    <div id="myStyle" style="margin: 0 auto; display: table;">
	<table id="people" border="0">
	<thead>
	<th colspan='11'>10 Latest Dispenses</th>
	</thead>
  <thead>
    <th>MasterNo.</th>
	<th>PourDatetime</th>
	<!--<th>PLU</th>-->
	<!--<th>Volume</th>-->
   <!-- <th>ReceiveDatetime</th> -->
 	<!--<th>DeviceID</th>-->
    <th>size</th>
	<!--<th>arm</th>-->
	<!--<th>Rack</th>-->
	<th>Name</th>
	<th>Department</th>
	<th>Price</th>
  </thead>
  <tbody>

  </tbody>
</table>

</div>
<div id="willitwork2">
	<table id="informations" border="0">
    <thead>
        <tr>
          <th></th>
            <th>Informations</th>                      
        </tr>
	</thead>
	<tbody>
   
    </tbody>
</table>
</div>
</div>
<div id='chartContainer'>
	<canvas id='myChart'>we</canvas>  
</div>
  <!-- this is the bottom menu dont ruin -->
  <div data-role="footer" data-position="fixed">
    <div data-role="navbar">
      <ul>
        <li><a href="#" onClick="recp('1')" data-icon="plus">More</a></li>
        <li><a href="#" onClick="recp('2')" data-icon="minus">Less</a></li>    
        <li><a href="#" onClick="recp('3')" data-icon="check">Like</a></li>
        <li><a href="#" onClick="recp('4')" data-icon="info">Information</a></li>
		<li><a href="logout.php" data-icon="delete">Log Out</a></li>
      </ul>
    </div>
  </div>
</div>
</body>
</html>

在 logout.php 中我得到:

session_start();
session_destroy();
$home_url = 'http://' . $_SERVER['HTTP_HOST'] . dirname($_SERVER['PHP_SELF']) . '/index.php';
header('Location: ' . $home_url);

在index.php我得到:

<?php
session_start(); // Starting Session
if(isset($_SESSION['login_user'])){
header("location: home.php");
}
?>
<!DOCTYPE html>
<html >
  <head>
  <meta name='viewport' content='width=device-width, initial-scale=1'>
    <meta charset='UTF-8'>
    <title>Login Form</title>
        <style>
      /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */
      @import url(http://fonts.googleapis.com/css?family=Open+Sans);
.btn { display: inline-block; *display: inline; *zoom: 1; padding: 4px 10px 4px; margin-bottom: 0; font-size: 13px; line-height: 18px; color: #333333; text-align: center;text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75); vertical-align: middle; background-color: #f5f5f5; background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6); background-image: -ms-linear-gradient(top, #ffffff, #e6e6e6); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6)); background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6); background-image: -o-linear-gradient(top, #ffffff, #e6e6e6); background-image: linear-gradient(top, #ffffff, #e6e6e6); background-repeat: repeat-x; filter: progid:dximagetransform.microsoft.gradient(startColorstr=#ffffff, endColorstr=#e6e6e6, GradientType=0); border-color: #e6e6e6 #e6e6e6 #e6e6e6; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); border: 1px solid #e6e6e6; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); cursor: pointer; *margin-left: .3em; }
.btn:hover, .btn:active, .btn.active, .btn.disabled, .btn[disabled] { background-color: #e6e6e6; }
.btn-large { padding: 9px 14px; font-size: 15px; line-height: normal; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }
.btn:hover { color: #333333; text-decoration: none; background-color: #e6e6e6; background-position: 0 -15px; -webkit-transition: background-position 0.1s linear; -moz-transition: background-position 0.1s linear; -ms-transition: background-position 0.1s linear; -o-transition: background-position 0.1s linear; transition: background-position 0.1s linear; }
.btn-primary, .btn-primary:hover { text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); color: #ffffff; }
.btn-primary.active { color: rgba(255, 255, 255, 0.75); }
.btn-primary { background-color: #4a77d4; background-image: -moz-linear-gradient(top, #6eb6de, #4a77d4); background-image: -ms-linear-gradient(top, #6eb6de, #4a77d4); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#6eb6de), to(#4a77d4)); background-image: -webkit-linear-gradient(top, #6eb6de, #4a77d4); background-image: -o-linear-gradient(top, #6eb6de, #4a77d4); background-image: linear-gradient(top, #6eb6de, #4a77d4); background-repeat: repeat-x; filter: progid:dximagetransform.microsoft.gradient(startColorstr=#6eb6de, endColorstr=#4a77d4, GradientType=0);  border: 1px solid #3762bc; text-shadow: 1px 1px 1px rgba(0,0,0,0.4); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.5); }
.btn-primary:hover, .btn-primary:active, .btn-primary.active, .btn-primary.disabled, .btn-primary[disabled] { filter: none; background-color: #4a77d4; }
.btn-block { width: 100%; display:block; }

* { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; -o-box-sizing:border-box; box-sizing:border-box; }

html { width: 100%; height:100%; overflow:hidden; }
  
body { 
	width: 100%;
	height:100%;
	font-family: 'Open Sans', sans-serif;
	background: #092756;
	background: -moz-radial-gradient(0% 100%, ellipse cover, rgba(104,128,138,.4) 10%,rgba(138,114,76,0) 40%),-moz-linear-gradient(top,  rgba(57,173,219,.25) 0%, rgba(42,60,87,.4) 100%), -moz-linear-gradient(-45deg,  #670d10 0%, #092756 100%);
	background: -webkit-radial-gradient(0% 100%, ellipse cover, rgba(104,128,138,.4) 10%,rgba(138,114,76,0) 40%), -webkit-linear-gradient(top,  rgba(57,173,219,.25) 0%,rgba(42,60,87,.4) 100%), -webkit-linear-gradient(-45deg,  #670d10 0%,#092756 100%);
	background: -o-radial-gradient(0% 100%, ellipse cover, rgba(104,128,138,.4) 10%,rgba(138,114,76,0) 40%), -o-linear-gradient(top,  rgba(57,173,219,.25) 0%,rgba(42,60,87,.4) 100%), -o-linear-gradient(-45deg,  #670d10 0%,#092756 100%);
	background: -ms-radial-gradient(0% 100%, ellipse cover, rgba(104,128,138,.4) 10%,rgba(138,114,76,0) 40%), -ms-linear-gradient(top,  rgba(57,173,219,.25) 0%,rgba(42,60,87,.4) 100%), -ms-linear-gradient(-45deg,  #670d10 0%,#092756 100%);
	background: -webkit-radial-gradient(0% 100%, ellipse cover, rgba(104,128,138,.4) 10%,rgba(138,114,76,0) 40%), linear-gradient(to bottom,  rgba(57,173,219,.25) 0%,rgba(42,60,87,.4) 100%), linear-gradient(135deg,  #670d10 0%,#092756 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3E1D6D', endColorstr='#092756',GradientType=1 );
}
.login { 
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -150px 0 0 -150px;
	width:300px;
	height:300px;
}
.login h1 { color: #fff; text-shadow: 0 0 10px rgba(0,0,0,0.3); letter-spacing:1px; text-align:center; }

input { 
	width: 100%; 
	margin-bottom: 10px; 
	background: rgba(0,0,0,0.3);
	border: none;
	outline: none;
	padding: 10px;
	font-size: 13px;
	color: #fff;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
	border: 1px solid rgba(0,0,0,0.3);
	border-radius: 4px;
	box-shadow: inset 0 -5px 45px rgba(100,100,100,0.2), 0 1px 1px rgba(255,255,255,0.2);
	-webkit-transition: box-shadow .5s ease;
	-moz-transition: box-shadow .5s ease;
	-o-transition: box-shadow .5s ease;
	-ms-transition: box-shadow .5s ease;
	transition: box-shadow .5s ease;
}
input:focus { box-shadow: inset 0 -5px 45px rgba(100,100,100,0.4), 0 1px 1px rgba(255,255,255,0.2); }
    </style> 
        <script src='js/prefixfree.min.js'></script>
		<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
		<script type='text/javascript'>
		$(document).ready(function(e) {
			$("#submit").click(function(){
				
				var email = $("#username").val();
				var password = $("#password").val();
				if( email =='' || password ==''){
					
				}
				else
				{
					$.post("login.php",{ email1: email, password1:password},
					function(data) {
						if(data=='Invalid Email.......') {
								$('input[type="text"]').css({"border":"2px solid red","box-shadow":"0 0 3px red"});
								$('input[type="password"]').css({"border":"2px solid #00F5FF","box-shadow":"0 0 5px #00F5FF"});
								alert(data);
						}else if(data=='Email or Password is wrong...!!!!'){
								$('input[type="text"],input[type="password"]').css({"border":"2px solid red","box-shadow":"0 0 3px red"});
								alert(data);
						} else if(data=='Successfully Logged in...'){												
								alert(data);
						} else{								
								location.reload();
						}
					});
				}
			});
		});
		</script>
  </head>
  <body>
    <div class='login' id='login'>
	<h1>Login</h1>
    <form method="post" action="#">
    	<input type="text" name="u" id="username" placeholder="Username" required="required" />
        <input type="password" name="p" id="password" placeholder="Password" required="required" />
        <button type="submit" id="submit" class="btn btn-primary btn-block btn-large">Let me in.</button>
    </form>
</div>
  </body>
</html>

首页

最佳答案

使用 redirect($home_url); 而不是 header() 可能会解决您的问题

关于javascript - 从注销按钮重定向后，网站不加载索引样​​式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40040179/

上一篇：javascript - 使用Ajax从javascript发送数组到php，不使用表单

下一篇：javascript - 无法以正确的格式转换来自 REST 请求的 JQuery 结果

相关文章：

c# - MVC 是否在 ajax GET 和 POST 操作中以不同方式解析 DateTime 对象？

javascript - 动态更改的填充不适用于带有表单的 DIV

javascript - X-Editable 中的数据清理可能吗？

javascript - JS 在类中隐藏损坏的图像

php - 将文件夹上一级

php - 通过标签列表查找相关帖子

php - 在不同服务器上安装 Apache、PHP 和 MySQL

JavaScript 图像弹出窗口

javascript - 如何在 chrome 扩展中使用 AJAX 向 ‘My XAMPP server’ 发送 GET 请求

javascript - CarouFredSel 示例 #61 - 垂直而不是水平

©2024 IT工具网  联系我们