表单 AJAX PHP 不会将 POST 数据发送到 WordPress 数据库

Question

几周以来，我一直在社区和教程中寻找解决问题的方法，但找不到答案。

我创建了一个表单来注册订阅者，以便订阅我的 WordPress 数据库的时事通讯。仅使用 PHP，POST 数据被发送到数据库。但是，我想将该表单与 ajax 一起使用，以阻止页面刷新。现在，没有数据发送到数据库了，我不明白为什么。

使用下面的代码，我在控制台中得到以下信息：

• first_name=Claire&last_name=Lavigne&email=lavigneclaire81%40gmail.com&register=newsletter
• POST http://localhost//wp/wp-admin/admin-ajax.php 400（错误请求）
• 错误 [object Object] 错误请求

    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

    <div class="col s12 m6 newsletter">
      <div id="form_output"></div>
      <form id="newsletter" class="newsletter__form">
        <div>
          <input value="" type="text" name="first_name" id="first_name" placeholder="Prénom" autocomplete="given-name">
          <input value="" type="text" name="last_name" id="last_name" placeholder="Nom" autocomplete="family-name">
          <input value="" type="email" name="email" id="email" placeholder="Email">
        </div>
        <button class="newsletter__button" type="submit">Je m'abonne</button>
        <input type="hidden" name="register" value="newsletter" />
      </form>
    </div>

    $('#newsletter').on('submit', function(event) {
      event.preventDefault();
      var datas = $(this).serialize();
      console.log(datas);

      $.ajax({
        type: "POST",
        url: ajaxurl,
        data: datas,
        // data: {
        //   action: 'ajax_newsletter'
        // },
        success: function(data, result) {
          console.log(result + ' ' + data);
          $("#form_output").html('Ok');
        },
        error: function(data, result, error) {
          console.log(result + ' ' + data + ' ' + error);
          $("#form_output").html('Erreur');
        },
      });
    });

    <?php

    function eglise_scripts()
    {
        wp_enqueue_style(
            'eglise-style-css',
            get_theme_file_uri('/public/css/style.css'),
            [],
            '1.0.0'
        );

        wp_enqueue_script(
            'eglise-js',
            get_theme_file_uri('/public/js/app.js'),
            [],
            '1.0.0',
            true
        );

        wp_localize_script( 
            'eglise-js', 
            'ajaxurl', 
            admin_url( 'admin-ajax.php' )
        );

    }

    add_action('wp_enqueue_scripts', 'eglise_scripts');

add_action('wp_ajax_nopriv_ajax_newsletter', 'ajax_newsletter');
add_action('wp_ajax_ajax_newsletter', 'ajax_newsletter');

function ajax_newsletter()
{
  global $wpdb;

  $users = $wpdb->prefix . 'users';

  if (isset($_POST['register']) && $_POST['register'] == 'newsletter') {

    $first_name = $wpdb->escape(trim($_POST['first_name']));
    $last_name = $wpdb->escape(trim($_POST['last_name']));
    $email = $wpdb->escape(trim($_POST['email']));

    if (empty($email) || empty($first_name) || empty($last_name)) {
      echo 'Merci de compléter les champs.';
    } else if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
      echo 'Addresse email invalide.';
    } else if (email_exists($email)) {
      echo 'Email déjà existant. ';
    } else {

      // create columns firstname and lastname
      $row_firstname = $wpdb->get_results("SELECT COLUMN_NAME 
        FROM INFORMATION_SCHEMA.COLUMNS 
        WHERE table_name = 'wp_users' 
        AND column_name = 'first_name'
      ");
      $row_lastname = $wpdb->get_results("SELECT COLUMN_NAME 
        FROM INFORMATION_SCHEMA.COLUMNS 
        WHERE table_name = 'wp_users' 
        AND column_name = 'last_name'
      ");
      if (empty($row_firstname)) {
        $wpdb->query("ALTER TABLE $users ADD first_name VARCHAR(255) NOT NULL");
      } elseif (empty($row_lastname)) {
        $wpdb->query("ALTER TABLE $users ADD last_name VARCHAR(255) NOT NULL");
      }

      // insert user
      $newUser = $wpdb->INSERT($users, [
        'first_name' => apply_filters('pre_user_first_name', $first_name),
        'last_name' => apply_filters('pre_user_last_name', $last_name),
        'user_email' => apply_filters('pre_user_user_email', $email),
        'user_registered' => current_time('mysql')
      ]);


      if (is_wp_error($newUser)) {
        echo 'Une erreur s\'est produite.';
      } else {
        echo 'Vous êtes désormais inscrit';
      }
    }
  }
  wp_die();
}

如果我将我的 js 文件 data: datas 更改为 data: { action: 'ajax_newsletter'}，我会在控制台中获得以下信息：

• first_name=Claire&last_name=Lavigne&email=lavigneclaire81%40gmail.com&register=newsletter
• 成功

在我的 wp_users 数据库中，没有添加任何内容。

如果是这样，我在function ajax_newsletter() 中评论以下条件：

    //if (isset($_POST['register']) && $_POST['register'] == 'newsletter') {

       // if (empty($email) || empty($first_name) || empty($last_name)) {
       //   echo 'Merci de compléter les champs.';
       // } else if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
       //   echo 'Addresse email invalide.';
       // } else if (email_exists($email)) {
       //   echo 'Email déjà existant. ';
      // } else {

控制台告诉：

• first_name=Claire&last_name=Lavigne&email=lavigneclaire81%40gmail.com&register=newsletter
• 成功
• Vous êtes désormais inscrit

在我的 wp_users 数据库中添加了一个新的空行，其中仅完成了“id”和“当前创建日期和时间”。

--

你知道我做错了什么吗？提前感谢您的帮助！

Answer 1

您需要一个“操作”字段才能使 WordPress AJAX 工作。

但您的函数还需要单独的字段。

进行“时事通讯”操作，例如wp_ajax example

例子：

        $('#newsletter').on('submit', function(event) {
      event.preventDefault();
        var first_name = jQuery('#first_name').val();
        var last_name = jQuery('#last_name').val();
      var email = jQuery('#email').val();
        var newsletter = jQuery("input[name=newsletter]").val();

      $.ajax({
        type: "POST",
        url: ajaxurl,
   data: {
      name: name,
      action: 'newsletter',
          first_name: first_name,
          last_name: last_name,
          email: email,
          newsletter : newsletter },
        success: function(data, result) {
          console.log(result + ' ' + data);
          $("#form_output").html('Ok');
        },
        error: function(data, result, error) {
          console.log(result + ' ' + data + ' ' + error);
          $("#form_output").html('Erreur');
        },
      });
    });

那么它应该可以工作了。