1

到目前为止，我已经创建了一个插件，它可以创建一个输入表单、注册一个自定义端点并将一个支持脚本加入队列：

插件.php

// Create Input Form
<?php
function mysite_input_form(){
?>
    <form id="site-name-form" class="site-name-form">
        <div>
            <label class="site-name-input-label" for="site-name-input">
                <?php _e( 'Site Name', 'mysite' ); ?>
            </label>
            <input type="text" name="site-name-input" id="site-name-input" class="site-name-input">
        </div>
        <input type="submit" value="<?php esc_attr_e( 'Submit', 'mysite'); ?>">
    </form>
<?php
}

// Register Custom Endpoint
add_action( 'rest_api_init', function () {
    register_rest_route( 'mysite-info/v1', '/name/', array(
        array(
            'methods'         => WP_REST_Server::READABLE,
            'callback'        => 'get_item',
        ),
        array(
            'methods'         => WP_REST_Server::EDITABLE,
            'callback'        => 'update_item',
        ),
    ));
});

//Equeue Script
function plugin_scripts(){
    //load script
    wp_register_script( 'plugin-script', plugins_url( '/js/plugin-script.js', __FILE__ ), array( 'jquery' ) );
    wp_enqueue_script( 'plugin-script' );

    //localize data for script
    wp_localize_script( 'plugin-script', 'FORM_SUBMITTER', array(
            'root' => esc_url_raw( rest_url() ),
            'nonce' => wp_create_nonce( 'wp_rest' ),
            'success' => __( 'Thanks for your submission!', 'mysite' ),
            'failure' => __( 'Your submission could not be processed.', 'mysite' ),
            'current_user_id' => get_current_user_id()
        )
    );
}
add_action( 'admin_enqueue_scripts', 'plugin_scripts' );

插件脚本.js

jQuery( document ).ready( function ( $ ) {
    $( '#site-name-form' ).on( 'submit', function(e) {
        e.preventDefault();

        var name = $('.site-name-input').val();

        var data = {
            name: name
        };

        $.ajax({
            method: "PUT",
            url: FORM_SUBMITTER.root + 'mysite-info/v1/name',
            data: data,
            beforeSend: function ( xhr ) {
                xhr.setRequestHeader( 'X-WP-Nonce', FORM_SUBMITTER.nonce );
            },
            success : function( response ) {
                console.log( response );
                alert( FORM_SUBMITTER.success );
            },
            fail : function( response ) {
                console.log( response );
                alert( FORM_SUBMITTER.failure );
            }
        });
    });
});

我正在使用“PUT”方法，因为我想更新数据库中博客名称的值。

我正在努力解决的主要问题是了解要使其正常工作还需要什么。WP API 文档显示您需要一个回调来实际更新数据库中的值。

我认为这会起作用：

function update_item( $request ) {

    update_option( 'blogname', $request );

}

但是，当我提交输入的值时，什么也没有发生。它甚至似乎都没有遇到 ajax“失败”的情况。

请帮我弄清楚我错过了什么。

4

0 回答 0