2017-04-14 13 views
0

私はAJAX PHPのW3Schoolsに関するチュートリアルに従っています。ここでAJAX Wordpress PluginでPHPファイルを使用

https://www.w3schools.com/php/php_ajax_php.aspはねじれている:私はワードプレスでこれをやっています。以下は動作するメソッドですが、理想的ではありません。

1)は、ルートディレクトリに次のgethint.phpを作成します。 CSS & Javascriptのツールボックスプラグインを使用し

<?php 
// Array with names 
$a[] = "Anna"; 
$a[] = "Brittany"; 
... 
$a[] = "Vicky"; 

// get the q parameter from URL 
$q = $_REQUEST["q"]; 

$hint = ""; 

// lookup all hints from array if $q is different from "" 
if ($q !== "") { 
    $q = strtolower($q); 
    $len=strlen($q); 
    foreach($a as $name) { 
     if (stristr($q, substr($name, 0, $len))) { 
      if ($hint === "") { 
       $hint = $name; 
      } else { 
       $hint .= ", $name"; 
      } 
     } 
    } 
} 

// Output "no suggestion" if no hint was found or output correct values 
echo $hint === "" ? "no suggestion" : $hint; 

2)、ヘッダにこのコードを追加:

<script> 
function showHint(str) { 
    if (str.length == 0) { 
     document.getElementById("txtHint").innerHTML = ""; 
     return; 
    } else { 
     var xmlhttp = new XMLHttpRequest(); 
     xmlhttp.onreadystatechange = function() { 
      if (this.readyState == 4 && this.status == 200) { 
       document.getElementById("txtHint").innerHTML = this.responseText; 
      } 
     }; 
     xmlhttp.open("GET", "/gethint.php?q=" + str, true); 
     xmlhttp.send(); 
    } 
} 
</script> 

3))は平文で(次のコードでページを作成します。

<p><b>Start typing a name in the input field below:</b></p> 
<form> 
First name: <input type="text" onkeyup="showHint(this.value)"> 
</form> 
<p>Suggestions: <span id="txtHint"></span></p> 

これは動作しますが、phpファイルを作成してルートディレクトリに追加する必要はありません。このphpファイルをpluginsディレクトリに保存する方がよいでしょう。ただし、ヘッダースクリプトのこのラインは、404として失敗している:

xmlhttp.open("GET", "/gethint.php?q=" + str, true); 

単に理論的には、異なるユーザが異なる場所でのプラグインフォルダを持つことができるので、動作しません相対パスを変更します。

私はwp_ajax_とwp_ajax_nopriv_フックを使用する必要があります理解が、私の試みは私が失敗しているので、私はおそらくそれは間違ってやっています。助けてください。ワードプレスでajaxを行う

答えて

0

は、すべてのプラグインのメインファイルまたはindex.phpファイル、 にこのようなあなたのAjaxのアクションを登録し、それを行うために/wp-admin/admin-ajax.php、 に送信する必要があります。

// let's do the ajax thing here 
add_action('wp_ajax_theNameOfMyCustomAjax', 'theFunctionThatMyAjaxWillCall'); 

function theFunctionThatMyAjaxWillCall() { 
    // include your ajax file here, in this case 
    // I assumed that we placed the gethint.php in 
    // /wp-content/plugins/yourpluginname/gethint.php 
    include(plugin_dir_path(__FILE__).'gethint.php'); 

    // don't forget to add "die;" every time you return a response to your ajax 
    //Example: echo $hint === "" ? "no suggestion" : $hint; die; 

    // or you can add the termination code right here 
    die; // this will prevent the ajax response to have 0 in the end. 

} 

、あなたのjavascriptに私はuのにできませんでした

xmlhttp.open("GET", ajaxurl+"?action=theNameOfMyCustomAjax&q=" + str, true); 
+0

:、代わりにあなたのAJAXファイルのファイル名を呼び出すので、あなたは今、このようなjavascriptの変数グローバルajaxurlを使用することができますxmlhttp.open行を書きます。私はCSSとJavascriptツールボックスを使用するのとは対照的に、jsファイルを作成することでこれを解決しました。私はこのファイルにajaxtest.jsという名前をつけて、私のgethint.phpファイル(サブディレクトリはありません)と一緒にプラグインフォルダに配置しました。私はgethint.phpに2行のコードを追加しました: 'wp_enqueue_script( 'my-ajax-request'、plugins_url( '/ajaxtest.js'、__FILE__)、array( 'jquery')); wp_localize_script( '私の-のAjaxリクエスト'、 'MyAjax'、配列( 'ajaxurl' => ADMIN_URL( '管理者-ajax.php'))); '。最後に変更:' xmlhttp.open( "GET"、MyAjax。 ajaxurl + "?action = GetHint&q =" + str、true); ' – Kumar

関連する問題