Question

我将用户名和密码作为请求参数发送到AJAX中的服务器并尝试显示响应消息。但是无法显示响应消息。在fiddler中它显示响应消息。但是在浏览器屏幕上它没有显示。请有人帮助我在哪里我错了或需要改变任何东西.. 我写得像这样 -

$(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并且它有效。

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

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

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

注意：标题应包含Content-Type:application/javascript！

顺便说一句，即使现在还没有解决你的问题 - 这里有一些调整，我想建议你：

请勿在jQuery.ajax()的文档中将async设置为false：

跨域请求和dataType：＆＃34; jsonp＆＃34;请求不支持同步操作
您不需要设置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浏览器实例，然后通过命令＆＃34; chrome.exe --disable-web-security＆＃34;在Web安全禁用模式下打开浏览器。

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

使用＆＃34;调试器调整代码的更好选择;＆＃34;

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

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

3 个答案: