错误：AJAX 响应中的 AJAX 调用

Question

我正在处理一个文件以与 API 交互。首先 API 发送一些 HTML 和 Javascript 来创建搜索表单，然后 API 可以处理该搜索表单的查询。

我的第二个请求出现了一些问题，该请求在第一个请求的成功函数中调用（这似乎是问题所在！）。这是我正在使用的代码。

$.ajax({
  type: "POST",
  url: "https://vq3rsgkd94.execute-api.us-east-1.amazonaws.com/deploy",
  crossDomain: true,
  data: JSON.stringify({
    "stage": "load",
    "fields": ["first_name", "last_name", "graduation_year"]
  }),

  success: function(response) {
    response = JSON.parse(response);
    $(response.html).prependTo("#content");
    $(response.scripts).appendTo("body");
  },

  complete: function() {
    //get field inputs
    var fieldInput = {
      "first_name_query": "",
      "last_name_query": "",
      "graduation_year_query": ""
    };

    $('form').find('input[type=search]').each(function(index, value) {
      var variableName = value.name;
      var fieldId = "#" + value.name;

      $(fieldId).keyup(function() {
          variableName = $(this).val();
          fieldInput[value.name + "_query"] = variableName
          console.log(value.name + ":" + fieldInput[value.name + "_query"]);
        })
        .keyup();
    });

    $('#search_form').submit(function(event) {
      event.preventDefault();
      $.ajax({
        type: "POST",
        url: "https://vq3rsgkd94.execute-api.us-east-1.amazonaws.com/deploy",
        data: JSON.stringify({
          "stage": "search",
          "fields": ["first_name", "last_name", "graduation_year"],
          "query": {
            "first_name": fieldInput["first_name_query"]
          }
        }),

        success: function(response) {
          response = JSON.parse(response);
          console.log(response);
        }
      });

    })

  }
});

尝试解析响应时，我得到了意外的令牌：o。如果我像这样在第一个 ajax 请求之外运行此代码：

$.ajax({
  type: "POST",
  url: "https://vq3rsgkd94.execute-api.us-east-1.amazonaws.com/deploy",
  data: JSON.stringify({
    "stage": "search",
    "fields": ["first_name", "last_name", "graduation_year"],
    "query": {
      "first_name": "Bob"
    }
  }),


  success: function(response) {
    response = JSON.parse(response);
    console.log(response);
  }
});  

我没有任何问题，代码执行正常。所以问题似乎是在另一个成功响应中运行一个 Ajax 调用，但我不知道为什么？我可能可以用另一种方式做事，但想看看是否有人对为什么这不起作用有所了解。

Answer 1

您收到的错误表明您正在尝试使用 JSON.parse 解析对象 因为

var x = {}
console.log(x.toString()) //> [object Object]
JSON.parse(x)
// Uncaught SyntaxError: Unexpected token o in JSON at position 1
//    at JSON.parse (<anonymous>)
//    at <anonymous>:3:6

你确定在第二种情况下响应是一个字符串

允许 jquery 使用 dataType: 'json' 为您解析它，而不是显式转换 JSON

$.ajax({
  type: "POST",
  url: "https://vq3rsgkd94.execute-api.us-east-1.amazonaws.com/deploy",
  data: JSON.stringify({
    "stage":"search",
    "fields":["first_name","last_name","graduation_year"],
    "query":{"first_name": fieldInput["first_name_query"] }
  }),
  dataType: 'json'
)}

Answer 2

所以问题最终变得非常奇怪。我正在为 Nationbuilder 平台开发一个 API（也许是我的第一个错误）。由于未知原因，Nationbuilder 将真实性令牌附加到任何请求中，而我的基于 LAMBDA 的 API 无法解析。以防万一其他人和我在同一条小船上，我最终使用 GET 请求而不是 POST 请求，并且 Nationbuilder 停止附加真实性令牌。

另外，如果有人在使用 Lambda，我最终切换到 Digital Ocean 托管的 Express JS 并且更快乐。