如何在WordPress帖子中运行AJAX?

时间:2015-03-16 作者:Mina Ragaie

我试图在WordPress中使用ajax。我在单个会议中有两个组合框。php第二个组合框值基于第一个组合框中的选择

这是我的single-meetings.php

<form action="#" name="form" id="form" method="post">
<div id="check-in-date-wrap">
<select name="search_category"  id="check-in-date">
    <option value="03/10/2015">"03/10/2015"</option>
    <option value="03/11/2015">"03/11/2015"</option>
    <option value="03/12/2015">"03/12/2015"</option>
    <option value="03/13/2015">"03/13/2015"</option>
</select>   
<div id="check-out-date-wrap">
// a combobox should be created here
</div>
<img src="loader.gif" style="margin-top:8px; float:left" id="loader" alt="" />
<input type="submit" name="" value="GO" />
</form>
我还有另外两个文件,php和js

这是我的php代码combo_check-out.php

  <?php
        function iRange($first, $last, $format = \'m/d/Y\' ) { 
        $dates = array();
        $current = strtotime($first);
        $i=1;
        while( $i <= $last ) { 
            $dates[] = date($format, $current);
            $current = strtotime(\'+1 day\', $current);
            $i++;
        }

        $time = date("m/d/Y",$current);
        return $time;
    }

    if($_REQUEST)
    {
        $id     = $_REQUEST[\'parent_id\'];
        ?>


        <select name="check-out"  id="check-out-date">
            <option value="<?php echo iRange($id, 1, $format = \'m/d/Y\' ) ?>">"1 Day (Same Day)"</option>
            <option value="<?php echo iRange($id, 2, $format = \'m/d/Y\' ) ?>">"2 Days"</option>
            <option value="<?php echo iRange($id, 3, $format = \'m/d/Y\' ) ?>">"3 Days"</option>
            <option value="<?php echo iRange($id, 4, $format = \'m/d/Y\' ) ?>">"4 Days"</option>
        </select>   

    <?php}?>
这是我的js代码combo_checkout_iRange.js

$(document).ready(function() {
    $(\'#loader\').hide();
    $(\'#check-in-date\').change(function(){
        $(\'#check-out-date-wrap\').fadeOut();
        $(\'#loader\').show();
        $.post("combo_check-out.php", {
            parent_id: $(\'#check-in-date\').val(),
        }, function(response){
            setTimeout("finishAjax(\'check-out-date-wrap\', \'"+escape(response)+"\')", 400);
        });
        return false;
    });
});

//JQuery to hide Loader and return restults
function finishAjax(id, response){
  $(\'#loader\').hide();
  $(\'#\'+id).html(unescape(response));
  $(\'#\'+id).fadeIn();
} 

function alert_id()
{
    if($(\'#check-out-date\').val() == \'\')
    alert(\'Please select a sub category.\');
    else
    alert($("#check-out-date").val());
    return false;
}
他们在wordpress之外工作得很好

如何将它们整合到wordpress主题中

Note: 这应该适用于称为“会议”的帖子类型,所以这是我写的function.php

add_action("wp_enqueue_scripts", function() {

     if (is_single()) {
        if (get_post_type() == \'meetings\')
        {
            wp_enqueue_script(\'combo_checkout_iRange\', get_template_directory_uri() . \'/js/combo_checkout_iRange.js\', array( \'jquery\' ), \'1.0\' ,true);

        }
    }
});

2 个回复
最合适的回答,由SO网友:Marcin 整理而成

我认为其中一条评论应该可以解决您的问题,因为您提到代码在WordPress之外工作,这实际上似乎是您引用$而不是jQuery时的问题。

此外,我已经就这个主题写了一篇帖子,并附有逐步说明,你可以在这里看到:Ajax Calls in WordPress

SO网友:Stas Arshanski

首先,当我想编写AJAX代码时,我通过添加一个可从js访问的AJAX url来启动AJAX注册。

wp_localize_script( "combo_checkout_iRange", "server_obj", array(
    "ajax_url"=>admin_url("admin-ajax.php")
) );
从javascript文件中,我可以这样调用ajax服务器:

jQuery.post(server_obj.ajax_url, {\'action\':\'The_ajax_action_name\'},function(return) {})
要在PHP中创建一个函数来处理请求并将数据返回给客户端,请在函数中添加以下行。php文件:

add_action(\'wp_ajax_The_ajax_action_name\', \'The_ajax_action_name_ajax\');           // for logged in user
add_action(\'wp_ajax_nopriv_The_ajax_action_name\', \'The_ajax_action_name_ajax\');    // if user not logged in

function The_ajax_action_name_ajax() {}
因此,“The\\u ajax\\u action\\u name”是ajax操作参数名称,是wp action hook的后缀,名为wp\\u ajax\\u0{name\\u goes\\u here}

结束

相关推荐

如何在PHP中检查AJAX现时值

我正在修改媒体模式,添加一个新的菜单项以向媒体库添加外部附件。从JS代码中,我调用了一个PHP函数,该函数涉及数据库并接受三个参数(url、post-id和nonce)。我的问题是,如何从PHP代码中检查nonce?另一个问题,在这种情况下发送nonce真的有必要吗?JS:wp.media.controller.Custom = wp.media.controller.State.extend({ initialize: function(){ this.