Question

我有一个wordpress自定义插件，它有一个需要动态更新的下拉框

我有插件代码显示：

$path = "cat.js";
        wp_enqueue_script('jquery');
        wp_enqueue_script( 'popup', $path, array('jquery') );
     $output =  "<div id='catSelect'><select id='CategoriesSelect' onchange='getDeals()'><option>Select Category</option>           </select><br/>          </div>";

我有cat.js文件中的

        function popup(){
       alert('hello there this is a test popup');
    }
    document.write("I have comments in my JavaScript code!");
    window.addEventListener('load',function(event){getCategories();},false);

        function getCategories()
            {
        //
        alert('hello there this is a test popup');
                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

没有nonce，它在WordPress中不起作用。

你需要有functions.php

function my_scripts(){
    wp_enqueue_script('my_script', get_stylesheet_directory_uri() . '/my_script.js', array('jquery'), '1.0.0', false);
    wp_localize_script('my_script', 'my_ajax', 
        array(
        'url' => admin_url('admin-ajax.php'),
        'nonce' => wp_create_nonce('my-nonce')
        )
        );
}
add_action( 'wp_enqueue_scripts', 'my_scripts' );

mypcript.js中的

就像那样

jQuery("#popup").dialog({autoOpen: false});
        var data = {
            action: 'my_action',
            type: 'login_form',
            post_id: 0,
            nonce: my_ajax.nonce
        };

最后，就像在functions.php

中那样

// Ajax callback
function my_action_callback() {
    $nonce = $_POST['nonce'];

    // check nonce
    if ( !wp_verify_nonce( $nonce, 'my-nonce' ) )
        wp_die ('Bad nonce!');

    $type = $_POST['type'];

    switch ($type) {
    case 'action_form':
        break;
    case 'login_form':
        break;
    case 'password_reset_form':
        break;
    }

    wp_die(); // it is needed to have nothing else in output
}
add_action('wp_ajax_my_action', 'my_action_callback');
add_action('wp_ajax_nopriv_my_action', 'my_action_callback');

使用自定义插件和ajax的WordPress动态下拉列表

1 个答案: