Устранение неполадок при создании внешнего плагина (API POST REQUEST)

Question

В настоящее время я создаю плагин для WordPress, который должен позволять пользователю создавать новые посты из внешнего интерфейса своего сайта. Когда я нажимаю кнопку «Создать пост», ничего не происходит. Пожалуйста, посмотрите на мой код ниже:

плагин использует функцию JavaScript с pHp, чтобы сделать запрос POST к API. Я работаю на локальном сервере (MAMP) и в настоящее время не использую постоянные ссылки, поэтому мой URL выглядит следующим образом ... http://localhost:9000/wordpress/?rest_route=/wp/v2/posts который я посетил и увидел данные JSON. Мне просто кажется, что я получил кнопку, чтобы сделать фактический почтовый запрос.

php / html

// Make sure we don't expose any info if called directly
if ( !function_exists( 'add_action' ) ) {
    echo 'Hi there!  I\'m just a plugin, not much I can do when called directly.';
    exit;
}


function postayge_front()
{
    /* content variable */
    $content = '';

    $content .= '<div class="admin-quick-add">';

    $content .= '<h3>Quick Add Post</h3>';

    $content .= '<input type="text" name="title" placeholder="Title">';
    $content .= '<textarea name="content" placeholder="Content"></textarea>';
    $content .= '<button id="quick-add-button">Create Post</button>';

    $content .= '</div>';

        return $content;
}

add_shortcode('postayge','postayge_front');



/* Add scripts & styles */
function wp_postayge_adding_styles() {
    wp_register_style('postayge_style', plugins_url('main.css', __FILE__));
    wp_enqueue_style('postayge_style');

    wp_register_script('postayge_script', plugins_url('script.js', __FILE__));
    wp_enqueue_script('postayge_script');

    wp_localize_script('script.js', 'securityData', array(
        'nonce' => wp_create_nonce('wp_rest')
    ));

    }

    add_action( 'wp_enqueue_scripts', 'wp_postayge_adding_styles' );  


?>

1010 * JS *

//Quick add post AJAX

var quickAddButton = document.querySelector("#quick-add-button");

if (quickAddButton) {
    quickAddButton.addEventListener("click", function() {
        var postaygePostData = {
            "title": document.querySelector('.admin-quick-add[name="title"]').value,
            "content": document.querySelector('.admin-quick-add[name="content"]').value,
            "status": "publish"
        }

        var createPost = new XMLHttpRequest();
        createPost.open("POST", "http://localhost:9000/wordpress/?rest_route=/wp/v2/posts");
        createPost.setRequestHeader("X-WP-Nonce", securityData.nonce);
        createPost.setRequestHeader("Content-Type", "applicaton/json;charset=UTF-8")
        createPost.send(JSON.stringify(postaygePostData));
    });
}

CSS

/** Quick Add Styles */
.admin-quick-add {
background-color: inherit;
padding:15px;
margin-bottom: 15px;
}

.admin-quick-add input,
.admin-quick-add textarea {
width: 100%;
border: none;
padding: 10px;
margin: 0 0 10px 0;
box-sizing: border-box;
}