WordPress前端的AJAX调用

时间:2014-08-19 作者:Zammuuz

在我的插件中,我在后端使用了两个ajax调用。这很有效。但为了在前端提供相同的功能,我用另一个名称加载了这两个函数的副本,我的代码是:

在我的插件主文件中:

function my_action_callback(){
  global $wpdb; 
if (@$_POST[\'id\']) {

    $daty = $wpdb->get_results("select eemail_id,eemail_content,eemail_subject  from " . WP_eemail_TABLE . " where 1=1 and eemail_status=\'YES\' and eemail_id=" . $_POST[\'id\']);
    //echo "select eemail_id,eemail_content,eemail_subject  from ".WP_eemail_TABLE." where 1=1 and eemail_status=\'YES\' and eemail_id=".$_POST[\'id\'];

    if (!empty($daty)) {
        foreach ($dat as $datt) {
            echo $datt->eemail_content . "_" . $datt->eemail_subject;
            die();
        }
      }
     } 
   }
  add_action(\'wp_ajax_nopriv_my_action\', \'my_action_callback\');
在我的设置中。js公司

function showEntryfront(id)
   {


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

    var data = {
        action: \'my_action\',
        id: id

    };

     jQuery.post(ajaxurl, data, function(response) {
        //alert(\'Got this from the server: \' + response);
        var n=response.split("_");  
        jQuery(\'textarea#mail_contents\').text(n[0]);
        $(\'#mail_subject\').val(n[1]);
        // jQuery(\'textbox#mail_subject\').text(n[1]);
          });
       });
   }
触发此showEntryfront()的插件页面是:

<select name="eemail_subject_drop" id="eemail_subject_drop" onchange="showEntryfront(this.value)">
                <option value="">Select Email subject</option>
                <?php echo $eemail_subject_drop_val; ?>
            </select>
            <input type="hidden" name="send" value="" id="send" /> </td>
  <tr height="60px;"> <td>
            <textarea   name="mail_contents" id="mail_contents" rows="4" cols="40" ></textarea>

        </td></tr>
第二个功能也是如此。只有db表不同。

我的firebug控制台仍然显示

ReferenceError: ajaxurl is not defined
jQuery.post(ajaxurl, data, function(response) {
而且textarea没有填充WP\\u eemail\\u表中的db数据。请不要认为此功能在wp admin后端工作。我知道admin中的ajax调用将由admin ajax自动加载。php。但我如何在前端实现同样的功能呢。我的代码有错误吗??

2 个回复
最合适的回答,由SO网友:Nilambar Sharma 整理而成

您必须使用wp_localize_script 作用在管理端ajaxurl 已可用。但在前端,您必须本地化脚本以定义ajaxurl.

示例:

wp_enqueue_script( \'custom-ajax-request\', \'/path/to/settings.js\', array( \'jquery\' ) );
wp_localize_script( \'custom-ajax-request\', \'MyAjax\', array( \'ajaxurl\' => admin_url( \'admin-ajax.php\' ) ) );

SO网友:Philipp

实际上有一个integrated solution in WordPress core 在前端使用Ajax!WordPress有一个鲜为人知但非常有用的javascript库,可以通过JS对象访问该库window.wp, 像这样:

// In JS:

var action = \'my_action\';
var data = {id: 123};

var promise = window.wp.ajax.post( action, data );
promise.always(function(response) {
  console.log(\'Ajax done:\', response);
});

// the promise object also has other methods:
// `done()` / `fail()` / `progress()` / `state()` / `abort()`
优点是,这个对象由WordPress核心维护和使用。因此,您可以相信它是最新的、有效的、最健壮的处理Ajax的方法。还要注意的是,您不需要处理jQuery内容。。。

如果没有javascript对象window.wp 在前端,您需要通过将此WP核心脚本排队来加载它:

<?php

wp_enqueue_scripts( \'wp-utils\' );

结束

相关推荐

用“jquery.cycle.all.js”创建特殊的WordPress幻灯片

我想创建自己的幻灯片而不使用任何滑块插件Shear是我的代码--在页脚中---<script type=\"text/javascript\" src=\"<?php bloginfo( \'template_url\' );?>/js/jquery.cycle.all.js\"></script> <script type=\"text/javascript\" src=\"http://ajax.googleapis.com/ajax/libs/