另存为 php 的 JqueryMobile 页面在通过 xampp 托管时无法正确显示

Question

我有一个名为 loginscreen.php 的 php 文件。现在它包含两个 JqueryMobile 页面和一个在登录页面上的表单。登录过程工作正常。整个事情由 xampp（版本：5.6.3-0）托管在我的 Mac.

上

当我将 loginscreen.php 文件的文件扩展名更改为 .html（所以 --> loginscreen.html）并打开它在 finder 的 htdocs 文件夹中，在我的自定义主题之后，登录屏幕页面在 Safari 中以正确的 jquery 移动样式打开得很好，登录过程正常并让我进入第二个页面。

但是，如果我在浏览器中使用 localhost/loginscreen.php 访问登录屏幕。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>

在整个互联网上搜索了这个问题，如果能得到一些帮助就太好了！ :-) 提前感谢您的帮助！ :-)

Answer 1

我自己解决了这个问题。该问题与我的 XAMPP 安装无关。我弄清楚了两个实际问题：

我的 PHP 文件没有 header('Content-Type: text/html; charset=utf-8');并且我运行陷入代码的错误和不当行为，因为我的 index.php 文件被设置为带有元标记的 utf-8，但没有 header('Content-Type' ) 我的 PHP 代码不是。
我的 Jquery-Mobile CSS 没有被错误导入。我只在我的主题之后导入了 Jquery-Mobile-Strucutre.css 而不是正常的 Jquery-Mobile.css。这是造成双重渲染和错误显示以及错误页面显示行为的原因，因为在不导入标准 Jquery-Mobile.css.
[ 时，一些关键的页面元素丢失了。 =21=]

希望这可以帮助其他人运行解决这些问题，我花了很长时间才弄清楚 utf-8 的编码问题。

另存为 php 的 JqueryMobile 页面在通过 xampp 托管时无法正确显示

JqueryMobile page saved as php doesn't display correctly when hosted via xampp

html

php

xampp

jquery

jquery-mobile