如何在 Wordpress 上正确调用 ajax url？

Question

我有这个脚本：

<script>
(function($){
    load_data();
    function load_data(query)
    {
        jQuery.ajax({
            url:"fetch.php",
            method:"post",
            data:{query:query},
            success:function(data)
            {
                $('#result').html(data);
            }
        });
    }
    
    $('#search_text').keyup(function(){
        var search = $(this).val();
        if(search != '')
        {
            load_data(search);
        }
        else
        {
            load_data();            
        }
    });
})(jQuery);
</script>

on a php file, but I get constantly an error cause Wordpress doesn't recognize the ajax url (fetch.php) and it tries to generate a new URL in my domain.

我怎样才能正确地做到这一点？

Answer 1

您需要使用wp_ajax或wp_ajax_nopriv操作挂钩来使用 WordPress ajax。 检查下面的代码。

要调用wp_ajax或wp_ajax_nopriv操作挂钩，您需要使用 WP admin_url('admin-ajax.php')这将返回 wordperss ajax url。

并且，还通过action data参数中的操作。

检查下面的代码。 代码进入您的活动主题函数。php 文件。

function call_ajax(){ ?>
    <script>
        (function($){

            load_data();
            
            $('#search_text').keyup(function(){
                var search = $(this).val();
                if(search != ''){
                    load_data(search);
                }else{
                    load_data();            
                }
            });

            function load_data( query ){
                jQuery.ajax({
                    url:"<?php echo admin_url('admin-ajax.php'); ?>",
                    method:"post",
                    data:{acion:'your_action_name',query:query},
                    success:function( data ) {
                        $('#result').html( data );
                    }
                });
            }

        })(jQuery);
    </script>
<?php }
add_action( 'wp_footer', 'call_ajax', 10, 1 );

add_action( 'wp_ajax_your_action_name', 'your_action_name' );
add_action( 'wp_ajax_nopriv_your_action_name', 'your_action_name' );
function  your_action_name(){
    echo "ajax call";
    echo $_POST['query'];
    die;
}