Question

我使用JQuery的$ .ajax来调用REST方法，并希望使用返回数据更新HTML div。但是，尽管Web服务器指示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;
}
}

“结果”var的内容仍为“无”。这是我的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不起作用。我在这里错过了什么？任何想法都非常感谢。提前谢谢！

EDITED 我尝试使用Google Chrome的Java Script Console调试它，我收到了这个错误：

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.

Answer 1

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

Answer 2

许多误解。

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

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

EDITED

经过测试和工作...... 请参阅： 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>

my.js

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

进一步的读者：jquery.ajax

Answer 3

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

将该陈述置于您的成功之中或创建承诺。当你的ajax调用被执行时，Javascript的行为不像服务器端代码，脚本端代码的执行将继续 - 所以最初结果的值是什么，甚至认为你的webservice调用回来成功，没有办法去返回并更新值，而无需将更新添加到成功处理程序内的元素或使用promise。

就像插件一样 - 看起来你的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>

Answer 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;}});}
}

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

4 个答案:

EDITED

HTML

my.js