Question

<div class="home-thumbs bottom-thumbs">
<?php $home_query_bottom = new WP_Query("cat=&showposts=20&offset=5"); $b = 0; ?>
<ul class="thumbs">
    <?php while ($home_query_bottom->have_posts()) : $home_query_bottom->the_post();
        $do_not_duplicate = $post->ID; $b++; ?>

        <li class="post-<?php the_ID(); ?> thumb"><?php get_the_image( array( 'custom_key' => array( 'thumbnail' ), 'default_size' => 'thumbnail', 'width' => '160', 'height' => '160' ) ); ?></li>
    <?php endwhile; wp_reset_query(); $b = 0; ?>
</ul>
</div>
<div id="output"></div>
<script type="text/javascript">


$('.go-right').click(function(){

$.ajax({

            type: "POST",
            url: "process_thumbs.php",
            data:   "showposts=25",
            success: function(html){
                $("#output").html(html);
            }

});  
});
</script>

// process_thumbs.php
  <body>

    <?php $numposts = $_POST['showposts']; ?>
    <div><?php echo "this is the amount of posts to be shown: $numposts"; ?></div>
    </body>

似乎是一个简单的ajax调用。 .go-right确实存在它只是在anoher文件中并且我已经测试了点击正在执行。这个ajax调用基本上不起作用。也许有人可以确定我的代码是否错误。

理想情况下，我想采用wp-Query循环并使用ajax再次使用不同的showposts运行该循环，如果有人点击则会偏移。

Answer 1

确保.go-right 之前 jQuery代码或（更好）将jquery包装在

中
$(document).ready(function() { })

或类似，以确保处理程序真正附加到您的.go-right元素

不要在<body>中输出process_thumbs.php标记，这可能会让jQuery感到困惑。

检查Firebug控制台/网络标签，确保确实发送了请求。

向error添加.ajax回调，以确保您的ajax调用真正得到执行。

是的，使用绝对网址但使用wordpress帮助函数：

... url: '<?php echo get_bloginfo('url').'/wp-content/myplugin/mycallback';?>' ...

这样，您的所有网址都将与Wordpress根网址相关。

Answer 2

我在文档就绪处理程序中重写了你的代码：

$（函数（）{ 你的代码 }）;

它运作良好。

所以或者这是你的代码的位置相关问题，或者你错误的东西。

按照我的测试代码：

<html>
    <head>
    <script type="text/javascript">

    $(function() {

    $('.go-right').click(function(){

        $.ajax({

                    type: "POST",
                    url: "process_thumbs.html",
                    data:   "showposts=25",
                    success: function(html){
                        $("#output").html(html);
                    }

        });  
    });

        });

    </script>

    </head>
    <body >


    <div id="output"></div>

    <a class="go-right">RIGHT</a>

    </body>
    </html>

Answer 3

在Wordpress中（我使用的是3.0及更高版本），由于与其他javascript库（即原型）的冲突，你必须写：

$JQuery('.go-right').click(function(){

而不是

$('.go-right').click(function(){

另外，请查看Firebug以确保指向Jquery库的链接正确无误。

还有一件事...... Wordpress已经包含了jQuery，你可以通过编写来获得它：

<?php wp_enqueue_script("jquery"); ?>

<?php wp_head(); ?>

第一行必须在第二行（wp_head（））之前，否则它将无效。

我的jquery ajax不能在我的wordpress网站上工作

3 个答案: