使用带有jQuery插件Jedable的AJAX在定制表上插入查询

时间：2014-02-19 作者：Mariano

我已经读了很多帖子，但没有找到解决办法。。。

我正在努力实现Jeditable 具有以下代码的插件中的功能：

jQuery(document).ready(function() {
    jQuery(\'.edit\').editable(\'http://localhost/www/wp-content/plugins/my_plugin/save.php\'
});

如果在中save.php 我只是回显一些东西，它将返回到我正在更新的文本字段，没有问题。问题是如何将其插入数据库。。。如果我使用此选项：

if (isset($_POST[\'id\'])) {
    global $wpdb;
    $query = "INSERT INTO table (col1, col2, col3) VALUES (\'%d\', \'%s\', \'%d\')";
    $wpdb->query($wpdb->prepare($query, \'10\', $_post[\'value\'], \'0\'));
    echo $_POST[\'value\'];
}

我得到以下错误：

“致命错误：对[…]中的非对象调用成员函数QUERY（）。”在线6“

（第6行为$wpdb->query([...]);).

现在，我从其他帖子中了解到的是，我不能打电话save.php 直接来自AJAX。我没有得到的是我该怎么做。我尝试了这些帖子的所有解决方案，并阅读了官方Codex page 没有成功。

1 个回复

最合适的回答,由SO网友:David 整理而成

你应该使用WordPressAJAX-API 用于这些目的，而不是自定义脚本。您的问题是，脚本中没有加载所有WordPress API对象。

Here is an answer 它描述了AJAX-API在非常相似的情况下的用法。在那里，将在wpse_126886_ajax_handler() 作用同样，您也可以运行任何其他需要的查询。

根据评论中的新信息进行编辑：

您可能已经提到了»Jeditable«是jQuery的一个插件，并且有相关文档。

无论如何documentation jQuery插件的（»参数引用«）部分介绍了一种方法，您可以将更多参数传递给脚本。但首先，让我解释一下，如何将脚本排队以及如何传递数据（例如nonce slug）到它：

/**
 * enqueue jquery, jquery-jeditable and custom script
 * and pass some data to
 *
 * @wp-hook wp_enqueue_scripts
 * @return void
 */
function wpse_135219_enqueue_scripts() {

    wp_register_script(
        \'jquery-jeditable\',
        plugin_dir_url( __FILE__ ) . \'js/jquery-jeditable.js\',
        array( \'jquery\' ),
        \'1.7.1\',
        TRUE
    );

    wp_register_script(
        \'wpse-135219\',
        plugin_dir_url( __FILE__ ) . \'js/wpse-135219.js\',
        array( \'jquery-jeditable\' ),
        \'1.7.1\',
        TRUE
    );

    $script_settings = array(
        \'ajaxUrl\' => home_url( \'/wp-admin/admin-ajax.php\' ),
        \'nonce\'   => wp_create_nonce( \'wpse_135219\' ),
        \'action\'  => \'wpse_135219\'
    );
    wp_localize_script(
        \'wpse-135219\',
        \'wpSE135219\',
        $script_settings
    );

    wp_enqueue_script( \'wpse-135219\' );
}
add_action( \'wp_enqueue_scripts\', \'wpse_135219_enqueue_scripts\' );

这些函数位于名为wpse-135221.php. 插件文件结构如下所示：

- wpse-135219-plugin/
--- js/
----- jquery-jeditable.js
----- wpse-135219.js
--- wpse-135219.php

使用wp_localize_script() 初始化名为wpSE135219 您可以在这里找到您的nonce甚至ajax URL。

下面是一个如何将其用于Jeditable的示例(wpse-135219.js):

( function( $ ) {
    \'use strict\';

    $( document ).ready( function() {
        var settings  = wpSE135219,
            params    = {
                wp_nonce : settings.nonce,
                action   : settings.action
            };

        $( \'.edit\' ).editable( settings.ajaxURL, {
            submitdata : params
        } );
    } );

} )( jQuery );

现在您有了以下请求参数：

action    "wpse_135219"
id        "your_html_id"
value     "your_value"
wp_nonce  "3bd42174ec" // a wp nonce string

如上面提到的答案所示，必须在其上附加ajax处理程序的操作必须是admin_ajax_wpse_135219:

add_action( \'admin_ajax_your_form_action\', \'wpse_135219_ajax_handler\' );
function wpse_135219_ajax_handler() {
    // your query stuff goes here
    // don\'t forget to check $_POST[ \'wp_nonce\' ]
}

使用nonce use验证请求wp_verify_nonce()

结束

小码农CODE

使用带有jQuery插件Jedable的AJAX在定制表上插入查询

相关推荐

JQuery与小部件页面冲突