POST 请求提交数据对象失败，返回“400 Bad Request”答案

【问题标题】：POST request fails to submit data object, returns "400 Bad Request"POST 请求提交数据对象失败，返回“400 Bad Request”
【发布时间】：2019-05-06 15:14:23
【问题描述】：

我有一个由 jQuery 选择的 <button> 标记（不包含 <form>），用于向 Wordpress 中的 ajax 处理程序提交 Ajax POST 请求。一个错误对象返回，表明后端没有得到任何数据对。我做了一个带有url参数的手动浏览器获取请求，就像一个测试一样，ajax处理程序工作了。这是我的 html 和 jQuery 代码：

  // html button. No form
      <button id="previousButton">Previous</button>

// ajax request function
function ajaxPost() {
  // 
  ?>
  <script>

    jQuery(document).ready(function() {
      jQuery('#previousButton').click(function() {
        var ajaxScript = { ajaxUrl : 'http://localhost/wptest2/wp-admin/admin-ajax.php' };

        jQuery.ajax({
          type: "POST",
          url: ajaxScript.ajaxUrl,
          contentType : 'application/x-www-form-urlencoded; charset=UTF-8',
          dataType: "json",
          data: {
            action: "selectTargetsWithOffset",
          },
          success: function(response) {
            console.log(response, `=====success response=====`);
          },
          error: function(error) {
            console.log(error, `=====error=====`);
          }
        });        
      });
    })
  </script>
  <?php
}
add_action('admin_footer', 'ajaxPost');

错误对象：

options-general.php?page=fvc-settings:810 {readyState: 4, getResponseHeader: ƒ, getAllResponseHeaders: ƒ, setRequestHeader: ƒ, overrideMimeType: ƒ, …}abort: ƒ (a)arguments: nullcaller: nulllength: 1name: "abort"prototype: {constructor: ƒ}__proto__: ƒ ()[[FunctionLocation]]: load-scripts.php?c=0&load[]=jquery-core,jquery-migrate,utils&ver=5.1.1:4[[Scopes]]: Scopes[4]always: ƒ ()arguments: nullcaller: nulllength: 0name: "always"prototype: {constructor: ƒ}__proto__: ƒ ()[[FunctionLocation]]: load-scripts.php?c=0&load[]=jquery-core,jquery-migrate,utils&ver=5.1.1:2[[Scopes]]: Scopes[4]complete: ƒ ()arguments: nullcaller: nulllength: 0name: "add"prototype: {constructor: ƒ}__proto__: ƒ ()[[FunctionLocation]]: load-scripts.php?c=0&load[]=jquery-core,jquery-migrate,utils&ver=5.1.1:2[[Scopes]]: Scopes[4]done: ƒ ()error: ƒ ()fail: ƒ ()getAllResponseHeaders: ƒ ()getResponseHeader: ƒ (a)overrideMimeType: ƒ (a)pipe: ƒ ()progress: ƒ ()promise: ƒ (a)readyState: 4responseJSON: 0responseText: "0"setRequestHeader: ƒ (a,b)state: ƒ ()status: 400statusCode: ƒ (a)statusText: "Bad Request"success: ƒ ()then: ƒ ()__proto__: Object "=====error====="

知道为什么不将 k/v 对发送到后端吗？我看到 wordpress 中的其他 api 发送他们自己成功的 ajax 请求，但我的一直失败。

【问题讨论】：

尝试将您的错误处理程序重写为 function(xhr, textStatus, errorThrown) { console.log(textStatus); console.log(errorThrown); } 之类的东西 - 这可能会为您提供有关 为什么 发生错误的更多信息。
好的，我做到了。它对第一个和第二个日志语句表示“错误”“错误请求”

标签： jquery ajax http xmlhttprequest

【解决方案1】：

因为您使用的是jQuery.ajax()，这会将data 字段值格式留给您自己。由于Content-Type 定义为application/x-www-form-urlencoded; charset=UTF-8，data 字段的值应类似于foo=Hello&bar=World（表单数据格式的键值对）。 {action: "selectTargetsWithOffset"} 不起作用。

正确的代码如下所示：

jQuery.ajax({
  type: "POST",
  url: ajaxScript.ajaxUrl,
  contentType : 'application/x-www-form-urlencoded; charset=UTF-8',
  dataType: "json",
  data: $.param({
    action: "selectTargetsWithOffset"
  }),
  success: function(response) {
    console.log(response, `=====success response=====`);
  },
  error: function(error) {
    console.log(error, `=====error=====`);
  }
});

$.param({action:"selectTargetsWithOffset"}) 会将 JavaScript 对象转换为格式数据格式的字符串。

【讨论】：