Question

我会尝试将其分解，以便于理解我想要的内容。

基本上，我有一个包含很多页面的wordpress网站。我想要做的是有一个名为“工作”的页面，然后在该页面上我有一个子菜单，其中包含指向“视频”，“音频”，“写作”和“设计”页面的链接。

现在我想要发生的是当您点击这些链接中的任何一个时，这些页面的内容将替换页面上的内容。显然，页眉，页脚和导航不会改变。

从我收集的内容来看，我需要使用AJAX来完成这项工作。原因是我希望这些页面在WordPress中成为他们自己的单独页面。因此，当我去编辑“音频”页面时，只会更改该页面的内容。

当涉及到php，ajax，jQuery和Javascript时，我是一个完整的菜鸟。所以，如果有人能分解它，让我明白那将是非常棒的。

到目前为止我收集到的是我需要刷新一个容纳所有信息/内容的容器。

例如：

<div id="main">
    <div id="menu">
      <ul>
        <!-- Each one of these will change the content below when clicked-->
        <a href="#"><li>Nav item 1</li></a>
        <a href="#"><li>Nav item 2</li></a>
        <a href="#"><li>Nav item 3</li></a>
      </ul>
    </div>

    <div id="page-content-here">
    </div>
</div>

只是我不知道该怎么做。我所能找到的只是Ajax的片段，但由于我以前从未使用它，我不知道它在哪里或类似的东西。

Answer 1

动态标记点击

更方便

<script>
(function(){
    var index = {
        init: function(){
            //you could change the selector what ever you want to select
            //the selector provided select all anchor tag with href="#"
            $(document).on('click', "a[href='#']", this.exe_thisfunction);
        },
        exe_thisfunction: function(e){
            var yourdata = '';
            $.ajax({
                url: 'sample.php',
                data: yourdata, // this is optional
                method: "post",
                success: function(data){
                    //success do what ever you want
                    //the data is the content of the url requested
                    $('#page-content-here').html(data);
                }
            });
            e.preventDefault();
        }
    }
    index.init();
})();

注意。在首先包含jQuery库之前，你只能使用jQuery。

Sample.php

<?php
echo "Content fetch!";

Answer 2

执行此操作的最简单方法是以下

<div id="main">
    <div id="menu">
      <ul>
        <!-- Each one of these will change the content below when clicked-->
        <a onclick="$('#page-content-here').load('url-to-whatever');"><li>Nav item 1</li></a>
        <a onclick="$('#page-content-here').load('url-to-whatever-2');"><li>Nav item 2</li></a>
        <a onclick="$('#page-content-here').load('url-to-whatever-3');"><li>Nav item 3</li></a>
      </ul>
    </div>

    <div id="page-content-here">
    </div>
</div>

请记住，＃page-content-here div将填充所请求的整个页面 - 而不仅仅是该页面的内容。所以不推荐这种方法，但应该让你知道需要什么。

如何使用AJAX和jQuery检索WordPress页面内容？

2 个答案:

Sample.php