JQuery $.ajax 成功数据始终为空答案

【问题标题】：JQuery $.ajax success data is always emptyJQuery $.ajax 成功数据始终为空
【发布时间】：2014-01-29 12:05:26
【问题描述】：

我正在使用 JQuery 的 $.ajax 调用 REST 方法，并希望使用返回数据更新 HTML div。但是，尽管网络服务器指示 200 响应，但成功数据始终为空。预期的响应只是纯文本。此外，当我通过浏览器调用 REST 方法时，会显示预期的响应。

这是我的 JS 的内容：

window.onload = function() {
document.getElementById("button").onclick = function() {
    var result = "none";
    $.ajax({
        url: 'http://<local_server:port>/<string_parameter>/',
        type: 'GET', 
        aysnc: false,
        success: function(data) {
            result = data;
        }
    });
    document.getElementById("texthere").innerHTML = result;
}
}

“结果”变量的内容仍然是“无”。这是我的 HTML 文件：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-2.0.0.js">
    <script type="text/javascript" src="my.js"></script>
</head>
<body>
    <div id="texthere"Going to be updated when button is clicked</div><br />
    <div style="width:200px">
        <button id="button">Update</button>
    </div>
</body>
</html>

我看到了相关的问题以及他们将异步设置为 false 和跨域设置为 false 的建议不起作用。我在这里想念什么？任何想法都非常感谢。提前致谢！

已编辑 我尝试使用 Google Chrome 的 Java 脚本控制台对其进行调试，但出现此错误：

XMLHttpRequest cannot load http://<server:port>/<param>/. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

我应该在服务器上做些什么，或者我可以在我的客户端脚本上做一个解决方法吗？再次感谢

更新我使用 IE11 进行了尝试，数据现在显示在 HTML div 上。但是，我想在不同的浏览器上运行它。那我应该在客户端脚本还是在服务器端做什么呢？

更新通过在服务器端允许 CORS，我能够使其正常工作。我正在为我的服务器端脚本使用 Django，所以我需要调整我的 settings.py 上的一些条目并添加一个额外的类。如果有人使用 Django 并遇到与我相同的问题，this guide will help you allow CORS.

【问题讨论】：

aysnc 有错别字，应该是async
您的 HTML 格式不正确。关闭 id 为“texthere”的 div 的 div 标签
不是这样..只是一个错字

标签： jquery ajax django rest

【解决方案1】：

我猜这是因为拼写错误 aysnc 而不是异步。也就是说，我建议避免同步 ajax 调用。

【讨论】：

【解决方案2】：

许多误解。

使用 async 代替 aysnc（仅当您确实需要时）
cross-domain 仅在对不同域进行调用时才需要（不要看起来是你的情况）
result 值在 ajax 函数之外无法访问，请尝试：result = dataFunction(data); 将data 导出到外部函数或仅更改 ajax 函数内部的内容。
个人意见，用.ready()代替.load()
如果您使用的是jQuery，为什么不一直使用？

主要原因： OP 中的 HTML 和 JS 示例代码格式错误。

已编辑

已经过测试并且可以正常工作... 请参阅：JsFiddel example

HTML

<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-2.0.0.js"></script>
    <script type="text/javascript" src="my.js"></script>
  </head>
  <body>
    <div id="texthere">Going to be updated when button is clicked</div>
    <br />
    <div>
      <button id="button">Update</button>
    </div>
  </body>
</html>

我的.js

$(document).ready(function() {
    $('#button').click(function() {
        $.ajax({
            url: 'your.file',
            type: 'GET',
            success: function(data) {
                $('#texthere').html(data);
            }
        });
    });
});

更多读者：jquery.ajax

【讨论】：

在 Ajax 类型中尝试使用 POST 而不是 GET。
顺便说一句，您收到错误警报还是仍然是空响应？控制台有错误吗？
感谢@gmo 的一贯帮助。但我认为情况并非如此。我正在更新我的问题，因为我在使用 Google Chrome 的 java 脚本控制台调试它时发现了一个新错误。请检查我编辑的问题，希望能再次提供反馈。再次感谢！
对不起，我不能没有更多信息。你是如何处理<server:port> 和<param> 变量的？您是否正在从另一个域运行您的文件（现在看起来像这样）.. 您可以在 jsFiddle 中复制您的代码吗？
我能够通过在服务器端允许 CORS 来使其工作。但是，我仍然会将其标记为我的问题的答案，因为这使我找到了根本原因。再次感谢！

【解决方案3】：

document.getElementById("texthere").innerHTML = result;

将该声明放在您的成功中或创建一个承诺。当您进行 ajax 调用时，Javascript 的行为不像服务器端代码，脚本端代码的执行将继续 - 所以最初结果的值是什么，甚至认为您的 web 服务调用成功返回，没有办法去返回并更新值，而无需将更新添加到成功处理程序中的元素或使用承诺。

就像一个插件一样——看起来你的 HTML 格式也不正确——

<div id="texthere"Going to be updated when button is clicked</div>

应该是

<div id="texthere">Going to be updated when button is clicked</div>

【讨论】：

谢谢。尝试将其放在成功括号内，但数据仍然为空。如何创建承诺？

【解决方案4】：

window.onload = function(){document.getElementById("button").onclick = function()
{     
$.ajax({url: 'http://<local_server:port>/<string_parameter>/',
        type: 'GET',success: function(data){document.getElementById("textwhere").innerHTML = data;}});}
}

【讨论】：

在您的代码中加入一些解释是个好主意。