決済用プラグインの制作～（２）フォームページでフォームデータをAjaxで送信させるJavaScriptを読み込ませる

jQuery(function($){
    $('#ProductForm').submit(function(event){
        //フォームのデフォルトの送信処理を止める
        event.preventDefault();

　　　　/*
       $('#ProductForm')の中に、以下の項目を追加します。
       1. ExtraInfo.NONCEHTML：PHP側で作成しJavaScriptの変数として出力したnonce用のHTML
　　　　2. ExtraInfo.ACTIONNAME：PHP側で作成しJavaScriptの変数として出力したAjaxで利用するアクション名
　　　　*/
       var $ProductForm = $('#ProductForm').append(ExtraInfo.NONCEHTML + '<input type="hidden" name="action" value="' + ExtraInfo.ACTIONNAME + '" >');

        /*
        ajax送信で決まりきった書き方です。
　　　　・送信先（url）として、PHP側で作成しJavaScriptの変数として出力したExtraInfo.AJAXURLを指定しておきます。
　　　　・本来ならば値のバリデーションを行うべきだけれども、ここはとりあえずそのままserialize()関数を使用して送信。
        */
        $.ajax({
            url: ExtraInfo.AJAXURL, 
            type: 'POST', 
            data: $ProductForm.serialize() 
        }).done( function( data ){ 
            //ajax送信後、出力されたものをChromeのconsoleに出力させる. 
            console.log(data); 
        }).fail(function( XMLHttpRequest, textStatus, error ){
        }); 
    }); 
});

<?php 
/* 
Plugin Name: My Original Plugin Plugin 
URI: Description: This Plugin id developed for My Original Plugin 
Version: 0.0.1 
Author: webmaster@GRITT.JP 
Text Domain: mop 
*/ 

//以下、プラグイン内でよく使うと思われる定数の定義 
define( 'WPMOP_VER', '0.0.1' ); 
define( 'WPMOP_URL', plugins_url( '', __FILE__ ) ); 
define( 'WPMOP_DIR', plugin_dir_path( __FILE__ ) ); 
define( 'WPMOP_CLASS_PATH', rtrim( plugin_dir_path( __FILE__ ), '/' ) . '/class/' ); 

//↓↓↓↓↓新規追加ここから
define( 'WPMOP_NONCE_NAME', 'wpmop_nonce_name' );
define( 'WPMOP_NONCE_ACTION', 'wpmop_nonce_action' . WPMOP_VER );
//↑↑↑↑↑新規追加ここまで

//以下、使用するファイルの読み込み。 
include_once( WPMOP_CLASS_PATH . 'class.wpmop.php' ); 

//以下、クラスのインスタンス化 
global $wpmop; 
$wpmop = new WPMOP();

<?php

//↓↓↓↓↓新規追加ここから

//class.wpmop-scripts.phpファイルを読み込ませる
include_once( WPMOP_CLASS_PATH . 'class.wpmop-scripts.php' );

//↑↑↑↑↑新規追加ここまで

class WPMOP {

//↓↓↓↓↓新規追加ここから

    //フロントページで読み込ませるスクリプトを登録させる
    add_action( 'wp_enqueue_scripts', 'WPMOPSCRIPTS::front_page_scripts' );
    //ajax用の関数を設定 フォームでname="action"の値をpayment_ajaxにする
    add_action( 'wp_ajax_nopriv_payment_ajax', array( &$this, 'ajax_payment' ) );
    add_action( 'wp_ajax_payment_ajax', array( &$this, 'ajax_payment' ) );
//↑↑↑↑↑新規追加ここまで

    public function __construct()
    {
        add_action( 'admin_menu', array( &$this, 'my_admin_page_settings' ) );
    }
    
    public function my_admin_page_settings()
    {
        //管理画面にメニューを追加
        add_menu_page(
            'My Original Pluginメインページ',
            'My Original Plugin',
            'manage_options',
            'wpmop',
            array( &$this, 'wpmop_mainpage' ),
            '',
            99
        );

        //追加した「My Original Plugin」メニューにサブメニューを追加
        add_submenu_page(
            'wpmop',
            'サブメニュー1ページ',
            'サブメニュー1',
            'manage_options',
            'wpmop-submenu1',
            array( &$this, 'wpmop_subpage01' )
        );
    }

    //追加した管理メニューページのコンテンツ
    public function wpmop_mainpage() {
        ?>
<div class="PluginContainer ">
    <h2 class="Plugin__head">My Original Pluginメインページ</h2>    
</div>
<?php
    }    

    //追加した管理メニューサブページのコンテンツ
    public function wpmop_subpage01() {
        ?>
<div class="PluginContainer ">
    <h2 class="Plugin__head">My Original Pluginサブページ1</h2>    
</div>
<?php
    }  

//↓↓↓↓↓新規追加ここから
    
    public function ajax_payment()
    {
    //とりあえず、ajax_payment関数が呼び出されたら'ok'を出力
        var_dump( $_POST );
        die();
    }
//↑↑↑↑↑新規追加ここまで

}

<?php
class WPMOPSCRIPTS {
    
    public static function front_page_scripts()
    {
        //フォームのページ（payment-plugin-sample-productpage）にアクセスされた時に以下の作業を行う
        if( is_page( 'payment-plugin-sample-productpage' ) ){
            
            //form-ajaxというハンドル名で、jsを読み込ませるhtmlを出力
            wp_enqueue_script( 'form-ajax', WPMOP_URL . '/script/form-ajax.js', array( 'jquery' ) );

            /*
            ハンドル名form-ajaxのJavaScriptで使える変数（オブジェクト・配列）を追加する
            追加するデータは、
            NONCEHTML:セキュリテイ向上のためWordPressではフォームを送信する際、nonceフィールドを利用することが推奨されている。
            nonceフィールドを出力するためのwp_nonce_field()関数を使って、PHPファイル上でそのHTMLを準備し、JSで使用できるようにしておく
            AJAXURL:ajaxデータの送信先は決まっているので、admin_url()関数を使って、PHPファイル上で準備しておく
            ACTIONNAME：フォームのinput[name="action"]の値に、class.wpmop.phpで追記した、add_action( 'wp_ajax_payment_ajax', array( &$this, 'ajax_payment' ) );
　　　　　　 の「payment_ajax」を入れる必要がある。そのため、PHPファイル上で準備しておく
            */
            wp_localize_script( 
                'form-ajax', //紐付けるスクリプトのハンドル名
                'ExtraInfo', //JavaScriptオブジェクト名
                array(
                    'NONCEHTML' => wp_nonce_field( WPMOP_NONCE_ACTION, WPMOP_NONCE_NAME , true, false ),
                    'AJAXURL' => admin_url('admin-ajax.php'),
                    'ACTIONNAME' => 'payment_ajax'
                    )
            );
        }
    }
}