Calling a function after a click on a button in Wordpress (dev-plugin)

问题

This is my code and I wanna do what is commented near line 73 (//HOW CAN I CALL FUNCTION post_type_search_callback HERE???). The results need to be in the same page, below the "form". I was trying some tutorials about ajax in the web but without succeeded. Pls help! Thanks!

<?php

class OwnersTriplify {

	const plugin_name = 'Owners-triplify';

	public static function head() {

	}

	public static function initialize() {

		add_action('admin_menu', 'owners_triplify_admin_actions');

		function owners_triplify_admin_actions() {
		
		add_menu_page('Owners Triplify', 'Owners Triplify', 'manage_options', 'owners-triplify/includes/OwnersTriplify.php', 'owners_triplify', plugins_url('owners-triplify/images/icon.png'));
		
		}

		function register_my_setting() {
		
		register_setting( 'hd-group', 'hd_options'); 
	
		}

		add_action( 'admin_init', 'register_my_setting' );

		add_action( 'admin_enqueue_scripts', 'post_type_search_enqueue' );

		function post_type_search_enqueue($hook) {
    			
			if( 'index.php' != $hook ) {
	
				// Only applies to dashboard panel
				return;
    			}
        
			wp_enqueue_script( 'ajax-script', plugins_url( '/js/post_type_search_query.js', __FILE__ ), array('jquery') );
			
			// 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 owners_triplify() {

			?>

			<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
			<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>

			<div id="div1">

				<h3>Digite o post-type que deseja triplificar: </h3>
				<br/>
					<form method="post" name="form1" action="">
						<input name="postType" value="" id="postType">
						<input type="hidden" name="action" value="update">
						<input type="hidden" name="option_page" value="hd_options">
						<button id="button1" name="termoPesquisado" type="submit" class="button-primary">Pesquisar</button>
					</form>	
				<br/>

			</div>

			<script>

				$("#button1").click(function () {

					//HOW CAN I CALL FUNCTION post_type_search_callback HERE???

				});

				/*$("#button1").click(function () {

					if ( $("#div2").is( ":hidden" ) ) {
						
						$("#div2").slideDown();
						
						$("#div1").hide();

						} 

						else {
						
						}

				});*/

			</script>

		<?php

		}

		function pegaValores($data) {

			$data = trim($data);
			$data = stripslashes($data);
			$data = htmlspecialchars($data);
			return $data;

		}

		$termo = pegaValores($_POST["postType"]);

		?>

		<?php

		add_action('wp_ajax_post_type_search', 'post_type_search_callback');

		function post_type_search_callback() {

			?>

			<div id="div2">

			<h3>Digite as equivalências: </h3>

			<?php

			global $wpdb;
			$resultado = $wpdb->get_results("SELECT distinct meta_key FROM $wpdb->postmeta WHERE post_id in(SELECT ID FROM $wpdb->posts WHERE post_type = '".$termo."')");
			$correspondencias;
			$tamanhoResultado = count($resultado);
			
			for($i = 1; $i <= $tamanhoResultado; $i++) {

				$correspondencias[$i] = "correspondencia";

			}
			
			$contador = 1;

			//$resultado_array = array();

			foreach($resultado as $resultadoX) {

				echo "<p>". 
				$resultado_array[] = $contador."- ".$resultadoX->meta_key." => ".
				"<input value=".$correspondencias[$contador]." id='correspondencia".$contador."'/>".
				"</p>"; //descobrir como colocar $contador + 1 para imprimir, a fim de que inicialize com 0 o contador e o for do correspondencias
				
				$contador++;

				//$datacount = implode('-',$resultado_array);

				?>

			<?php

			}

			?>

			<button id="button2" name="triplify" onclick="atualizaValores()" class="button-primary" >Triplificar</button>

			</div>

		<?php

		}


	}

}

?>

回答1:

php function

Note you are declaring all your functions inside initialize.....better to declare functions outside of other functions and call them as you need them.

add_action( 'wp_ajax_post_type_search_callback', array( 'OwnersTriplify', 'my_action_post_type_search_callback' ) );
add_action( 'wp_ajax_post_type_search_callback', array( 'OwnersTriplify', 'my_action_post_type_search_callback' ) );

function post_type_search_callback() {
    $data= $_POST['variable'];

    $output= 'i was returned with ajax';
    //need to echo output and exit here
echo $output;
exit();
}

jQuery You need to use the word jQuery or define $ for jQuery to work in wordpress.

jQuery(document).ready(function() { // wait for page to finish loading 
   jQuery("#button1").click(function () {

    jQuery.ajax({
        type: "POST",
        url: "/wp-admin/admin-ajax.php",
        data: {
            action: 'post_type_search_callback',
            variable: 45 // enter in anyname here instead of variable, you will need to catch this value using $_POST['variable'] in your php function.
        },
        success: function (output) {
           console.log(output);
        }
    });

  });
});