admin-ajax 返回 0 - 不向 db 提交表单数据

Question

我正在尝试将表单数据发送到名为attendants 的表中。我创建了表单、AJAX 和查询，但是在尝试测试（提交表单时）时，我在控制台上看到 POST http://localhost/rsvp/wp-admin/admin-ajax.php 400 (Bad Request) 错误。

不确定是什么原因造成的，因为当我运行 console.log(ajaxurl); 时，它返回的 URL 是 http://localhost/rsvp/wp-admin/admin-ajax.php，这是正确的。

不确定这里发生了什么？

编辑：我最近发现http://localhost/rsvp/wp-admin/admin-ajax.php 返回0。

form.php（文件夹路径：rsvp > template-parts > parts > form.php）：

<div class="form sectionPadding" id="rsvp-form">
  <form id="rsvpForm" method="post">
    <?php get_template_part('template-parts/snippets/form-step-1'); ?>
    <?php get_template_part('template-parts/snippets/form-step-2'); ?>
  </form>
</div>

<script type="text/javascript">
  var ajaxurl = '<?php echo admin_url('admin-ajax.php'); ?>';
</script>

form.js（form.js 编译成theme.min.js。theme.min.js 的路径是 rsvp > assets > build > js > theme.min.js）：

jQuery('#rsvpForm').on('submit', function(e) {
  e.preventDefault();

  jQuery.ajax({
    action: 'send_to_db',
    dataType: "text",
    type: "post",
    data: $('form').serialize(),
    url: ajaxurl,

    success: function(data) {
      console.log(data);
    },
    error: function() {
      console.log("Error");
    }
  });


});

functions.php

add_action("wp_ajax_send_to_db", "send_to_db");
add_action("wp_ajax_nopriv_send_to_db", "send_to_db");

function send_to_db(){
	if (isset($_POST['submit'])) {

		global $wpdb;

		$first_name = $_POST['fname'];

		$table_name = $wpdb->prefix . "attendants";
		$row_result = $wpdb->query("INSERT INTO $table_name (first_name) VALUES ('$first_name')" );

		if ($row_result == 1){
			echo "submitted";
		} else{
			echo "error";
		}

		die();
	}
}

总结一下，我的文件夹结构是：

rsvp
   assets
      build
         js
            theme.min.js
   template-parts
      parts
         form
            form.php
            form.js
functions.php

Answer 1

编辑：我最近发现 http://localhost/rsvp/wp-admin/admin-ajax.php 返回 0。

当请求（URL）不包含 AJAX action 名称时，这确实是预期的返回值。此外，HTTP 响应状态也将是 400 Bad Request，这基本上表示“缺少操作名称”或“没有为该操作注册回调”。

在您的情况下，您的 AJAX 脚本似乎没有发送 AJAX 操作。

因为在您的 form.js 脚本中，action 参数应该在 data 中——据我所知，jQuery.ajax() 没有 action 属性：

jQuery.ajax({
  action: 'send_to_db', // this should be in 'data'
  ...
  data: $('form').serialize(),
  ...
});

所以你可以像这样data: $('form').serialize() + '&action=send_to_db'：

jQuery.ajax({
  ...
  data: $('form').serialize() + '&action=send_to_db',
  ...
});

这样，WordPress 将识别 AJAX 操作（通过 $_REQUEST['action']），然后运行正确的 AJAX handler / PHP callback，在您的情况下为 send_to_db()。

您可以通过访问 /wp-admin/admin-ajax.php?action=send_to_db 来确认您的 AJAX 回调是否已正确注册 — 您是否仍然看到 0？

更新

1. 如果 HTTP 响应状态不再是 400（现在应该是 200），那么这意味着您的 AJAX 请求正在发送一个操作（在您的情况下为 send_to_db）并且注册了一个 PHP 回调对于该 AJAX 操作 (wp_ajax_send_to_db / wp_ajax_nopriv_send_to_db)。

   但是由于您的回调仅在设置了 POST 变量 submit 时才起作用，因此如果您的 AJAX 请求数据不包含该参数，则响应仍将是 0。

   如果你想避免这种情况，那么你可以这样做：

   function send_to_db() {
       if ( isset( $_POST['submit'] ) ) {
           // ... your code here.
           //die();
       } else {
           echo 'Invalid request!';
       }
   
       wp_die(); // It's recommended to always call this to end an AJAX request,
                 // but die() is OK, too.
   }
   

   这样，当您手动转到 /wp-admin/admin-ajax.php?action=send_to_db（即不发送任何 POST 数据）时，您会在页面上看到 Invalid request!。 window.fetch( '/wp-admin/admin-ajax.php?action=send_to_db' ) 甚至会收到同样的回复。

   所以现在错误400 已经消失了，您只需要确保您的AJAX 请求正在发送正确的数据并且您的PHP 回调正在工作（或执行它需要执行的操作）。在 Chrome 上，您可以通过打开开发者工具并转到Network → XHR tab 并单击相关请求来轻松检查请求和响应数据、标头等。

2. 您的 SQL 查询非常不安全，我强烈建议您使用wpdb::prepare() 来准备查询以安全执行：

   //$row_result = $wpdb->query("INSERT INTO $table_name (first_name) VALUES ('$first_name')" );
   $query = $wpdb->prepare(
       "INSERT INTO $table_name (first_name) VALUES (%s)",
       sanitize_text_field( $first_name )
   );
   $row_result = $wpdb->query( $query );
   

   或者，对于插入单个数据库行/条目，您可以只使用wpdb::insert()：

   $row_result = $wpdb->insert( $table_name, array(
       'first_name' => sanitize_text_field( $first_name ),
   ) );
   

我已经实际测试了你原来的 PHP 回调，只要请求数据是好的，它就可以工作。 :)