Ajax is not defined

时间：2020-03-12 作者：Daniel Nebert

堆栈交换长时间侦听器，第一次调用。

我找到了关于开发人员的示例。wordpress网站，但我一直在努力。

本地化脚本：wp_localize_script()

在我的主题功能中。php文件，我有：

function wp_my_ajax_script() {
   wp_localize_script( \'ajax_handle_agent_search\', \'myAjax\', admin_url( \'admin-ajax.php\' ));        

   wp_enqueue_script( \'ajax_handle_agent_search\' );
}
add_action( \'wp_enqueue_scripts\', \'wp_my_ajax_script\' );
在我的页面上，我添加了一个HTML代码wdiget，其中包含：

<script>
jQuery(document).ready( function() {
    console.log("Document loaded");
   jQuery("#searchButton").click( function(e) {
      console.log("Search button clicked");
      console.log("Ajax: " . myAjax);
      e.preventDefault(); 
      var zipCode = document.getElementById("inputField").value;
      console.log("Zip code entered: " + zipCode);
      jQuery.ajax({
         type : "post",
         dataType : "json",
         url : myAjax.ajaxurl,
         data : {
             action: "zip_search_action",
             zip_code : zipCode
         },
         success: function(response) {
            if(response.type == "success") {
                console.log("In success");
                document.getElementById("results").html = response.data;
            }
            else {
                console.log("In success, in else!");
            }
         },
        error: function(errorThrown){
            console.log("In error, error thrown!");
            console.log(errorThrown);
        }
      })   

   });

});
</script>

<input type="text" id="inputField">
<input type="button" value="Search" id="searchButton">
然后我加载页面，在输入字段中输入邮政编码，然后单击按钮。开发人员工具控制台显示：

Developer Tool console with error message

我已经为此工作了几周了，我在为Wordpress开发方面做得更好了，但web开发不是我的强项，所以当我觉得自己已经达到极限后，我会寻求帮助。任何能让我向前迈进的见解都将不胜感激。

提前感谢！

=======================================在1342 CST处编辑2020年3月12日

我已经将JS代码移动到主题JS目录中自己的文件中，权限为0755。然后，我在函数中添加了一个新函数。包含排队和本地化函数调用的php文件（如下所示）

function my_load_scripts() {
    wp_enqueue_script( \'zip_js\', get_template_directory_uri() . \'/js/zip_search.js\' );
    wp_localize_script( \'zip_js\', \'Zip_JS\', null);
}
add_action(\'wp_enqueue_scripts\', \'my_load_scripts\');
现在控制台显示：jQuery error

====================================+++=在20年3月13日0806 CST编辑，我已经做得更进一步了。至少我相信是这样。下面是Wordpress中当前的代码，后面是控制台错误的屏幕截图。

在我的JS文件（）中：

jQuery(document).ready( function() {
    console.log("Document loaded");
   jQuery("#searchButton").click( function(e) {
      console.log("Search button clicked");
      e.preventDefault(); 
      var zipCode = document.getElementById("inputField").value;
      console.log("Zip code entered: " + zipCode);
      jQuery.ajax({
         type : "post",
         dataType : "json",
         url : myAjax.ajaxurl,
         data : {
             action: "zip_search",
             zip_code : zipCode
         },
         success: function(response) {
            if(response.type == "success") {
                console.log("In success");
                //jQuery("#results").html(response.data);
                document.getElementById("results").html = response.data;
            }
            else {
                console.log("In success, in else!");
                console.log(response);
            }
         },
        error: function(errorThrown){
            console.log("In error, error thrown!");
            console.log(errorThrown);
        }
      });   
   });

});
在函数中。php这次包括我的DB查询：

function my_load_scripts() {

    // Enqueue javascript on the frontend.
    wp_enqueue_script(
        \'zip_js\',
        get_template_directory_uri() . \'/js/zip_search.js\',
        array(\'jquery\')
    );

    // The wp_localize_script allows us to output the ajax_url path for our script to use.
    wp_localize_script(
        \'zip_js\',
        \'myAjax\',
        array( \'ajax_url\' => admin_url( \'admin-ajax.php\' ) )
    );

}
add_action( \'wp_enqueue_scripts\', \'my_load_scripts\' );



function zip_search()
{
    global $wpdb;

    $output = \'\';

    $zip = $_REQUEST[\'zipCode\'];    

    $query = \'SELECT county FROM Agent WHERE zip = %s\';
    $result = $wpdb->get_var( $wpdb->prepare($query, $zip) );
    $output .= "<p>";
    $output .= $result;
    $output .= "</p>";

    $query = \'SELECT zip, county, zone, agent FROM Agent WHERE county = %s\';

    $results = $wpdb->get_results( $wpdb->prepare($query, $result) ); 


    $output .= "<ul>";
    foreach( $results as $result ) 
    {
        $output .= "<li>".$result->zip." - ".$result->zone." - ".$result->agent."</li>";
    }
    $output .= "</ul>";

    $result[\'type\'] = "success";
    $result[\'data\'] = $output;

    return json_encode($result);
    die();
}
add_action(\'wp_ajax_zip_search_action\', \'zip_search\');
add_action( \'wp_ajax_nopriv_zip_search_action\', \'zip_search\' );
在我的Wordpress页面上：

<input type="text" id="inputField">
<input type="button" value="Search" id="searchButton">
控制台：New console error with status 200 and statusText of "OK"

编辑：2020年3月13日上午11:52，CST添加工作代码。希望任何有类似问题的人都能看到我做了些什么，这会有所帮助

JS：

jQuery(document).ready( function() {
    console.log("Document loaded");
   jQuery("#searchButton").click( function(e) {
      console.log("Search button clicked");
      e.preventDefault(); 
      var zipCode = document.getElementById("inputField").value;
      console.log("Zip code entered: " + zipCode);
      jQuery.ajax({
         type : "post",
         dataType : "json",
         url : myAjax.ajaxurl,
         data : {
             \'action\': "zip_search",
             \'zip_code\' : zipCode
         },
         success: function(response) {
            console.log(response.data);
            if(response.success) {
                console.log("response.type == success");
                jQuery("#results").html(response.data.data);
            }
            else {
                console.log("response.type == else");
                console.log(response.data);
            }
         },
        error: function(errorThrown){
            console.log("In error, error thrown!");
            console.log(errorThrown);
        }
      })
   })
})
功能。php：

add_action(\'wp_ajax_zip_search\', \'zip_search\');
add_action(\'wp_ajax_nopriv_zip_search\', \'zip_search\' );
function zip_search()
{
    global $wpdb;

    $output = \'\';

    $zip = $_REQUEST["zip_code"];   


    $query = \'SELECT county FROM Agent WHERE zip = %s\';
    $result = $wpdb->get_var( $wpdb->prepare($query, $zip) );
    $output .= "<p>";
    $output .= $result;
    $output .= "</p>";

    $query = \'SELECT zip, county, zone, agent FROM Agent WHERE county = %s\';

    $results = $wpdb->get_results( $wpdb->prepare($query, $result) ); 


    $output .= "<ul>";
    foreach( $results as $result ) 
    {
        $output .= "<li>".$result->zip." - ".$result->zone." - ".$result->agent."</li>";
    }
    $output .= "</ul>";

    $response = array(
        \'data\' => $output,
    );

    wp_send_json_success($response);

    //return json_encode($response);
    //die();
}

add_action( \'wp_enqueue_scripts\', \'my_load_scripts\' );
function my_load_scripts() {

    // Enqueue javascript on the frontend.
    wp_enqueue_script(
        \'zip_js\',
        get_template_directory_uri() . \'/js/zip_search.js\',
        array(\'jquery\')
    );

    // The wp_localize_script allows us to output the ajax_url path for our script to use.
    wp_localize_script(
        \'zip_js\',
        \'myAjax\',
        array( \'ajaxurl\' => admin_url( \'admin-ajax.php\' ) )
    );

}
HTML：

<input type="text" id="inputField" placeholder="Enter zip code here">
<input type="button" value="Search" id="searchButton">

2 个回复
SO网友:Mikhail

没有定义jQuery，因为您没有将jQuery称为脚本的依赖项，所以wp不知道应该为脚本加载它。

wp_localize_script 应在已通过链接的脚本上调用wp_enqueue_script, 所以你第一次跑步wp_enqueue_script 然后wp_localize_script 就像你在UPD中所做的那样。

还有一件事wp_localize_script 是否需要3个参数（请参见https://developer.wordpress.org/reference/functions/wp_localize_script/), 最后一个是关联数组。

所以如果你想在JS代码中ajaxurl 通过myAjax.ajaxurl 你需要打电话wp_localize_script( \'zip_js\', \'myAjax\', array( \'ajaxurl\' => admin_url( \'admin-ajax.php\' ) ));

下面的代码将脚本的新命名考虑为zip_js 全局js变量现在是Zip_JS, 因此，您将访问ajaxurl 在js代码中，如Zip_JS.ajaxurl 而不是myAjax.ajaxurl .

以下是修复jQuery缺失错误以及正确使用本地化脚本所需的方法：

function my_load_scripts() {
    wp_enqueue_script( \'zip_js\', get_template_directory_uri() . \'/js/zip_search.js\', array(\'jquery\') );
    wp_localize_script( \'zip_js\', \'Zip_JS\', array( \'ajaxurl\' => admin_url( \'admin-ajax.php\' ) ));
}
add_action(\'wp_enqueue_scripts\', \'my_load_scripts\');

SO网友:Asha
        #try this
    function wpb_adding_scripts() {
        wp_register_script(\'my_amazing_scripts\', plugins_url(\'jquery.js\', __FILE__), array(\'jquery\'), \'3.4.1\', true);
        wp_enqueue_script(\'my_amazing_scripts\');
    }


        <form id="article_form" name="article_form" class="wordpress-ajax-form" method="post" action="<?php echo admin_url(\'admin-ajax.php\'); ?>" enctype="multipart/form-data" >
        <input type="hidden" name="action" value="custom_action">
        </form>

<script>
jQuery(document).ready(function(evt) {
  $(".wordpress-ajax-form").submit(function(evt){  

            $.ajax({
                url: $(\'#article_form\').attr(\'action\'),
                type: \'POST\',
                data: formData,
                async: true,
                cache: false,
                contentType: false,
                enctype: \'multipart/form-data\',
                processData: false,
                success: function (response) {
                 alert(response);

                }
              });
    });  
  });

标签： ajax   wp-enqueue-script   wp-localize-script   小码农  

相关推荐

如何从插件执行最简单的前端AJAX调用？

我试图让这件事尽可能简单，只是为了了解基本情况，但我一直收到来自管理ajax的400个错误和0个响应。php。我只想用一些数据打ajax。这是我的js：jQuery(document).ready(function($) { $(\'body\').click(function(e){ $.ajax({ action: \'the_ajax_hook\', data: \'field=data\',