如何在警报中显示 AJAX 响应消息？

Question

我将用户名和密码作为请求参数发送到 AJAX 中的服务器并尝试显示响应消息。但无法显示响应消息。在提琴手中，它正在显示响应消息。但是在浏览器屏幕上它没有显示。请有人帮我找出我错的地方或需要改变任何东西.. 我是这样写的-

$(document).ready(function () {
  $("#btnCity").click(function () {
    $.ajax({
      type: "POST",
      url: "http://test.xyz.com/login",
      crossDomain: true,
      contentType: "application/json; charset=utf-8",
      data: { username: "abc", password: "1234" },
      dataType: "JSONP",
      jsonpCallback: 'jsonCallback',
      async: false,
      success: function (resdata) {
        alert(resdata);
      },
      error: function (result, status, err) {
        alert(result.responseText);
        alert(status.responseText);
        alert(err.Message);
      }
    });
  });
});

Answer 1

TL;DR：我猜问题出在您代码的服务器端（我们还不知道）。

起初：我不知道为什么它会失败。我已获取您的代码并针对公共可用的 JSONP API 运行它，该 API 返回您系统的当前 IP 并且它工作正常。

请尝试使用以下 URL：http://ip.jsontest.com/。

所以很可能，服务器没有对 JSONP 请求返回正确的响应。查看开发人员工具中的网络选项卡。使用您当前的代码，服务器的答案应该是这样的：

jsonCallback({'someResponseKeys': 'someResponseValue'});

注意：标头应包含Content-Type:application/javascript!

---

顺便说一句，即使这暂时不能解决您的问题 - 这里有一些调整，我想给您一些建议：

• 不要将async 设置为false，jQuery.ajax() 的文档中说：

  跨域请求和dataType：“jsonp”请求不支持同步 操作。

• 您不需要设置jsonpCallback，因为 jQuery 将生成并处理（使用success 函数为您随机生成一个。引用自文档：

  这个值将被用来代替 jQuery 自动生成的随机名称。最好让 jQuery 生成一个唯一的名称，因为这样可以更轻松地管理请求并提供回调和错误处理。

我的代码来了：

$(document).ready(function () {
  $("#btnCity").click(function () {
    $.ajax({
      type: "POST",
      url: "http://ip.jsontest.com/",
      crossDomain: true,
      data: { username: "abc", password: "1234" },
      dataType: "JSONP",
      success: function (resdata) {
        console.log("success", resdata);
      },
      error: function (result, status, err) {
        console.log("error", result.responseText);
        console.log("error", status.responseText);
        console.log("error", err.Message);
      }
    });
  });
});

一个工作的example can be found here。

另一种解决方案，如 Yonatan Ayalon 建议的那样，可以使用预定义函数完成，然后将 jsonpCallback 显式设置为应调用的函数。

Answer 2

如果您在 Fiddler 中看到响应，则似乎问题出在回调函数中。

您正在进行 jsonP 调用 - 这意味着您需要一个回调函数来“读取”响应数据。

你有调用“jsonCallback”的本地函数吗？

这是一个简单的 jsonP 请求，它使用响应数据启动函数“gotBack()”：

            function gotBack(data) {
                console.log(data);
            }
            $.ajax({
                url: 'http://test.xyz.com/login' + '?callback=?',
                type: "POST",
                data: formData,
                dataType: "jsonp",
                jsonpCallback: "gotBack"
            });

Answer 3

您可以尝试以下方法，并在任务管理器中关闭所有chrome浏览器实例，然后通过命令“chrome.exe --disable-web-security”以web安全禁用模式打开浏览器

 success: function (resdata) {
        alert(resdata);
        alert(JSON.stringify(resdata));
    },

以及使用“调试器”调试代码的更好选择；

success: function (resdata) {
            debugger;
            alert(resdata);
            alert(JSON.stringify(resdata));
        },