在wordpress中自定义ajax请求

时间:2011-07-06 05:02:49

标签: jquery ajax wordpress validation

我的问题涉及到我应该从页面视图中创建一个我想要调用的ajax函数。

我在自定义表单上使用jQuery验证器,该表单应检查输入的zipcode对我的有效zipcodes数据库。

我只需要知道这个功能应该存在的位置。

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

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

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

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

由于

4 个答案:

答案 0 :(得分:2)

事实证明你可以将函数挂钩到ajax函数

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

答案 1 :(得分:2)

有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 :(得分:0)

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

答案 3 :(得分:0)

试试这个,最简单的方法,我已经多次这样做了:

第1步:在functions.php

中添加这些代码段
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>