通过 xampp 托管时，保存为 php 的 JqueryMobile 页面无法正确显示
Posted
技术标签:
【中文标题】通过 xampp 托管时，保存为 php 的 JqueryMobile 页面无法正确显示【英文标题】：JqueryMobile page saved as php doesn't display correctly when hosted via xampp 【发布时间】：2015-03-14 10:58:42 【问题描述】：我有一个名为 loginscreen.php 的 php 文件。现在它包含两个 JqueryMobile 页面和一个在第一页登录的表单。登录过程运行良好。整个事情在我的 Mac 上由 xampp（版本：5.6.3-0）托管。
当我将 loginscreen.php 文件的文件扩展名更改为 .html (so --> loginscreen.html) 并在 finder 的 htdocs 文件夹中打开它时，loginscreen 页面打开就好了在我的自定义主题之后以正确的 jquery 移动样式在 Safari 中，登录过程有效，并让我进入我的第二页。
但是，如果我在浏览器中使用 localhost/loginscreen.php 访问 loginscreen.php，则文件会错误地呈现。我得到双按钮（jQuery 按钮中的通常 html 按钮）。双输入字段（与按钮相同）。我的第二个页面也正在显示，登录时出现页面加载错误！
我的问题是什么？由于它在通过 finder 打开文件作为 html 时有效，我想问题是我的 xampp 托管。通过 xampp 托管时我的文件无法正确呈现的问题可能是什么？
我的代码（loginscreen.php 文件）（还有一个 javascript 和另一个 php 文件负责通过 ajax 和 php 登录以访问我的数据库（也使用 xampp 托管）当通过 finder 作为 html 打开时一切正常但不是通过浏览器作为 php 访问时）
<!doctype html>
<html><head>
<title>Prototyplogin</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- <meta name="viewport" content="initial-scale=1, maximum-scale=1"> -->
<link rel="stylesheet" href="themes/mensa1.min.css" />
<link rel="stylesheet" href="themes/jquery.mobile.icons.min.css" />
<link rel="stylesheet" href="jquery/jquery.mobile.structure-1.4.5.min.css" />
<link rel="stylesheet" type="text/css" href="loginscreen.css" />
<script type="text/javascript" src="jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="jquery.mobile-1.4.5.js"></script>
<script type="text/javascript" src="loginscreen.js"></script>
</head>
<body>
<div data-role="page" data-theme="c" id="loginscreen">
<div data-role="main" class="ui-content">
<br />
<div id="titel">
<p>Logo</p>
</div>
<br />
<form action="test.php" method="post" id="loginformular">
<label for="username">Benutzername:</label>
<input type="text" name="username" id="username">
<br/>
<label for="password">Passwort:</label>
<input type="password" name="password" id="password">
<br/>
<input type="button" value="Anmelden" id="submit" data-role="button">
</form>
<div id="notificationdiv"><h3 id="notification"></h3></div>
</div>
</div>
<div data-role="page" id="firstpage">
<div data-role="header">
</div>
<div data-role="main" class="ui-content">
<h1>Secondpage</h1>
</div>
<div data-role="footer">
</div>
</div>
</body>
</html>在整个互联网上搜索了这个问题，得到一些帮助真是太棒了！ :-) 提前感谢您的帮助！ :-)
【问题讨论】：
【参考方案1】：我自己解决了这个问题。这个问题与我的 XAMPP 安装没有任何关系。我弄清楚了两个实际问题：
我的 PHP 文件没有标题('Content-Type: text/html; charset=utf-8');在那里我遇到了我的代码的错误和不当行为，因为我的 index.php 文件设置为带有元标记的 utf-8，但没有标头（'Content-Type'）我的 PHP 代码不是。
我的 Jquery-Mobile CSS 没有被错误地导入。我只在我的主题之后导入了 Jquery-Mobile-Strucutre.css，而不是普通的 Jquery-Mobile.css。这是造成双重渲染和错误显示以及错误页面显示行为的原因，因为在不导入标准 Jquery-Mobile.css 时缺少一些关键页面元素。
希望这可以帮助其他遇到这些问题的人，我花了很长时间才弄清楚 utf-8 的编码问题。
【讨论】：
以上是关于通过 xampp 托管时，保存为 php 的 JqueryMobile 页面无法正确显示的主要内容，如果未能解决你的问题，请参考以下文章
如何通过我的 IP 地址而不是本地主机访问托管在 Xampp 服务器上的网站
xampp 未显示保存在 htdocs 文件夹中的 .php 文件