Question

我有以下代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Some jQuery</title>
    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script> 
    <script>
    $(document).ready(function() {
    $("button").click(function() {
       $.ajax({
           url: "myAJAX.html",
           success: function(data) {
           $("#ajaxDiv").html(data);
           }
    });
    });
    });
    </script>
</head>

<body>
    <button>Click me</button>
    <div id="ajaxDiv">&nbsp;</div>         
</body>

</html>

我试图将警报功能放在代码中的各个位置，看来AJAX部分无法正常工作。我阅读了有关Stack Overflow的问题，在互联网上进行了搜索，但无济于事。我尝试使用URL为http://ipaddress/mypage.html的代码，并且在笔记本电脑上安装了具有该IP的服务器。我以前可以在不安装服务器的情况下进行AJAX调用，但是当我引入jQuery时，就像上面的代码一样，什么也没发生。 Div内容保持不变，即为空。我试图提取.txt文件而不是.html，但无济于事。

Answer 1

问题可能出在您的网址设置上。

url: "myAJAX.html"

这应该指向您要调用的Web API的URL。像这样的东西。

url: "/myService/GetStuff"

如果myAJAX.html确实包含实际的服务代码，您也可以发布吗？

Answer 2

状态304表示资源已缓存，因此添加cache:false可以防止缓存

   $.ajax({
           url: "myAJAX.html",
           cache:false,
           success: function(data) {
           $("#ajaxDiv").html(data);
           }
    });

Answer 3

我没有使用$ .ajax（），而是使用以下行来获取myAJAX.html，以将其加载到具有“ ajaxDiv” ID的div中。

$("#ajaxDiv").load("myAJAX.html");

此外，我使用以下代码进行相同操作，并且至少在表面上有效。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Fetch API</title>
    </head>

    <body>
        <button onclick="fetchMe()">Click me</button>
        <div id="ajaxDiv">&nbsp;</div>

        <script>            
        function fetchMe() {
          fetch("myAJAX.html")
            .then(response => response.text())
            .then(data => {
               document.getElementById("ajaxDiv").innerHTML = data;
             });
        }
        </script>
    </body>

</html>

告诉我两个代码段是否有问题。

使用jQuery无法使ajax正常工作

3 个答案: