Question

我正在使用this tutorial创建一个使用AJAX加载内容的简单页面。我正在使用AJAX和PHP，问题是在教程中，老兄正在使用页面名称，如“page1，page2，page3等”。我不想这样做，我想使用实际页面的名称而不是那个，例如。 “产品，关于等”。我一直在尝试使用load.php上的代码，但每次都会收到此通知，页面将无法加载; 注意：未定义索引：第2行和第3行“MY TEST SITE”中的页面

这是load.php

<?php
if(!$_POST['page']) die("0");

$page = (int)$_POST['page'];
if(file_exists('pages/page'.$page.'.html'))
echo file_get_contents('pages/page'.$page.'.html');
else echo 'There is no such page!';
?>

和Javascript文件

$(function() {
    $('header nav a').click(function() {
        var $linkClicked = $(this).attr('href');
        document.location.hash = $linkClicked;
        var $pageRoot = $linkClicked.replace('#page', '');
        if (!$(this).hasClass("active")) {
            $("header nav a").removeClass("active");
            $(this).addClass("active");
            $.ajax({
                type: "POST",
                url: "load.php",
                data: 'page='+$pageRoot,
                dataType: "html",
                success: function(msg){
                if(parseInt(msg)!=0)
                {
                    $('#main-content').html(msg);
                    $('#main-content section').hide().fadeIn();
                }
            }
        });
    }
    else {
        event.preventDefault();
    }
});
var hash = window.location.hash;
hash = hash.replace(/^#/, '');
switch (hash) {
    case 'products' :
        $("#" + hash + "-link").trigger("click");
        break;
    case 'about' :
        $("#" + hash + "-link").trigger("click");
        break;
    case 'storelocator' :
        $("#" + hash + "-link").trigger("click");
        break;
    case 'media' :
        $("#" + hash + "-link").trigger("click");
        break;
    case 'faq' :
        $("#" + hash + "-link").trigger("click");
        break;
    case 'contact' :
        $("#" + hash + "-link").trigger("click");
        break;
}
});

修改菜单HTML

  <a href="#products" class="w-nav-link nav-link" data-overlay-trigger="overlay">products</a>
  <a href="#about" class="w-nav-link nav-link" data-overlay-trigger="overlay">about</a>
  <a href="#storelocator" class="w-nav-link nav-link" data-overlay-trigger="overlay">store locator</a>
  <a href="#media" class="w-nav-link nav-link" data-overlay-trigger="overlay">media</a>
  <a href="#faq" class="w-nav-link nav-link" data-overlay-trigger="overlay">faq</a>
  <a href="#contact" class="w-nav-link nav-link" data-overlay-trigger="overlay">contact</a>

该菜单还会打开显示内容的叠加层。

什么是可能的解决方案？

Answer 1

好的教程中的人正在这样做

var $pageRoot = $linkClicked.replace('#page', '');

基本上他们正在从#page移除#page1，#page2等等。所以他们只留下数字1,2等等，然后他们通过页面发送服务器号码

data: 'page='+$pageRoot, // here $pageRoot will be a number

您想直接发送页面名称。

因此，您将更改该行

var $pageRoot = $linkClicked.replace('#', '');

现在$ pageRoot会将您的网页名称设置为＆＃39;产品＆＃39;

另外作为旁注，当您完成此代码时，请在浏览器上打开开发人员工具，看看在网络面板中发送的请求是什么

使用PHP和AJAX获取页面名称而不是页码

1 个答案: