Wordpress插件开发中AJAX请求仅返回400无响应问题排查求助

已发现的错误点 #

• HTML代码语法错误
  隐藏的action输入框多了多余引号，原错误代码：

  <input type="hidden" name="action" "value="ny_prisgruppe"/>
  

  修正为：

  <input type="hidden" name="action" value="ny_prisgruppe"/>
  

• AJAX请求配置错误

  1. action参数必须放在data字段内，不能直接作为$.ajax的顶层参数
  2. 不要设置contentType: "application/json"，admin-ajax.php默认无法解析JSON格式的POST数据，会导致$_POST全局变量为空
  3. AJAX里设置的action值insertData和你PHP绑定的钩子名ny_prisgruppe不一致，请求无法匹配到处理函数
     修正后的JS代码：

  document.getElementById("submit").onclick = function() {
          
          let contentConcat = "";
          let prisgruppeNavn = document.getElementById('prisgruppe-navn').value 
          for(let i = 1; i < prislinjer.childElementCount+1; i++){
              let following_text = document.getElementById('followingText-'+i).value;
              let emphasized_text = document.getElementById('emphasizedText-'+i).value;
              if(following_text.length<1 || emphasized_text.length<1 || prisgruppeNavn.length<1){
                  alert("Du må fylle ut alle feltene.");
                  return;
              }
              contentConcat+=emphasized_text+'_'+following_text+'@'
          }
  
          
          $.ajax({
              url: ajaxurl,
              type: 'POST',
              dataType:"json",
              data: {
                  "action": "ny_prisgruppe",
                  "prisgruppe_navn": prisgruppeNavn,
                  "prislinjer": contentConcat
              },
              success: function(response){
                  console.log(response)
              },
              error: function(e){
                  console.log(e)
              }
          });
      }
  

• PHP处理函数逻辑错误
  WordPress的AJAX处理函数需要echo输出响应内容，而不是return，处理完成后必须调用wp_die()或者die()终止执行，否则会在响应末尾追加多余的0。
  修正后的绑定代码：

  function process_ny_prisgruppe(){
      // 这里可以添加获取$_POST参数、操作数据库的逻辑
      $prisgruppe_navn = isset($_POST['prisgruppe_navn']) ? sanitize_text_field($_POST['prisgruppe_navn']) : '';
      $prislinjer = isset($_POST['prislinjer']) ? sanitize_text_field($_POST['prislinjer']) : '';
      
      // 返回JSON响应可以用wp_send_json函数，自动设置header和终止执行
      wp_send_json([
          'code' => 200,
          'msg' => '处理成功',
          'data' => [
              'hei' => 'hei',
              'prisgruppe_navn' => $prisgruppe_navn
          ]
      ]);
  }
  
  add_action('wp_ajax_ny_prisgruppe','process_ny_prisgruppe');
  // 后台请求不需要加nopriv前缀的钩子，这个钩子是给未登录用户的前端请求用的，可以直接删除
  // add_action('wp_ajax_nopriv_ny_prisgruppe','process_ny_prisgruppe');
  

可选优化建议 #

• 提交表单前可以添加nonce校验，避免CSRF攻击：在表单里添加wp_nonce_field('ny_prisgruppe_action', 'ny_prisgruppe_nonce');，然后在PHP处理函数里用check_ajax_referer('ny_prisgruppe_action', 'ny_prisgruppe_nonce');做校验
• 所有传入数据库的参数都要做sanitize清理，避免SQL注入风险

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