Javascript 示例AJAX调用不起作用_Javascript_Jquery_Html_Ajax_Forms

Javascript 示例AJAX调用不起作用

javascript jquery html ajax forms

Javascript 示例AJAX调用不起作用,javascript,jquery,html,ajax,forms,Javascript,Jquery,Html,Ajax,Forms,尝试做一个简单的AJAX调用（自学）。我有一个.txt文件，和html在同一个文件夹中。我做错了什么？谢谢 <html> <head> <script type="text/javascript"> $(document).ready(function(){ $("#poo").submit(function(e){ e.preventDefault(); //stop

尝试做一个简单的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>


$（文档）.ready（函数（）{
$（“#poo”）。提交（功能（e）{
e、 preventDefault（）；//停止提交
$.ajax({
键入：“获取”，
url:“data.txt”，
数据：“，
成功：功能（数据）{
$（“#foo”）.html（数据）；
document.getElementById（“foo”）.style.display='block'；
警惕（‘嘿’）；
}
});
});
});




这表明

尝试添加

数据类型：“text”

这是一个方便的函数，通过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，所以可以将其包含在

标记中。最简单的方法是使用。单击链接，然后选择所需的版本和格式。将出现一个包含脚本标记的弹出窗口，只需将其复制到页面中，最好在页面上的任何其他Javascript之前。如果您不确定要使用哪个版本/格式，v1.x，缩小

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

互联网上有无数关于这个的话题，但要解决这个问题，你应该安装一个服务器。这是一个很好的平台，而且是跨平台的。下载它，您的应用程序将在所有浏览器中运行。当您将其上传到服务器时，它也会在浏览器中工作
您在控制台中看到任何错误吗？您是在服务器上还是仅在本地计算机上运行此操作？是的，在我的chrome控制台上：
uncaughtreferenceerror:$未为第一行$（文档）定义）。就绪（函数（）{您是否包括jQuery库？jQuery是否存在？当找不到jQuery时，此错误是典型的。您是否运行HTTP服务器？Chome不喜欢从本地文件发送ajax请求。感谢这一帮助！我还必须在Safari中打开，以避免遇到来自浏览器的任何问题（请参阅原始问题注释）@ceuskervin-我已经用解决问题所需的所有相关信息更新了答案。如果我有帮助，请随意选择我的答案。@Pamblam-谢谢你的详细答案。它非常有效。 // 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.