我花了几个小时阅读和尝试教程.我似乎无法找到一个有效的解决方案,我知道它应该很容易,但我很难与 AJAX.

我正在尝试设置一个wordpress主题,用 AJAX加载页面(而不是帖子).我正在关注 this guide,但无法正确加载页面.

使用post slug生成帖子的链接

http://local.example.com/slug/

所以我调整了

jQuery(document).ready(function($){
        $.ajaxSetup({cache:false});
        $("a.bar").click(function(e){
            $('page-loader').show();
            var that = $(this).parent();

            $('.column').not($(this).parent()).animate({width: 'toggle',opacity:'0.75'},700,function() {

            });

            var post_id = $(this).attr("href");
            $("#page-container").load("http://<?PHP echo $_SERVER[HTTP_HOST]; ?>" + post_id,{id:post_id});

            return false;
        });
    });

URL是正确的,但它不加载任何东西..

<?PHP
/*
Template Name: Triqui Ajax Post
*/
?>
<?PHP
$post = get_post($_POST['id']);
?>
<?PHP if ($post) : ?>
    <?PHP setup_postdata($post); ?>
    <div <?PHP post_class() ?> id="post-<?PHP the_ID(); ?>">
        <h2><?PHP the_title(); ?></h2>
        <small><?PHP the_time('F jS,Y') ?> <!-- by <?PHP the_author() ?> --></small>

        <div>
            <?PHP the_content('Read the rest of this entry &raquo;'); ?>
        </div>

    </div>
<?PHP endif; ?>

所以我实际上能够按照我之前提到的教程来完成这项工作.我认为教程可能刚刚写得有点不清楚..

步骤1

创建自定义页面模板,这是通过在根目录中创建一个PHP文件来完成的,该文件的注释标题类似于：

<?PHP
/*
Template Name: Ajax
*/
?>

我将其命名为Ajax用于语义,但在教程中原作者标题为“Triqui Ajax”.记下您创建的PHP文件的名称,稍后将在步骤4中再次使用它.

第2步

完成后,您可以继续编写自定义页面模板,但下面添加注释行除外(第2行到第5行)

<?PHP
    $post = get_post($_POST['id']); // this line is used to define the {id:post_id} which you will see in another snippet further down

    if ($post) { // this is necessary and is a replacement of the typical `if (have_posts())`
        setup_postdata($post); // needed to format custom query results for template tags ?>
        <!-- everything below this line is your typical page template coding -->
        <div <?PHP post_class() ?> id="post-<?PHP the_ID(); ?>">

            <h2><?PHP the_title(); ?></h2>
            <small><?PHP the_time('F jS,Y') ?></small>
            <span><?PHP the_author() ?></span>

            <div>
                <?PHP the_content(); ?>
            </div>

        </div>

<?PHP }

第3步

创建自定义页面模板后,您现在应该登录wp-admin,首先转到设置 – >永久链接并将其设置为日期和名称或自定义结构.结构应如下所示：

/%year%/%monthnum%/%day%/%postname%/

无论您是在自定义结构中手动编写还是选择日期名称,它都应该与上面的代码段类似.

第4步

现在去创建一个新页面. Pages – > Add New’并创建一个新页面.将其命名为您喜欢的名称,但最好将其命名为您在步骤1中创建的页面模板的名称.

将其另存为空白页面.现在这是重要的部分您需要确保页面的永久链接与您在步骤1中创建的文件具有完全相同的名称.唯一的区别是它应该全部小写.

第5步

在保存页面之前,还要确保从选择菜单中选择页面模板.如果您没有看到此菜单,那是因为您可能没有正确创建模板文件,或者您没有在根目录中创建它,或者您没有正确创建注释标题.基本上,如果您没有创建任何自定义页面模板,则菜单不显示,它仅显示保存在主题的根目录中的正确自定义页面模板.

评论

你现在应该有一个PHP文件.和WP-admin中的一个页面.该页面应该有一个永久链接URL,该URL与PHP文件的文件名(全部小写)相匹配,并且应该为该页面分配该文件的页面模板.

此页面应保持为空,不应使用.

第6步

在header.PHP之后紧跟代码<？PHP wp_head()？>添加以下脚本：

<script>

    jQuery(document).ready(function($){
        $.ajaxSetup({cache:false});
        $("THELINK").click(function(e){ // line 5
            pageurl = $(this).attr('href');
            if(pageurl!=window.location) {
                window.history.pushState({path: pageurl},'',pageurl);
            }

            var post_id = $(this).attr("rel")
            $("#TARGET").load("http://<?PHP echo $_SERVER[HTTP_HOST]; ?>/ajax/",{id:post_id}); // line 12
            return false;
        });
    });
</script>

将THELINK替换为放置<？PHP the_permalink？>的元素.码.

您需要更改的唯一行是第5行和第12行.请注意第12行,其中写有ajax,这是我在步骤1中创建的PHP文件的名称以及我在步骤5中创建的页面的永久链接的名称.

同样在该行开头的第12行,您应该将TARGET更改为应加载内容的元素.

确保在此脚本之前正确加载了jQuery.

第7步

继续你的index.PHP文件或你的循环所在的文件.找到你将拥有代码the_permalink的地方,它将在一个锚标签上.您需要在步骤6中的第12行添加一个带有_ID()的rel属性,该属性由{id：post_id}使用：

<a href="<?PHP the_permalink(); ?>"rel="<?PHP the_ID(); ?>" title="<?PHP the_title(); ?>">

完成

而已.它现在应该工作.页面应该加载AJAX,浏览器的URL也将更改为匹配.

您现在可以创建尽可能多的页面,创建其他自定义页面模板,并分配它们,无论您喜欢什么.只需让您在步骤5中创建的文件永远存在于空白页面.

如果它仍然不起作用,你可能已经绝望地迷失了,并且不知道你在做什么.您很可能已经创建了某种jQuery冲突或者没有正确加载jQuery.

我正在尝试将 AJAX功能添加到基于wordpress的站点.

当访问者单击菜单链接时,此代码会将所需页面的文本文本加载到主页面中：

$('#access a').click(function(event) {
    event.preventDefault();
    var url = $(this).attr('href');
$('#content').fadeOut(500,function() {
    $('#content').load(url,function() {
        $('#content').fadeIn(500);
        }); 
    });
});

我的问题在于搜索表单.它在页面中具有以下结构：

<div id="my_search"><form role="search" method="get" id="searchform" action="http://myurl.com/" >
    <input type="text" value="" name="s" id="s" />
    <input type="submit" id="searchsubmit" value="Search" />
    </div>
    </form></div>

当我在表单中键入单词测试,然后单击键盘上的#searchsubmit“按钮或Enter键时,我被重定向到具有以下地址的新wordpress页面：

http://www.myurl.com/?s=testing

这是使PHP工作的PHP代码：

<?PHP if ( have_posts() ) : ?>
                <h1><?PHP printf( __( 'Search Results for: %s','twentyten' ),'<span>' . get_search_query() . '</span>' ); ?></h1>
                <?PHP
                /* Run the loop for the search to output the results.
                 * If you want to overload this in a child theme then include a file
                 * called loop-search.PHP and that will be used instead.
                 */
                 get_template_part( 'loop','search' );
                ?>
<?PHP else : ?>
                <div id="post-0">
                    <h2><?PHP _e( 'nothing Found','twentyten' ); ?></h2>
                    <div>
                        <p><?PHP _e( 'Sorry,but nothing matched your search criteria. Please try again with some different keywords.','twentyten' ); ?></p>
                    </div><!-- .entry-content -->
                </div><!-- #post-0 -->
<?PHP endif; ?>

问题：我想阻止#searchsubmit点击和输入键点击的默认行为,并将搜索结果的内容(http://www.myurl.com/?s=whateverwordItype)加载到主要的#content中页.我怎样才能做到这一点？

(我想我只需要以某种方式在jQuery代码中插入PHP代码,但是这个任务有点超出了我对jQuery和PHP的了解.)

如果可能的话,我将非常感谢知识渊博的人提供的代码片段.

使用一些简单的jQuery和javascript

要通过ajax请求加载搜索结果,您可以使用以下代码直接从搜索结果页面获取它们：

// Bind the submit event for your form
$('#searchform').submit(function( e ){ 

    // Stop the form from submitting
    e.preventDefault();

    // Get the search term
    var term = $('#s').val();

    // Make sure the user searched for something
    if ( term ){

        $.get( '/',{ s: term },function( data ){

            // Place the fetched results inside the #content element
            $('#content').html( $(data).find('#content') );

        });

    }

});

注意：$(data).find(‘#content’)假设您的search.PHP结果聚合在一个id为content的元素中,即< div id =“#content”> ……结果……< / div>

以上将进入外部文件或放在结束之前< / body>标签.

您可以自定义search.PHP页面以组织输出结果.