在 wordpress 插件下未调用 Ajax 功能

Posted

技术标签:

【中文标题】在 wordpress 插件下未调用 Ajax 功能【英文标题】:Ajax functionality not being called under wordpress plugin 【发布时间】:2017-04-28 06:21:46 【问题描述】:

我正在尝试构建一个 wordpress 插件来提供过滤器表单,它使用 Ajax 从用户发送的输入中获取数据库中的数据。我正在尝试通过 Ajax 提交表单。

我怀疑在ajax-process-form.js下放置一个AJAX调用函数form_ajax_process_request()是否正确?

这里是 ajax-process-form.js 代码

jQuery(document).ready( function($) 
jQuery('HCS-quicksearchForm').bind('submit', function() 

var data = 
    action: 'form_response',
    post_var: 'this will be echoed back'
;
console.log(the_ajax_script.ajaxurl);
$.post(the_ajax_script.ajaxurl, data, function(response) 
    alert(response);
);
return false;
);
);

<?php 
    function form_ajax_process_request() 
        if( isset( $_POST["post_var"] ) ) 
            $response = $_POST["post_var"];
            echo $response;
            die();
        
    

    add_action('wp_ajax_form_response','form_ajax_process_request');
    add_action('wp_ajax_nopriv_form_response','form_ajax_process_request');
?>

表单 UI schoolform_view.php 代码

<?php
    echo '<fieldset>';
    echo'<div id="HCS-quicksearch" class="HCS-quicksearchWrapper">';
    echo'<form id="HCS-quicksearchForm" class="hcs-school-form" action="" method="POST">';      
    echo '<div id="HCS-qsCityWrap" class="HCS-qsFieldWrap">';
    global $wpdb;
    $city_results = $wpdb->get_results ("SELECT * from wp_gj73yj2g8h_hillsborough_county_cities;"        );
    echo '<select id="city_id HCS-qsCity" name="city_name" class="HCS-qsInput HCS-qsSelectInput">';
    echo '<option value="">Choose a City</option>';
    foreach ( $city_results as $result ) 
    echo '<option>'.$result->city_name.'</option>';
    
    echo '</select>';
    echo '</div>';
    echo '<input id="HCS-qsSubmit" class="HCS-qsInput HCS-qsButtonInput" type="submit" name="form-submitted" value="Search">';      
    echo '</form>';
    echo '</div>';
    echo '</fieldset>';
?>

插件核心 school_core.php 代码

    <?
 /*
Plugin Name: Hillsborough County Homes By School Properties
Plugin URI: http://acces-s-realtytampa.com
Description: Search For Homes By School Name, Ranking and other Features
Version:0.1.0
Author: Himani Lotia

*/
define( 'HCS_URL', plugin_dir_url( __FILE__ )   );
define( 'HCS_PATH', plugin_dir_path( __FILE__ ) );
define( 'HCS_VERSION', '0.1.0'                  );

add_action('init', 'register_script');
function register_script() 
    wp_register_style( 'hcs-style', HCS_URL . '/assets/css/hcsstyle.css', FALSE, HCS_VERSION, 'all' );


add_action('wp_enqueue_scripts', 'enqueue_style');

function enqueue_style() 
    wp_enqueue_style('hcs-style');


function ajax_load_scripts() 
    wp_enqueue_script("ajax-process-form", HCS_URL. 'ajax-process-form.js', array( 'jquery' ) );
    wp_localize_script ( 'ajax-process-form', 'the_ajax_script', array('ajaxurl' => admin_url(admin-ajax.php ) ) );


add_action('wp_print_scripts', 'ajax_load_scripts');

function schoolform() 

    enqueue_style();
     $saved_data =  get_option('save_plugin_settings');
     $saved_data = $saved_data ? unserialize($saved_data) : null ;

     include_once(HCS_PATH . '/schoolform_view.php');



function hcs_shortcode() 
    ob_start();
    schoolform();
    return ob_get_clean();


add_shortcode('hcs_school_filter','hcs_shortcode');
?>

在我的 google chrome 控制台中,ajax-process-form.js 存在,但在控制台日志中显示语法错误。

【问题讨论】:

【参考方案1】:

我认为在使用 admin_url() 时需要将 admin-ajax.php 放在引号中

【讨论】:

以上是关于在 wordpress 插件下未调用 Ajax 功能的主要内容,如果未能解决你的问题,请参考以下文章

Wordpress 插件类和 Ajax

在 https 下未加载重力表单,未定义 jQuery

在 WordPress 插件中使用 AJAX

Wordpress、管理菜单、Ajax 400 错误请求

使用带有 Wordpress 插件的 ajax 重新加载

ajax在WordPress中加载页面后如何触发jquery插件?