AJAX在Wordpress插件中使用PHP文件

时间:2017-04-14 23:36:05

标签: php ajax wordpress

我正在关注W3Schools for AJAX PHP的教程。 https://www.w3schools.com/php/php_ajax_php.asp

这是扭曲:我在wordpress中这样做。以下是一种可行的方法,但它并不理想。

1)在根目录中创建以下gethint.php。

<?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)使用CSS&amp; Javascript工具箱插件,将此代码添加到标题:

<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_钩子,但是我的尝试失败了,所以我可能做错了。请帮忙。

1 个答案:

答案 0 :(得分:0)

在WordPress中执行ajax应该全部发送到/wp-admin/admin-ajax.php, 要在插件的主文件或index.php文件中执行此操作, 注册你的ajax动作如下:

// 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中,您现在可以使用全局ajaxurl javascript变量,而不是调用ajax文件的文件名:

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