Question

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

<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>

Answer 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.

相关：

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

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

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

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

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

示例AJAX调用不起作用

2 个答案: