MacOS下MAMP环境AJAX传参至PHP出现400错误求助

问题描述 #

尝试通过AJAX将JS变量传递给PHP时，持续收到400 Bad Request错误，运行环境为MacOS下的MAMP。

相关代码 #

前端JS代码 #

jQuery(document).ready(function() {
  var test = '667'
  //console.log(test)

  jQuery.ajax({
    url: '/wp-admin/admin-ajax.php',
    data: {
      'action': 'php_tutorial',
      'php_test': test
    },
    success: function(data) {
      console.log("Happy")
    }
  });

});

后端PHP代码 #

function our_tutorial()
{
  if (isset($_REQUEST)) {
    $testing = $_REQUEST['php_test'];

    echo 'This is our JS Variable :' . $testing;
  }
  die();
}
add_action('wp_ajax_php_tutorial', 'our_tutorial');

错误详情 #

POST https://ezy-rebuild:8890/wp-admin/admin-ajax.php
状态码400 Bad Request
HTTP版本：HTTP/1.1 传输大小：519 B（响应大小1 B）
引用策略：strict-origin-when-cross-origin
DNS解析：系统解析

响应头信息 #

Cache-Control: no-cache, must-revalidate, max-age=0
Connection: close
Content-Type: text/html; charset=UTF-8
Date: Fri, 25 Aug 2023 05:35:50 GMT
Expires: Wed, 11 Jan 1984 05:00:00 GMT
Referrer-Policy: strict-origin-when-cross-origin
Server: Apache/2.4.54 (Unix) mod_fastcgi/mod_fastcgi-SNAP-0910052141 OpenSSL/1.0.2u mod_wsgi/3.5 Python/2.7.18
Transfer-Encoding: chunked
X-Content-Type-Options: nosniff
X-Frame-Options: SAMEORIGIN
X-Powered-By: PHP/7.4.33
X-Robots-Tag:

请求头信息 #

Accept: */*
Accept-Encoding: gzip, deflate, br
Accept-Language: en,en-US;q=0.5
Connection: keep-alive
Content-Length: 32
Content-Type: application/x-www-form-urlencoded; charset=UTF-8
Host: ezy-rebuild:8890
Origin: https://ezy-rebuild:8890
Referer: https://ezy-rebuild:8890/testie/

解决方案 #

以下是几个关键的排查和修复点：

• 添加非登录用户支持钩子
  WordPress的wp_ajax_{action}仅对已登录用户生效，若需要未登录用户也能触发该AJAX动作，必须补充添加wp_ajax_nopriv_{action}钩子：

  add_action('wp_ajax_nopriv_php_tutorial', 'our_tutorial');
  

• 修正AJAX请求URL
  相对路径/wp-admin/admin-ajax.php可能因站点配置出现解析错误，建议用WordPress内置函数生成绝对路径：

  url: '<?php echo admin_url('admin-ajax.php'); ?>',
  

  若JS代码在静态文件中，可通过wp_localize_script传递路径：

  wp_enqueue_script('custom-script', get_template_directory_uri() . '/js/your-script.js', array('jquery'), '1.0', true);
  wp_localize_script('custom-script', 'ajaxData', array('ajaxUrl' => admin_url('admin-ajax.php')));
  

  之后在JS中使用ajaxData.ajaxUrl作为请求地址。

• 优化参数判断逻辑
  isset($_REQUEST)始终为真（空数组也会返回true），应直接检查目标参数是否存在：

  if (isset($_REQUEST['php_test'])) {
    $testing = $_REQUEST['php_test'];
    echo 'This is our JS Variable :' . $testing;
  }
  die();
  

• 补充请求方法（可选）
  可显式指定请求方法为POST，避免默认GET方法可能带来的问题：

  type: 'POST',
  

内容的提问来源于stack exchange，提问作者Peter Williamson