javascript - 返回 Jquery 站点主页时无法访问脚本

标签 javascript jquery navigation

好的,我从头开始重新发布。我对此感到非常沮丧,我将要一起放弃 JQM。这不应该这么难。

我的网站结构:

OUI/
index.php
js/
pages/
images/

在我的 index.php 页面上,我只有一个两行的登录表单,我在 http://localhost/~me/OUI/:

<? session_start();
?><!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width, user-scalable=false,initial-scale=1;">
<meta name="apple-mobile-web-app-capable" content="yes">

<link rel="stylesheet" href="js/jquery.mobile-1.4.0.min.css">
<link rel="stylesheet" type="text/css" href="css/jqm-datebox.min.css" /> 
<script src="js/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="js/jquery.mobile-1.4.0.min.js" type="text/javascript"></script>

<script type="text/javascript" src="js/jqm-datebox.comp.datebox.min.js"></script>

<script src="js/mainsite.js" type="text/javascript"></script>


<link rel="stylesheet" href="css/main.css">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>OUI CHEF</title>

</head>

<body style="background-image:url(media/kitchen.jpg)">


    <div data-role="page" id="loginarea">

    <div data-role="content" id="maincontentarea2"> 
    <img src="media/OUIChef.png" style="margin-top:75px" id="mainimage">

    <div data-role="fieldcontain" class="ui-hide-label">
    <label for="username">Username:</label>
    <input type="text" name="username" id="username" value="" style="text-align:center" placeholder="Username"/><BR>
<label for="username">Password:</label>
    <input type="password" name="password" id="password" value="" style="text-align:center" placeholder="Password"/>
</div>   
     <div style="text-align:center">
    <a href="javascript:doLogin();" data-role="button" data-inline="true" data-mini="true">DO LOGIN</a>
</div>

</div><!-- /page -->
</div>
</body>
</html>

因此,当我点击登录按钮时,它会将我带到我的 options.php 页面 vi 以下函数:

function doLogin(){

$.ajax({
  type: "POST",
  url: "functions/checklogin.php",
  data: {
      usrnm: $('#username').val() , passwd: $('#password').val()
        }
})
  .done(function( msg ) {
    if(msg.match(/YES/)){
         $('#username').val('');
          $('#password').val('');

        $("body").pagecontainer("change","pages/options.php",{ });
    }
    else
   {
    alert(msg);
    }

  });   

}

在 URL 栏中,我现在有 http://localhost/~me/OUI/pages/options.php 并且页面中的所有内容都运行良好。我有注销按钮。在调用

的代码中

选项.PHP:

<div data-role="page" id="optionspage">    
<div data-role="header">
<a href="javascript:doSignout();" data-role="button" data-mini="true"  class="ui-btn-right" style="padding:5px">Sign Out</a>

    <h1>MAIN</h1>
</div>

    <div data-role="content" id="options1"> 
    <? if($_SESSION['role']=='A'){?>
      <a href="admin.php" data-role="button"  data-mini="true">ADMIN PAGE</a> 
      <a href="ordersetup.php" data-role="button"  data-mini="true">ORDER SETUP PAGE</a> 
      <? } ?>
       <a href="production.php" data-role="button"  data-mini="true">PRODUCTION</a>
        <a href="menurecipe.php" data-role="button" data-mini="true">MENU / RECIPE PAGE</a>


    </div><!-- /content -->
    </div>

这调用了 JS:

function doSignout(){
$.ajax({
  type: "POST",
  url: "../functions/signout.php",
  data: {    }
})
  .done(function( msg ) {
       $('body').pagecontainer( "change", "#loginarea",{});

  });   
}

我永远无法获得指向注销页面的链接以正确链接。如果我从“页面”文件夹中放置应该正确的双点,我会尝试链接到

http://localhost/~me/functions/signout.php 

如果我删除双点,我会得到

http://localhost/~me/OUI/pages/functions/signout.php

两者都是 404 错误......这是我书中的 BUNK。 “..”实际上是在删除两个目录……而不仅仅是一个。

发生了什么事?请帮忙

最佳答案

由于我们没有看到您的登录功能,我假设它看起来像下面这样?

$.ajax({
  type: "POST",
  url: "../functions/signin.php",
  data: {}
})

如果是这种情况,当您最初位于 "../functions/signin.php" 时,/OUI/ 如何找到它的标记 — 当您在主页上时,它肯定需要为 "functions/signin.php"

简单地说,我猜您的登录代码最初在主页上是不同的,然后在通过 ajax 加载后续页面后,您的登录代码被设计为使用 "../" 前缀的代码覆盖或修改在更深的页面上...当您切换回主页时,这不会得到纠正。

基本上你需要重写你的代码来检测当前 URL 所在的文件夹深度并相应地请求你的 ajax 文件......或者设置一个全局变量(易于更新)以保持完整的域路径到为所有 ajax 网址添加前缀。即:

var ROOT_URL = 'http://localhost/OUI/';

根据您要使用的内容,此路径可以由 PHP 或 JavaScript 生成,PHP 更可靠——因为最终用户不需要 JavaScript——但在代理和共享主机后面托管时可能会混淆。

var ROOT_URL = 'http://<?php echo $_SERVER["HTTP_HOST"]; ?>/OUI/';

var ROOT_URL = 'http://' + window.location.host + '/OUI/';

关于javascript - 返回 Jquery 站点主页时无法访问脚本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21323613/

相关文章:

javascript - 使用 jQuery 选择前 “n” 日期

javascript - 如何将点击监听器添加到 ng-select 选项?

javascript - 我如何以正确的表示法遍历数组内的对象?

javascript - 如何使用jquery从window.open js函数获取元素和html

javascript - 尝试使用数组过滤对象时失败

java - 如何像在导航系统中那样从 A 点绘制到 B 点

css - 使用文本和图像创建导航菜单

javascript - 如何在 Web 表格中查找具有特定输入单元格值的行

javascript - 将相同 Prop 和文本渲染到不同组件类型的 DRY React 方法

html - 如何传递 GET 参数并仍然使用 # 跳转到我的页面的一部分?