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

Question

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

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

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

• first_name=Claire&last_name=Lavigne&email=lavigneclaire81%40gmail.com®ister=newsletter

• POST http://localhost/ /wp/wp-admin/admin-ajax.php 400（错误请求）

• 错误 [对象对象] 错误请求

   <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

Answer 1

您需要一个“操作”字段来使 WordPress AJAX 工作。但是您还需要单独的字段来实现您的功能。制作一个“通讯”动作，例如wp_ajax 示例例子：       $('#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');        },      });    });然后它应该工作。