Question

更新我设法解决了这个问题，我拿出了JSON编码，几乎可以立即使用。

我是WordPress编码的新手，所以对大多数人来说解决方案可能很简单，但我想请你帮忙。

我一直在编写一个新的WordPress插件，但对于我的生活，我无法获得ajax。我有2个html元素，我想根据第一个选择中选择的内容填充第二个。

我有一个jquery更改事件的元素和内部我有ajax请求。但是ajax请求总是失败，我不知道为什么。

我的代码如下。 PHP插件代码：

<? PHP 

// up here also are css scripts and activation and deactivation hooks.

add_action('wp_enqueue_scripts', 'plugin_frontend_JS');
function plugin_frontend_JS(){
  wp_enqueue_script('jquery');
  wp_register_script('ajax_secondselect_js', plugins_url('js/ajaxsecondselect.js', __FILE__));
  wp_localize_script( 'ajax_secondselect_js', 'AJAXURL', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) );
  wp_enqueue_script('ajax_secondselect_js'); 
}


add_shortcode("plugin_shortcode_search", "plugin_shortcode_search");
add_shortcode("plugin_shortcode_result", "plugin_shortcode_result");
function plugin_shortcode_search() {

$regions = get_regions();
$types = get_types();

    echo '<div class="container">   
        <form class="form-horizontal product-form" role="form" action="localhost/search_results/" method="post">    
            <div class="row">
                <div class="column">
                    <div class="input-wrap">
                        <div class="input-label">Type</div>
                        <div class="input-select">
                            <select id="product_type" name="product_type" class="form-control">
                                '.print_select_form($types).'
                            </select>
                        </div>
                    </div>
                </div>
                <div class="column">
                    <div class="input-wrap">
                        <div class="input-label">Sub-Type</div>
                        <div class="input-select">
                            <select id="product_subtype" name="product_subtype" class="form-control">
                                <option value=""></option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="column">
                    <div class="input-wrap">
                        <div class="input-label">Region</div>
                        <div class="input-select">
                            <select name="product_region" class="form-control">
                                '.print_select_form($regions).'
                            </select>
                        </div>
                    </div>
                </div>

                <div class="search-button-row">
                    <button type="submit" class="btn btn-info">GET RESULTS</button>
                </div>
            </div>          
        </form> 
    </div>';
}
function plugin_shortcode_result() {    
    if(isset($_POST)){
        print_r($_POST);
    }else{
        plugin_shortcode_search();
    }
}

// GETS AND SETS
function get_regions(){
    $result = array("Global", "Europe", "Asia", "Ireland", "England", "America");   
    return $result;
}
function get_types(){
    $result = array("Cleaning Agents", "Cleaning Contractors", "Cleaning Equipment", "Cleanroom Components" );

    return $result;
}
function print_select_form($array){
    $text = '<option value="0">Please Select One</option>';
    foreach($array as $value){
        $text = $text.'<option value="'.$value.'">'.$value.'</option>'; 
    }
    return $text;
}

// AJAX
add_action('wp_ajax_returnsubtype', 'returnsubtype');
add_action('wp_ajax_nopriv_returnsubtype', 'returnsubtype');
function returnsubtype(){
    $option = '<option value="stuff">success</option>';
    $option = json_encode( $option );
    echo $option;
}
?>

Javascript AJAX代码：

jQuery(document).ready(function(){

    var selected_type;

    jQuery("#product_type").change(function() {
        alert("in change statement");
        selected_type = jQuery(this).val();

        //perform ajax request
        //var values = '<option value="test1">test1</option>';

        jQuery.ajax({
            type : "post",
            dataType : "json",
            url : AJAXURL.ajaxurl,
            data : {action: "returnsubtype", "type":selected_type },
            success: function(response) {
                alert(response);
                alert("success ajax request");
                jQuery("#product_subtype").empty();
                jQuery("#product_subtype").append(response);
            },
            error: function() {
                alert('failed ajax request');
                var fail = '<option>Please Select a Type</option>';
                jQuery("#product_subtype").empty();
                jQuery("#product_subtype").append(fail);
            }
        });     


        //jQuery("#product_subtype").empty();
        //jQuery("#product_subtype").append(response);


    });

});

我的代码在我的javascript中获取更改功能，如果我取消注释行

//var values = '<option value="test1">test1</option>';
//jQuery("#product_subtype").empty();
//jQuery("#product_subtype").append(response);

它将正确填充第二个。我只是不能从ajax回来。我注意到AJAXURL的url被添加了两次页面的CDDATA部分。请注意这是否重要。

我感谢你抽出时间帮我解决这个问题。

wordpress插件中的Ajax无法正常工作

0 个答案: