wordpress 中的自定义 ajax 请求答案

【问题标题】：Custom ajax requests in wordpresswordpress 中的自定义 ajax 请求
【发布时间】：2011-07-06 05:02:49
【问题描述】：

我的问题是关于我应该在哪里创建一个我想从我的页面视图中调用的 ajax 函数。

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

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

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

如何使用 wordpress 实现这一目标？我在哪里可以显式调用 php 文件并传递参数？

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

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

谢谢

【问题讨论】：

标签： jquery ajax wordpress validation

【解决方案1】：

有一些 WordPress ajax 钩子可以帮助使用 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>

【讨论】：

【解决方案2】：

原来你可以将一个函数挂钩到 ajax 函数中

http://www.1stwebdesigner.com/css/implement-ajax-wordpress-themes/

【讨论】：

【解决方案3】：

我认为一种简单的方法是创建一个新模板并将此模板分配给一个新页面。然后您可以在此模板文件中编写代码并使用页面的 url 进行 ajax 请求

【讨论】：

【解决方案4】：

试试这个，最简单的方法，我已经做过很多次了：

第一步：在functions.php中添加这些代码sn-ps

add_action( 'wp_ajax_nopriv_add_to_folder', 'add_to_folder' );
add_action( 'wp_ajax_add_to_folder', 'add_to_folder' );
function add_to_folder() {      
    global $wpdb;
    $lbm_add_request_table = $wpdb->prefix . 'lbm_add_request';
    $user_id = get_current_user_id();
    $lbmuid = $_COOKIE['lbmuid'];
    $lib_data_id = $_POST['lib_data_id'];
    $return = array();
    $return['lib_data_id'] = $lib_data_id;
    $getAddedData = $wpdb->get_row("SELECT * FROM $lbm_add_request_table WHERE lbmuid = '$lbmuid' AND  lib_data_id = $lib_data_id ", ARRAY_N);

    if ($getAddedData != null) {
        $wpdb->delete( $lbm_add_request_table, array( 'lbmuid'  => $lbmuid,'lib_data_id' => $lib_data_id) );
        $return['status'] = 'deleted';
    }else{
        $wpdb->insert( 
        $lbm_add_request_table, 
        array( 
            'user_id' => $user_id, 
            'lbmuid'  => $lbmuid,
            'lib_data_id' => $lib_data_id,
            'add_date'  => current_time('mysql')
        ));
        $return['status'] = 'added';
    }
    echo json_encode($return);
    exit();

}

第 2 步：现在在模板页面中调用 ajax

<script>
// Add to request folder ajax function call Start
jQuery( document ).on( 'click', '.add_to_folder', function() {
    var lib_data_id = $(this).prev(':input').val(); 
    jQuery.ajax({
    url : '<?php echo admin_url( 'admin-ajax.php' );?>',
    type : 'post',
    data : {lib_data_id: lib_data_id,action:'add_to_folder'},
    success : function( response ) {        
        response = $.parseJSON(response);       
        if(response.status=='added'){       
            $("#addBtn"+response.lib_data_id).val('Remove from request folder');    
            $("#addBtn"+response.lib_data_id).addClass('remove');
        }else{
            $("#addBtn"+response.lib_data_id).val('Add to request folder'); 
            $("#addBtn"+response.lib_data_id).removeClass('remove');
        }
    }
    });
});
// Add to request folder ajax function call End
</script>

【讨论】：