web-dev-qa-db-ja.com

ワードプレスのフロントエンドでのAjax呼び出し

私のプラグインでは、バックエンドで2つのAjax呼び出しを使用しています。それはうまくいった。しかし、フロントエンドで同じ機能を提供するために、これら2つの関数のコピーを別の名前でロードしました。私のコードは次のとおりです。

私のプラグインメインファイルで：

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');

そして私のsettings.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>

2番目の機能も同じです。 dbテーブルだけが異なります。

それでも私のFirebugコンソールショー

ReferenceError: ajaxurl is not defined
jQuery.post(ajaxurl, data, function(response) {

そしてtextareaはテーブルWP_eemail_Tableからのdbデータでいっぱいになっていません。この機能がwp-adminバックエンドで機能していたのではないか。私はadminのAjax呼び出しが自動的にadmin-ajax.phpによってロードされることを知っています。しかしどのように私はフロントエンドで同じを実装することができます。私のコードに誤りがありますか？

jqueryajaxfront-end
1
Zammuuz

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' ) ) );
4
Nilambar

実際には WordPressコアに統合されたソリューションがあります フロントエンドで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' );
3
Philipp