使用ajax获取模板

我想做一个自定义字段搜索，可以插入任何地方它应该加载结果在同一页面中，所以我认为ajax将是技巧，但它再次加载相同的页面出于某种原因这里是我的搜索模板代码：使用ajax获取模板

<script> 
    jQuery(document).ready(function($){ 
     $("#SearchButton").click(function(){ 
      $.ajax({ 
       type: "GET", 
       ulr:'<?php echo admin_url('admin-ajax.php'); ?>', 
       data: { action : 'inline_search', Sinput: $("#searchinput").val() }, 
       success: function(result) { 
        $("#SearchResults").html(result); 
       } 
      }); 
      $("#SearchResults").css("display","block") 
     }); 
    }); 
</script> 
<div class="flexible-content__content"> 
    <div class="column"> 
     <div class="row"> 
      <?php the_sub_field('content'); ?> 
     </div> 
    </div> 
    <div class="column"> 
     <div class="row"> 
       <input id="searchinput" type="text" value="<?= $search_query; ?>" name="s" id="header-search-input" placeholder="<?php echo esc_attr_x('Search …', 'placeholder') ?>" style="border-right: none;"> 
       <bttuon id="SearchButton" class="gform_button button" value="Search">Search</bttuon> 
     </div> 
    </div> 
</div> 
<div id="SearchResults" style="max-width: 70rem; margin:auto;display:none"></div>

，我已将此添加function.php：

add_action('admin_enqueue_scripts', 'my_enqueue'); 
function my_enqueue($hook) { 
    // in JavaScript, object properties are accessed as ajax_object.ajax_url, ajax_object.we_value 
    wp_localize_script('ajax-script', 'ajax_object', 
     array('ajax_url' => admin_url('admin-ajax.php'), 'we_value' => 1234)); 
} 

function inline_search() 
{ 
    echo "hello world"; 
    get_template_part('templates/inline-search'); 
    wp_die(); 
} 
add_action('wp_ajax_nopriv_inline_search', 'inline_search'); 
add_action('wp_ajax_inline_search', 'inline_search');

来源

2017-08-24 spiderangel

您是否正在使用wp-admin进行搜索，因为您正在使用'admin_enqueue_scripts'钩子？ – mokiSRB

我所要做的就是将内嵌搜索模板加载到我的页面中，我看到有人使用该操作，所以我认为它是作为WP配置需要的。 – spiderangel

PHP的一部分会是这样。

add_action('admin_enqueue_scripts', 'my_enqueue'); 
function my_enqueue($hook) { 
    // in JavaScript, object properties are accessed as ajax_object.ajax_url, ajax_object.we_value 
    wp_register_script('ajax-script', SCRIPT_PATH, array('jquery')); 
    wp_localize_script('ajax-script', 'ajax_object', 
     array('ajax_url' => admin_url('admin-ajax.php'), 'we_value' => 1234)); 
    wp_enqueue_script('ajax-script'); 
} 

function inline_search() 
{ 
    echo "hello world"; 
    get_template_part('templates/inline-search'); 
    wp_die(); 
} 
add_action('wp_ajax_nopriv_inline_search', 'inline_search'); 
add_action('wp_ajax_inline_search', 'inline_search');

然后在JS，你有机会获得ajax_object像ajax_object.we_value。使用ajax类型POST。

$.ajax({ 
       type: "POST", 
       url: ajax_object.ajax_url, 
       data: { action : 'inline_search', Sinput: $("#searchinput").val() }, 
       success: function(result) { 
        $("#SearchResults").html(result); 
       } 
      });

来源

2017-08-24 11:02:23 mokiSRB

应该用什么来代替SCRIPT_PATH？ – spiderangel

将您的脚本移至单独的文件并放置该路径而不是该占位符。 – mokiSRB

我仍然收到错误消息：Uncaught ReferenceError：ajax_object未定义 – spiderangel

感谢@mokiSRB指出，但整个问题是一个错字我喂如此愚蠢。

改变ulr：到url修复它，它现在工作。

来源

2017-08-24 12:31:44 spiderangel

使用ajax获取模板

回答

相关问题