javascript - 从 ajax 切换时未调用 jquery

Question

我有一个 ajax 函数，需要转换为使用 Jquery for wordpress 调用 - 但现在该函数没有被调用？

    function getCategories()
        {

    alert('getCategories test');
            var fData = new Object();
            fData.val = '';

            jQuery(document).ready(
            {
                type: "POST",
                contentType: "application/json; charset=utf-8",
                url: "php_scripts/getdeals_php.php",
                data: '{"action":"GetCats", "fData":' + JSON.stringify(fData) + '}',
                dataType: "json",
                success: function (msg)
                {
                    alert('Success');
                    var offerList = msg;
                    var Cats = document.getElementById('CategoriesSelect');
                    document.getElementById("CategoriesSelect").options.length = 0;
                    var optn    = document.createElement('option');
                        optn.text   = "Select Category";
                        optn.value  = "Select Category";        
                        Cats.add(optn);


                    for(var i=0;i<offerList.length;i++)
                    {
                        var optn    = document.createElement('option');
                        optn.text   = offerList[i];
                        optn.value  = offerList[i];     
                        Cats.add(optn);
                    }
                },
                error: function (xhr, ajaxOptions, thrownError)
                {
                    alert("ERROR:" + xhr.responseText+" - "+thrownError);
                }
            });

        }

我收到“getCategories test”警报，但没有收到“成功”或“错误”警报

所以我认为 jquery 没有运行。

在我开始将其与 wordpress 集成之前，我使用的是这样的 ajax

$.ajax({
    type: "POST",
    contentType: "application/json; charset=utf-8",
    url: "php_scripts/getdeals_php.php",
    data: '{"action":"GetCats", "fData":' + JSON.stringify(fData) + '}',
    dataType: "json",
    success: function (msg)
    {
        $('#loadingmessage').hide();
        var offerList = msg;
        var Cats = document.getElementById('CategoriesSelect');
        document.getElementById("CategoriesSelect").options.length = 0;
        var optn    = document.createElement('option');
            optn.text   = "Select Category";
            optn.value  = "Select Category";        
            Cats.add(optn);


        for(var i=0;i<offerList.length;i++)
        {
            var optn    = document.createElement('option');
            optn.text   = offerList[i];
            optn.value  = offerList[i];     
            Cats.add(optn);
        }
    },
    error: function (xhr, ajaxOptions, thrownError)
    {
        alert("ERROR:" + xhr.responseText+" - "+thrownError);
    }
});

我会收到一个错误，指出 ajax 未知，看来我应该使用 jquery 来代替......？

我在控制台中没有收到任何错误

Answer 1

嗯，在 WP 中调用 Ajax 有一些不同的方法。例如，一种方法是这样的

对于 JS 片段

jQuery(document).ready(function($) {

    // We'll pass this variable to the PHP function example_ajax_request
    var fruit = 'Banana';

    // This does the ajax request
    $.ajax({
        url: ajaxurl,
        data: {
            'action':'example_ajax_request',
            'fruit' : fruit
        },
        success:function(data) {
            // This outputs the result of the ajax request
            console.log(data);
        },
        error: function(errorThrown){
            console.log(errorThrown);
        }
    });   

});

和 PHP 部分

function example_ajax_request() {

        // The $_REQUEST contains all the data sent via ajax 
        if ( isset($_REQUEST) ) {

            $fruit = $_REQUEST['fruit'];

            // Let's take the data that was sent and do something with it
            if ( $fruit == 'Banana' ) {
                $fruit = 'Apple';
            }

            // Now we'll return it to the javascript function
            // Anything outputted will be returned in the response
            echo $fruit;

            // If you're debugging, it might be useful to see what was sent in the $_REQUEST
            // print_r($_REQUEST);

        }

        // Always die in functions echoing ajax content
       die();
    }

    add_action( 'wp_ajax_example_ajax_request', 'example_ajax_request' );

    // If you wanted to also use the function for non-logged in users (in a theme for example)
    // add_action( 'wp_ajax_nopriv_example_ajax_request', 'example_ajax_request' );

感谢wptheming

就您的情况而言，首先尝试遵循 JS 部分的模板，其次始终记住在 WP 中为了防止冲突，您必须始终使用

jQuery(document).ready(function($) {
     // You JS functions 
});

所以我现在尝试即时修改您的代码，希望它对您有用。

  jQuery(document).ready(function($) {
    var fData = new Object();
    fData.val = '';
    $.ajax({
        type: "POST",
        contentType: "application/json; charset=utf-8",
        url: "php_scripts/getdeals_php.php",
        data: '{"action":"GetCats", "fData":' + JSON.stringify(fData) + '}',
        dataType: "json",
        success: function (msg)
        {
            $('#loadingmessage').hide();
            var offerList = msg;
            var Cats = document.getElementById('CategoriesSelect');
            document.getElementById("CategoriesSelect").options.length = 0;
            var optn    = document.createElement('option');
                optn.text   = "Select Category";
                optn.value  = "Select Category";        
                Cats.add(optn);


            for(var i=0;i<offerList.length;i++)
            {
                var optn    = document.createElement('option');
                optn.text   = offerList[i];
                optn.value  = offerList[i];     
                Cats.add(optn);
            }
        },
        error: function (xhr, ajaxOptions, thrownError)
        {
            alert("ERROR:" + xhr.responseText+" - "+thrownError);
        }
    });
 });

RF:AJAX in Plugins ( WP DOCS )