jquery - WordPress 中的自定义 ajax 请求

Question

我的问题涉及我应该在哪里创建一个我想从页面 View 调用的ajax函数。

我在自定义表单上使用 jQuery 验证器，该验证器应该根据我的有效邮政编码数据库检查输入的邮政编码。

我只需要知道这个函数应该存在于哪里。

通常，当使用非 WordPress 站点时，我会使用 ajax 函数创建一个 PHP 文件，并通过引用此页面的 URL 并传递一些参数来调用它们。

如何使用 WordPress 实现此目的？我在哪里可以显式调用 php 文件并传递参数？

注意:我想像这样调用 ajax 函数:

$.post('http://mysite.com/ajax-functions.php?fxn=zipcodes',
    {zipCode:00000},
    function(response){
      // do stuff
    });

谢谢

Answer 1

WordPress 有 ajax Hook ，可以帮助使用 ajax 创建函数。 Wordpress 允许管理员 ajax 运行任何功能。以下代码有助于在 wordpress 中使用自定义 ajax。

<?php
// javascript ajax call with click event
add_action('wp_head', 'ajx_action_javascript_wp');
function ajx_action_javascript_wp() {
?>

<script type="text/javascript" >
jQuery(document).ready(function($) {
    $('.myajax').click(function(){
      //alert(1);
      var mydata = $(this).data();
      //var termID= $('#locinfo').val();
      $('#wpajaxdisplay').html('<div style="text-align:center;"><img src="<?php echo get_template_directory_uri(); ?>/images/bx_loader.gif" /></div>');
      //console.log(mydata);
        var data = {
            action: 'custom_action',
            //whatever: 1234,
            id: mydata.id
        };

        $.post('<?php echo esc_url( home_url() ); ?>/wp-admin/admin-ajax.php', data, function(response) {
           // alert('Got this from the server: ' + response);
           $('#wpajaxdisplay').html(response);      
        });
    });
});

</script>
<?php
}

add_action('wp_ajax_custom_action', 'custom_action_callback_wp');
add_action( 'wp_ajax_nopriv_custom_action', 'custom_action_callback_wp' );

function custom_action_callback_wp() {
     global $wpdb; // this is how you get access to the database
     $getid = 'ID=> '. $_POST['id'];
     echo $getid;
     // do something
     exit(); // this is required to return a proper result
} ?>

HTML 部分

<a href="#ajaxthing" class="myajax" data-id="600">Click On this</a>
<div id="wpajaxdisplay">Ajax Result will display here</div>