示例 AJAX 调用不起作用答案

【问题标题】：Sample AJAX call not working示例 AJAX 调用不起作用
【发布时间】：2016-05-13 07:26:32
【问题描述】：

尝试做一个简单的 AJAX 调用（自学）。我在与html 相同的文件夹中有一个.txt 文件。我在这里做错了什么？谢谢。

<html>
   <head>
      <script type="text/javascript">
        $(document).ready(function(){
            $("#poo").submit(function(e){
                e.preventDefault(); //stop submit
                $.ajax({
                    type: "GET",
                    url: "data.txt",
                    data: "", 
                    success: function(data){
                        $("#foo").html(data);
                        document.getElementById("foo").style.display = 'block';
                        alert('hey');
                    }
                });
            });
        });
    </script>
   </head>
    <body>
        <form id="poo">
            <input type="text"> </input>
            <input type="submit"> </input>
        </form>
            <br>
            <br>
            <div style='display: none;'>
            <p id="foo">this shows</p>
            </div>
            <a href="page.html">Start Over</a>


    </body>
  </head>
</html>

【问题讨论】：

您是否在控制台中看到任何错误？您是在服务器上运行它还是只在本地计算机上运行？
是的，在我的 chrome 控制台上：Uncaught ReferenceError: $ is not defined 第一行 $(document).ready(function(){
你是否包含了 jQuery 库？
jquery 是否存在？找不到 jquery 时，此错误很典型。
您在运行 HTTP 服务器吗？当您从本地文件发送 ajax 请求时，Chome 不喜欢它。

标签： javascript jquery html ajax forms

【解决方案1】：

这是一个通过 AJAX 加载远程文件并使用 .innerHTML() 将其加载到 jQuery 选择器中的任何元素中的便捷功能。

// Does the exact same thing as the entire block of code you wrote..
// These jQuery methods are chainable so you can do this in 1 statement.

$("#foo")                // Contains the DOM reference, 
                         // so no need to use getElementById().
    .load("data.txt")    // Loads "data.txt" into "#foo". 
    .show();             // Makes "#foo" visible.

相关：

根据您的 cmets，您还有一些其他问题。

您说您不确定是否已加载 jQuery。 jQuery 只是 javascript，所以你将它包含在 <script></script> 标签中。最简单的方法是使用jQuery's CDN。单击链接，然后选择所需的版本和格式。将有一个包含脚本标签的弹出窗口，只需将其复制到页面中，最好在页面上的任何其他 Javascript 之前。如果您不确定要使用哪个版本/格式，v1.x, minified 是不错的选择。

您提到您在本地运行它。问题是，Javascript 不应该直接访问您的文件系统。它将尝试通过http 协议请求文件，如果没有服务器软件，您只能通过file:// 协议请求文件。

互联网上有无数的主题，但要解决它，你应该安装一个服务器。 XAMPP 很好，而且它是跨平台的。下载它，您的应用程序将在您的所有浏览器中运行。当您将其上传到服务器时，它也将在您的浏览器中运行

【讨论】：

感谢帮助！我还必须在 Safari 中打开才不会遇到浏览器给出的任何问题（请参阅原始问题 cmets）。
@ceuskervin - 我已经用解决问题所需的所有相关信息更新了答案。如果我有帮助，请随时按我的回答打勾。 :)
@Pamblam-感谢您的详细回答。效果很好。

【解决方案2】：

尝试添加dataType: "text"

$.ajax({
    type: "GET",
    url: "data.txt",
    dataType: "text",
    success: function(data){
        $("#foo").html(data);
        document.getElementById("foo").style.display = 'block';
        alert('hey');
    })

【讨论】：