如何在PHP文件/WordPress插件中访问jQuery/AJAX数据

时间：2019-10-11 作者：Onelostpuppy

我有一个jQuery UI可排序列表，连接到另一个列表，到目前为止，我的JavaScript可以将两个列表中的HTML ID显示到屏幕上，但我很难确定如何将这些数据定向到PHP文件，以便使用它。是wp_localize_script 对我来说有必要吗？我把它指向ajaxurlplugins_url( \'my-ajax.php\' ). 是否需要转到admin_url( \'admin-ajax.php\' )?我试图在我创建的管理页面上使用它，而不是在前端。这非常令人困惑。

这就是我在WordPress中尝试将jQuery排队的方式：

add_action( \'admin_enqueue_scripts\',array($this, \'admin_scripts\' ));
function admin_scripts() {
  wp_register_script( \'admin-js\', plugin_dir_url(__FILE__) . \'/admin.js\', array(\'jquery\'), \'\', true);
  wp_localize_script( \'admin-js\', \'dtAjax\', array( \'ajaxurl\' => plugins_url( \'my-ajax.php\' , __FILE__)));
  wp_enqueue_script( \'admin-js\' );
  wp_enqueue_script( \'jquery-ui-core\' );
  wp_enqueue_script( \'jquery-ui-sortable\' );            
  wp_register_style( \'digitable_jquery\', \'//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css\', false, \'1.0.0\' );
  wp_enqueue_style( \'digitable_jquery\' );
}
这是HTML

<ul id="sortable3" class="filter-fields-list">
    <li id="1" class="ui-state-default">Item 1</li>
    <li id="2" class="ui-state-default">Item 2</li>
    <li id="3" class="ui-state-default">Item 3</li>
    <li id="4" class="ui-state-default">Item 4</li>
    <li id="5" class="ui-state-default">Item 5</li>
    <li id="6" class="ui-state-default">Item 6</li>
    <li id="7" class="ui-state-default">Item 7</li>
    <li id="8" class="ui-state-default">Item 8</li>
</ul>
<ul id="sortable4" class="filter-fields-list">
    <li id="9" class="ui-state-default">Item 9</li>
    <li id="10" class="ui-state-default">Item 10</li>
</ul>
以及JavaScript：

jQuery(document).ready(function($){
    $(document).ready(function() {
        $(\'#sortable3, #sortable4\').sortable({
            connectWith: ".filter-fields-list",
            stop: function (event, ui) {
                var data1 = $(\'#sortable3\').sortable(\'toArray\');
                var data2 = $(\'#sortable4\').sortable(\'toArray\');
                var sep = "/";
                var findata = (data1 + sep + data2);
                alert(findata);
                $.ajax({
                    data: findata,
                    type: \'POST\',
                    url: dtAjax.ajaxurl,
                    failure: function(data) {
                        alert(("You suck" + dtAjax.ajaxurl));
                    },                  
                    success: function(data) {
                        alert(("You don\'t" + dtAjax.ajaxurl));
                    }
                });
            }
        }).disableSelection();
    });
});
我应该把什么放进去my-ajax.php 获取jQuery中的警报提供给我的相同数据，并将其打印到屏幕上进行验证？请帮帮我，我不编程。我所需要的就是将这些数据输入PHP，然后我就可以知道如何处理这些数据了。

2 个回复
SO网友:Vantiya

WordPress提供了一种访问PHP变量的方法。js文件使用wp_localize_script 因此，如果您遵循这是标准做法（标准做法总是可取的）。

下一个问题是我的ajax。php和插件URL。WordPress中的所有ajax都通过admin ajax进行处理。php（标准版），该文件可在wp admin so中找到wp_localize_script 应如下所示：

wp_localize_script( \'admin-js\', \'dtAjax\', array( \'ajaxurl\' => admin_url( \'admin-ajax.php\')));
现在使用AJAX将数据发送到PHP文件。您的代码似乎适合JS。我可以建议您使用update：而不是stop：但是业务逻辑符合要求。

您还应该删除$(document).ready(function() { 最后一行是右括号。现在不需要。

这是我更新的代码，供您直接参考。

add_action( \'admin_enqueue_scripts\',array($this, \'admin_scripts\' ));
function admin_scripts() {
    wp_register_script( \'admin-js\', plugin_dir_url(__FILE__) . \'/admin.js\', array(\'jquery\'), \'\', true);
    wp_localize_script( \'admin-js\', \'dtAjax\', array( \'ajaxurl\' => admin_url( \'admin-ajax.php\')));
    wp_enqueue_script( \'admin-js\' );
    wp_enqueue_script( \'jquery-ui-core\' );
    wp_enqueue_script( \'jquery-ui-sortable\' );            
    wp_register_style( \'digitable_jquery\', \'//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css\', false, \'1.0.0\' );
    wp_enqueue_style( \'digitable_jquery\' );
}
JS文件代码应该如下所示

jQuery(document).ready(function($){
    // $(document).ready(function() {
    $(\'#sortable3, #sortable4\').sortable({
        connectWith: ".filter-fields-list",
        stop: function (event, ui) { // update: instead of stop
            var data1 = $(\'#sortable3\').sortable(\'toArray\'); // you can use serialize also instead of toArray
            var data2 = $(\'#sortable4\').sortable(\'toArray\'); // you can use serialize also instead of toArray
            var sep = "/";
            var findata = (data1 + sep + data2);
            // alert(findata);
            $.ajax({
                data: findata, 
                type: \'POST\', 
                url: dtAjax.ajaxurl, 
                success: function(data) {
                    alert(("You don\'t" + dtAjax.ajaxurl)); 
                }, 
                error: function() {
                    alert(("You suck" + dtAjax.ajaxurl)); 
                },
            });
        }
    }).disableSelection();
    // });
});

SO网友:Onelostpuppy

我的错误比我想象的要多，但我能找出我需要什么。我完全删除了wp_localize_script() 这不是必需的（这是用于“管理”选项卡）。我补充道include \'my-ajax.php\'; 到主插件。php修复了Jquery，最终得到

include \'my-ajax.php\';
function admin_scripts() 
{
    if (is_admin()) {
        wp_register_script(\'admin-js\', plugin_dir_url(__FILE__) . \'/admin.js\', array(\'jquery\'), \'\', true);
        wp_enqueue_script(\'admin-js\');
        wp_enqueue_script(\'jquery-ui-core\');
        wp_enqueue_script( \'jquery-ui-sortable\' );          
        wp_register_style( \'test_jquery\', \'//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css\', false, \'1.0.0\' );
        wp_enqueue_style( \'test_jquery\' );
    }
}
add_action(\'admin_enqueue_scripts\',array($this, \'admin_scripts\'));
管理员。js公司

jQuery(document).ready(function($){
    $(\'#sortable4, #sortable3\').sortable({
        connectWith: ".filter-fields-list",
        update: function (event, ui) {
            var list = this.id;
            var order = $(this).sortable(\'toArray\').toString();
            args = {
                url: ajaxurl,
                type: \'POST\',
                async: true,
                cache: false,
                dataType: \'json\',
                data:{
                    action: \'item_sort\', 
                    order:  order, 
                    list: list
                },
                success: function(response) {
                    //alert(list+order);
                    return; 
                },
                error: function(xhr,textStatus,e) {  
                    alert(e);
                    return; 
                }
            };
            $.ajax(args);
        }
    }).disableSelection();
});
在我的ajax中。php

<?php
function my_save_item_order() { 
    $order = explode(\',\', $_POST[\'order\']);
    $list = $_POST[\'list\'];
    if($list == "sortable3"){
        update_option(\'filter_fields_order\', $order);
    }
    if($list == "sortable4"){
        update_option(\'filter_fields_order2\', $order);
    }
    wp_die();
}
add_action(\'wp_ajax_item_sort\', \'my_save_item_order\');

标签： php   plugin-development   jquery-ui   小码农  

相关推荐

网站访问者可以查看unctions.php文件吗？

我很确定答案是“不，他们看不到functions.php或任何主题php文件”，但我在任何地方都找不到答案。