WordPress admin setting page with 'wordpress boilerplate plugin'. Also using 'partials' folder's file to display HTML part of page.

class-my-plugin-admin.php

<?php
   // file location:  ../admin/class-_____-admin.php
  
   /**
    * Register the JavaScript for the admin area.
    *
    * @since    1.0.0
    */
   public function enqueue_scripts() {
 
       /**
        * This function is provided for demonstration purposes only.
        *
        * An instance of this class should be passed to the run() function
        * defined in Wp_Citcon_Payment_Loader as all of the hooks are defined
        * in that particular class.
        *
        * The Wp_Citcon_Payment_Loader will then create the relationship
        * between the defined hooks and the functions defined in this
        * class.
        */
 
       $params = array (
           'ajaxurl' => admin_url( 'admin-ajax.php' ),                                                 // set Ajax url
           'nonce' => wp_create_nonce('PLUGIN_NAME-setting-form-nonce')                            // set nonce
       );
 
       wp_enqueue_script( $this->plugin_name, plugin_dir_url( __FILE__ ) . 'js/wp-PLUGIN_NAME-admin.js', array( 'jquery' ), $this->version, false );
       wp_localize_script( $this->plugin_name, 'params', $params );   
 
   }
 
   // Create the Plugin Name menu page with add_menu_page();
   public function add_admin_page() {
       add_menu_page(
           'PLUGINS Settings',
           'PLUGINS MENU NAME',
           'manage_options',
           $this->plugin_name,
           array( $this, 'load_admin_page_content' ), // Calls function to require the partial        
           'dashicons-admin-generic',
           80
       );
   }
 
   // Load the plugin admin page partial.
   public function load_admin_page_content() {
       require plugin_dir_path( __FILE__ ). 'partials/wp-PLUGIN_NAME-admin-display.php';
   }
 
   function handler_citcon_payment_setting_form() {
       $retrieved_nonce = $_REQUEST['security'];                                                   // get nonce
      
       if (wp_verify_nonce($retrieved_nonce, 'PLUGIN_NAME-setting-form-nonce')) :                  // verify nounce
           $title = $_REQUEST['title'];                               
           $content = $_REQUEST['content'];                             
           $postargs = array(
               // 'ID'            => 39,                                                           // Pass post's ID to update the post data
               'post_title' => $title,
               'post_content' => $content,
               'post_status'   => 'publish',
               'post_author' => 1,
           );
           // $post_id = wp_insert_post($postargs);
           $post_id = 12;
           if (!is_wp_error($post_id)) :                                                           // Post insert successfully
               $response = array(
                   'status' =>  1,
                   'msg'   => 'Form submit successfully!',
                   'data'  => array(
                       'ID'    => $post_id,
                       'title' => $title,
                       'content' => $content,
                   )
               );
           else :                                                                                  // Post not inserted
               $response = array(
                   'status' =>  0,
                   'msg'   => $post_id->get_error_message(),
               );
           endif;
       else :                                                                                      // Nonce not verified
           $response = array(
               'status' =>  0,
               'msg'   => 'Failed security check!',
           );
       endif;
       wp_send_json($response);
   }

my-plugin-admin-display.php

// File location: ../admin/partials/my-plugin-admin-display.php
/**
* The form to be loaded on the plugin's admin page
*/
 
 
<h2><?php echo esc_html(get_admin_page_title()); ?></h2>
<hr />
<?php
 
if (current_user_can('edit_users')) {
   ?>
   <form id="PLUGIN_NAME_setting_form">
      
       <table class="form-table">
 
           <tbody>
               <tr>
                   <th scope="row"><label for="postTitle">Title</label></th>
                   <td><input name="postTitle" type="text" id="postTitle" value="Post Title" class="regular-text"></td>
               </tr>
              
               <tr>
                   <th scope="row"><label for="postContent">Content</label></th>
                   <td><textarea name="postContent" id="postContent" rows="5" cols="40" spellcheck="false">Post Content</textarea></td>
               </tr>
              
               <tr>
                   <th scope="row"><label for="input#1">Text Field</label></th>
                   <td><input name="input#1" type="text" id="input#1" value="Input #1" class="regular-text"></td>
               </tr>
 
               <tr>
                   <th scope="row"><label for="input#2">Email Field</label></th>
                   <td><input name="input#2" type="email" id="input#2" aria-describedby="input#2-description" value="[email protected]" class="regular-text ltr">
                       <p class="description" id="input#2-description">Input field description.</strong></p>
                   </td>
               </tr>
 
               <tr>
                   <th scope="row">Checkbox Field</th>
                   <td>
                       <fieldset>
                           <legend class="screen-reader-text"><span>Want to show?</span></legend><label for="input#3">
                               <input name="input#3" type="checkbox" id="input#3" value="1">
                               Show</label>
                       </fieldset>
                   </td>
               </tr>
 
               <tr>
                   <th scope="row"><label for="default_role">Dropdown Field</label></th>
                   <td>
                       <select name="default_role" id="default_role">
                           <option selected="selected" value="#1">Value 1</option>
                           <option value="#2">Value 2</option>
                           <option value="#3">Value 3</option>
                           <option value="#4">Value 4</option>
                           <option value="#5">Value 5</option>
                       </select>
                   </td>
               </tr>
 
           </tbody>
       </table>
       <p class="submit">
           <button type="submit" class="button button-primary" id="submitPost">Save Changes</button>
       </p>
   </form>
   <div id="form-response"></div>
 
<?php
} else {
   ?>
   <p> <?php __("You are not authorized to perform this operation.", $this->plugin_name) ?> </p>
<?php
}

my-plugin-admin.js

// file location:  ../admin/my-plugin-admin.js

jQuery(document).ready(function($) {
   $("#PLUGIN_NAME_setting_form").submit(function(){
       event.preventDefault();
       alert('hi');
 
       var postTitle   = $("#postTitle").val();
       var postContent = $("#postContent").val();
 
       dataPayload = {
           action: 'handler_PLUGIN_NAME_setting_form',
           title: postTitle,
           content: postContent,
           security: params.nonce,
       }
 
       // This does the ajax request
       $.ajax({
           type: "POST",                                               // POST | GET | PUT
           dataType: "json",                                           // json | html | text | xml | script | jsonp
           url: params.ajaxurl,                                      // ajax file path of website
           data: dataPayload,                                          // form data
 
           beforeSend: function(xhr) {
               jQuery("#form-response").html('<h4 class="text-info">Submiting!</h4>');
             },
           success:function(result) {
               jQuery('#form-response').trigger("reset");
               str = JSON.stringify(result);
               str = JSON.stringify(result, null, 4);
               console.log("result => " + str);
               console.log("result.msg => " + result.msg);
 
               if(result.status == 1) {
                   jQuery("#form-response").html('<h4 class="text-success">' + result.msg + '</h4>');
               } else {
                   jQuery("#form-response").html('<h4 class="text-warning">' + result.msg + '</h4>');
               }
 
           },
           error: function(errorThrown){
               console.log(errorThrown);
           }
       }); 
   });         
});