Use ajax without a plugin?

时间：2016-03-14 作者：mesqueeb

What I\'m trying to do:
制作一个支持ajax的搜索按钮，从输入中获取文本，并给出与该搜索匹配的帖子id列表。

注意：我对你们90%的人来说可能听起来很愚蠢，但我对ajax和wordpress还是比较陌生的，所以如果我做错了，如果有人能指出我做错了什么，或者他知道比我用的更好的指南，那就太好了。（我认为我在剧本中遇到的问题都写在下面。）

首先我想a button that uses ajax to get the title of a post-id.
我读了以下几页：

我已经在这两个页面上试用了所有这些代码，但是，我总是被卡住，因为我需要创建一个插件。I\'m not trying to create a plugin 所以我想知道我是否可以在我的搜索页面上写下所有的代码。

然而，我很难过，它不起作用，我不知道为什么。。。（我被重定向到主页）

我只是想知道我是否必须研究如何创建插件等，或者是否有一种更简单的方法可以让我通过AJAX调用获取某个ID的帖子标题，而无需使用插件？

这是我尝试的代码：

The Ajax call:

<script>    
jQuery(document).ready(function($) {           //wrapper
    $("body").on("click",".ajax",function() {             //event
        var s_str = this.value;
        console.log(s_str);
        console.log(admin_ajax_url.ajax_url);
        var this2 = this;                      //use in callback
        $.post(admin_ajax_url.ajaxurl, {         //POST request
           _ajax_nonce: get_title_nonce.nonce,     //nonce
            action: "get_title",            //action
            id: s_str,                  //data
            success: function(response) {
                if(response.type == "success") {
                    alert("success")
                }
                else {
                    alert("failed")
                }
            }
        }, function(data) {                    //callback
            $("#tt").html(data);              //insert server response
        });
    });
});
</script>

The search form:

$the_title = \'\';
 $s_str = 18694;
 $nonce = wp_create_nonce("get_title_nonce");
  $link = admin_url(\'http://jtc.ae/pre/wp/wp-admin/admin-ajax.php?action=get_title&post_id=\'.$s_str.\'&nonce=\'.$nonce);
        echo \'<a class="ajax" data-nonce="\' . $nonce . \'" data-post_id="\' . $s_str . \'" href="\' . $link . \'">\'.$s_str.\'</a> Title: <span id="tt">\'.$the_title."</span>";
The rest of the code I added as written in the guides:

<?php

add_action( \'init\', \'my_script_enqueuer\' );
function my_script_enqueuer() {
    wp_register_script(\'ajax_search\',TEMPLATEPATH.\'/new/js/ajax_search.js\', array(\'jquery\'));
    wp_localize_script(\'ajax_search\', \'admin_ajax_url\', array( \'ajaxurl\' => admin_url( \'admin-ajax.php\' )));

   wp_enqueue_script( \'jquery\' );
   wp_enqueue_script( \'ajax_search\' );
}



add_action("wp_ajax_get_title", "get_title");
add_action("wp_ajax_nopriv_get_title", "get_title_must_login");

function get_title() {
   if ( !wp_verify_nonce( $_REQUEST[\'nonce\'], "get_title")) {
      exit("No naughty business please");
   }   
   $the_title = get_the_title($_REQUEST["post_id"]);

   if(!empty($_SERVER[\'HTTP_X_REQUESTED_WITH\']) && strtolower($_SERVER[\'HTTP_X_REQUESTED_WITH\']) == \'xmlhttprequest\') {
      $result = json_encode($result);
      echo $result;
   }
   else {
      header("Location: ".$_SERVER["HTTP_REFERER"]);
   }

   die();
}
function get_title_must_login() {
   echo "You must log in to get title";
   die();
}
?>
Probably the problems lie here:<我不确定这些add_action 零件。。。如果我添加到admin ajax的链接，我想我不需要它。就像我刚才在上面所做的那样：http://jtc.ae/pre/wp/wp-admin/admin-ajax.php? 所以我可以先把这个扔掉吗add_action?

而且我认为底部add_action在我的search\\u页面上可能没有正确删除。php。但问题是：我不打算创建任何插件，所以我不知道把它们放在哪里。。。

3 个回复
最合适的回答,由SO网友:Tom J Nowell 整理而成

插件代码只是。。。代码，可以放在主题中functions.php, 或者一个插件文件，除了加载顺序之外，没有什么神奇或特殊的区别，API调用是相同的，工作方式是相同的，等等，因为它们是相同的。这就是代码的打包方式

例如，如果你想不使用插件做一些事情，可以使用插件，删除主文件顶部的注释，嘿，你已经得到了答案。

您面临的问题是，您试图将您的逻辑放在搜索页面中。但AJAX API不是这样工作的。当浏览器向AJAX端点发出请求时，不会加载任何模板，因此不会加载搜索模板，也不会加载处理请求的代码。

相反，代码需要在functions.php 始终加载。

您可以在此处看到：

add_action( \'init\', \'my_script_enqueuer\' );
你是说“当init 事件发生时，请运行此函数”，但如果您在搜索页面模板中，则该事件已经发生。请记住，模板已加载after 其他一切，而不是之前

SO网友:mesqueeb

经过多次修补，我终于得到了答案：

首先，你不需要这个：删除它

add_action( \'init\', \'my_script_enqueuer\' );
function my_script_enqueuer() {
    wp_register_script(\'ajax_search\',TEMPLATEPATH.\'/new/js/ajax_search.js\', array(\'jquery\'));
    wp_localize_script(\'ajax_search\', \'admin_ajax_url\', array( \'ajaxurl\' => admin_url( \'admin-ajax.php\' )));

   wp_enqueue_script( \'jquery\' );
   wp_enqueue_script( \'ajax_search\' );
}
其次，我把GET和POST数据搞砸了。使用此选项创建ajax搜索表单：

<form method="post" id="searchbox">
    <input value="18694" name="post_id" class="ajax">
    <input type="button" class="ajaxgo" value="Submmmittt" name="submit">
</form>
Title: <span id="tt"></span> //to test the output
并使用下面的脚本进行ajax调用，如下所示：

<script>
jQuery(document).ready(function($) {
    $("body").on("click",".ajaxgo",function(){
        console.log("fire");
        var s_str = $(".ajax").val();
        var ajax_url = "<?php echo admin_url( \'admin-ajax.php\' ); ?>";
        var get_title_nonce = "<? echo $get_title_nonce; ?>";
        var data = {
            nonce: get_title_nonce,
            action: "get_title",
            post_id: s_str, 
        };
        $.post(
            ajax_url,
            data,
            function(data) {                    //callback
                $("#tt").html(data);              //insert server response
            }
        );
    });
});
</script>
最后在模板的functions.php file:

function get_title() {

   if ( !wp_verify_nonce( $_POST[\'nonce\'], "get_title_nonce")) {
      exit("No naughty business please");
   }   
   $result = get_the_title($_POST["post_id"]);

   if(!empty($_SERVER[\'HTTP_X_REQUESTED_WITH\']) && strtolower($_SERVER[\'HTTP_X_REQUESTED_WITH\']) == \'xmlhttprequest\') {
      //$result = json_encode($result);
      echo $result;
   } else {
      header("Location: ".$_SERVER["HTTP_REFERER"]);
   }

   die();
}
function get_title_must_login() {
   echo "You must log in to get title";
   die();
}

SO网友:GitMiester

出于安全原因，您可能不想通过ajax发布ID，因为您的用户可以操纵ajax请求。以下是获取帖子id的服务器端方法：

<script>
jQuery(document).ready(function($) {
    $("body").on("click",".ajaxgo",function(){
        console.log("fire");
        var s_str = $(".ajax").val();
        var ajax_url = "<?php echo admin_url( \'admin-ajax.php\' ); ?>";
        var get_title_nonce = "<? echo $get_title_nonce; ?>";
        var data = {
            nonce: get_title_nonce,
            action: "get_title",
        };
        $.post(
            ajax_url,
            data,
            function(data) {                    //callback
                $("#tt").html(data);              //insert server response
            }
        );
    });
});
</script>
以及

function get_title() {

  if ( !wp_verify_nonce( $_POST[\'nonce\'], "get_title_nonce" ) ) {
    exit( "No naughty business please" );
  }

  $url      = wp_get_referer();
  $post_id  = url_to_postid( $url )
  $result   = get_the_title( $post_id );

  if ( !empty( $_SERVER[\'HTTP_X_REQUESTED_WITH\'] ) && strtolower( $_SERVER[\'HTTP_X_REQUESTED_WITH\'] ) == \'xmlhttprequest\' ) {
    //$result = json_encode( $result );
    echo $result;
  } else {
    header( "Location: ".$_SERVER["HTTP_REFERER"] );
  }

  die();
}

function get_title_must_login() {
  echo "You must log in to get title";
  die();
}

标签： ajax   小码农  

相关推荐

尝试在WordPress中实现AJAX注释，遇到WP错误

我试图在WordPress中为我的评论实现Ajax，使用this tutorial. 但我在将教程中的代码集成到自己的预构建主题时遇到了问题。问题是，我要么得到一个WP错误“检测到重复注释；看来你已经说过了！”或标准500错误。以下是我得到的：下面是我对ajax的评论。js文件如下所示： * Let\'s begin with validation functions */ jQuery.extend(jQuery.fn, { /* * check i