使用AJAX将.php文件加载到div

时间:2017-02-18 作者:Eckstein

在一个充当页面模板的插件文件中,我包含了一个php文件,该文件在页面上生成一些内容。

一个简化的示例:

<div id="content">
<?php include(\'path-to-file.php\'); ?>
</div>
我希望这个div在单击页面上的某个元素时“刷新”。在非wordpress环境中,我可以使用。load()以获取。php文件并将其放入div中,如下所示:

$(\'#content\').load(\'path-to-file.php\');
但在Wordpress中,您不能像这样直接访问文件,它会抛出404错误。

通过ajax从服务器获取内容的官方方法是通过Wordpress的管理ajax。带有动作集的php,如下所示:

PHP:

add_action(\'wp_ajax_tps_refresh_cart_display\', \'tps_refresh_cart_display\');
add_action(\'wp_ajax_nopriv_tps_refresh_cart_display\', \'tps_refresh_cart_display\');
function tps_refresh_cart_display() {

    // Grab php file from server
    $result[\'phpfile\'] = \'path-to-file.php\';

    $result = json_encode($result);
    echo $result;
    die();
}
JS公司:

$.ajax({
            type : \'post\',
            dataType : \'json\',
            url : myAjax.ajaxurl, //we can use this value because in our php file we used wp_localize_script
            context:this,
            data : {action: \'tps_refresh_cart_display\', },
            success: function(response) {
                //load the fetched php file into the div
                $(\'#content\').load(response.phpfile);
            }
    });
但我正在努力找出如何获取php文件,并让Wordpress让我将其加载到div中。load()在ajax调用返回后,仍然抛出404。有没有什么方法可以像wp\\u localize\\u script对js脚本那样本地化php文件?

我还是做错了吗?感谢您的帮助。

1 个回复
最合适的回答,由SO网友:Mark Kaplun 整理而成

以您尝试的方式加载PHP文件仍然是对该文件的直接访问。您应该做的是在服务器端处理ajax请求的过程中“运行”文件,并将结果发送回浏览器。然后将结果插入div.

您的代码应该是

add_action(\'wp_ajax_tps_refresh_cart_display\', \'tps_refresh_cart_display\');
add_action(\'wp_ajax_nopriv_tps_refresh_cart_display\', \'tps_refresh_cart_display\');
function tps_refresh_cart_display() {

    // Grab php file output from server
    ob_start();
    include(\'path-to-file.php\');
    $result[\'content\'] = ob_get_contents(); 
    $result = json_encode($result); // use wp_send_json instead to make this shorter
    echo $result;
    die();
}
然后在JS上,您应该执行以下操作

success: function(response) {
                //load the fetched "result" of the php file into the div
                $(\'#content\').insert(response.content);
            }

相关推荐

WordPress AJAX错误400向远程站点发送数据的错误请求

我正在使用发件人。net获取电子邮件订阅列表。这个网站给了我一些信息,可以将用户的电子邮件添加到订阅列表中。我想使用WordPress ajax来实现这一点。但它返回错误400错误请求。我的代码是:文件ajax新闻脚本。js公司: jQuery(document).ready(function($){ // Perform AJAX send news on form submit $(\'form#fnews\').on(\'submit\', funct