如何修复 WordPress 插件对表单处理程序文件的 ajax 请求。 （我自己正在开发一个插件）

Question

大家！我正在创建 WordPress 插件。 这个插件的主要目标是创建表单，在用户填写这个表单后，表单中的数据将被写入数据库。 我制作了负责创建数据库和使用短代码显示表单的插件的一部分。 但是遇到了问题。 如何使用 ajax 方法将数据从表单发送到数据库。

激活插件后，在数据库中创建一个表：

if ( ! function_exists ( 'jal_install' ) ) {
function jal_install (){
    global $wpdb;
    require_once( ABSPATH . 'wp-admin/includes/upgrade.php' );
    $table_name = $wpdb->prefix . "liveshoutbox";
    $charset_collate = $wpdb->get_charset_collate();
        if($wpdb->get_var("SHOW TABLES LIKE '{$table_name}'") !== $table_name){
            $sql = "CREATE TABLE $table_name (
            id mediumint(9) NOT NULL AUTO_INCREMENT,

            client_name tinytext NOT NULL,
            client_mail varchar(55) DEFAULT '' NOT NULL,

            PRIMARY KEY  (id)
            ) $charset_collate;";
        dbDelta( $sql );
    }   
  }
}

页面上的表单显示一个短代码：

function form_shortcode() {
        ob_start(); ?>

      <form class="main_form" method="POST" action="">
            <input type="text" name="user_name">
            <input type="text" name="user_mail">
            <button type="submit">Subnit</button>
      </form>
      <div class="main_form__success">Greate Worck!</div>
         
    <?php 
      return ob_get_clean();
    }

    add_shortcode('form-shortcode', 'form_shortcode');

为了将表单中的数据添加到数据库中，有一个文件：form_action.php 我把它放在主插件目录中。 为了启动这个文件的工作，我使用了 form_ajax.js

$("form.main_form").submit(function() {
      var th = $(this);
      $.ajax({
        type: "POST",
        url: "/form_action.php",
      }).done(function() {
        $(th).find('.main_form__success').addClass('active').css('display', 'flex').hide().fadeIn();
        setTimeout(function() {
          $(th).find('.main_form__success').removeClass('active').fadeOut();
          th.trigger("reset");
        }, 3000);
      });
      return false;
    });

结果，我无法访问这个 form_action.php 文件。 我有一个错误。 代码试图在站点的根目录中找到它，而不是在插件的根目录中。 我不明白如何解决它，请告诉我如何做。

Answer 1

这是 ajax jquery 请求的基本语法

在这里，在数据字段中，您必须使用 id、name 或 tag 指定表单

$.ajax({
  url: "/../form_action.php",
  type: "POST",
  data:$('form').serialize(),
  success: function (data) {
    .....
  }
});