访问 AJAX CORS 请求中的响应

Question

我正在尝试向我的 Spring 后端发送 AJAX 请求。我正在点击控制器，并成功响应。我是 javascript 和 AJAX 的新手，所以我遇到了一个无法通过的天花板。我试图在成功的回调上调用“完成”，并且收到一个非常非描述性的错误。这是我按下“按钮”后的控制台

clicked testAjax. js:3  
Uncaught SyntaxError: Unexpected token :  product:1

我还没有创建产品文件，但是当我进入它时，我得到了我试图在第 1 行（唯一的行）发回的对象：

{"name":"Matthew","id":0}

我的 AJAX 调用在下面。如何让返回对象进入我的“完成”功能？

还有，我做错了什么？

$("button").click(function(){
    console.log("clicked");
    var request = $.ajax({
        type : "GET",
        url : ***The problem is not here, I am hitting the controller***
        dataType: "jsonp",
        crossDomain: true,
        success: done,
        });
    function done(obj, status, jqXHR){
        alert("in success function");
        console.log(obj);
        $("li#pName").append("matthew");
    };
});

Answer 1

您将dataType 设置为jsonp，但您输出的是直接的json 文本，jsonp 期望提供一个函数，即someFn({"name":"Matthew","id":0})

由于jquery会自动为回调函数名称附加一个随机名称，如果您不提供，您需要捕获callback GET 变量并回显由@中名称命名的函数调用包装的json文本987654325@变量。

不熟悉 spring，但使用 php 这看起来像

$fnName = $_GET["callback"];
echo $fnName."(".json_encode($someDataObj).")";

更改您的后端以执行类似操作或将dataType 更改为json，以便解析直接的json 文本。

Answer 2

您的代码有点古怪。确保你也正确地关闭了括号 - 我认为这就是给你带来麻烦的原因。

下面是在 AJAX 请求中使用匿名函数的解决方案：

$("button").click(function(){
  console.log("clicked");
  var request = $.ajax({
    type : "GET",
    url : ***The problem is not here, I am hitting the controller***
    dataType: "jsonp",
    crossDomain: true,
    success: function (obj, status, jqXHR) {
      alert("in success function");
      console.log(obj);
      $("li#pName").append("matthew");
    }
  });
});

当您想使用单独的函数时，这里有解决方案。

function done(obj, status, jqXHR) {
  alert("in success function");
  console.log(obj);
  $("li#pName").append("matthew");
}

$("button").click(function(){
  console.log("clicked");
  var request = $.ajax({
    type : "GET",
    url : ***The problem is not here, I am hitting the controller***
    dataType: "jsonp",
    crossDomain: true,
    success: done
  });
});