示例AJAX调用不起作用


                    

尝试进行简单的AJAX调用(自学)。 我在与 html </ code>相同的文件夹中有一个 .txt </ code>文件。 我在这里做错了什么? 谢谢。</ p>

  
    <头>
       <br>          $(document).ready(function(){<br>              $(“#poo”)。submit(function(e){<br>                  e.preventDefault(); //停止提交<br>                  $ .ajax({<br>                      类型:“ GET”,<br>                      网址:“ data.txt”,<br>                      数据:“”,<br>                      成功:功能(数据){<br>                          $(“#foo”)。html(data);<br>                          document.getElementById(“ foo”)。style.display =&#39;block&#39;;<br>                          警报(&#39;嘿&#39;);<br>                      }<br>                  });<br>              });<br>          });<br>      &lt;/ script&gt;<br>     &lt;/ head&gt;<br>      &lt;身体&gt;<br>          <form id =“ poo”><br>              <input type =“ text”> &lt;/ input&gt;<br>              <input type =“ submit”> &lt;/ input&gt;<br>          &lt;/ form&gt;<br>              <br><br>              <br><br>              <div style ='display:none;'><br>              <p id =“ foo”>显示&lt;/ p&gt;<br>              &lt;/ div&gt;<br>              <a href="page.html">重新开始</a></p> <p>     &lt;/ body&gt;<br>    &lt;/ head&gt;<br> &lt;/ html&gt;<br> &lt;/ code&gt; &lt;/ pre&gt;<br>      &lt;/ div&gt;</p>

展开原文

原文

Trying to do a simple AJAX call (teaching myself). I have a .txt file in same folder as html. What am I doing wrong here? Thanks.

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

2个回答


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

  //与您编写的整个代码块完全相同。
//这些jQuery方法是可链接的,因此您可以在1条语句中执行此操作。

$(“#foo”)//包含DOM引用,
                          //因此无需使用getElementById()。
     .load(“ data.txt”)//将“ data.txt”加载到“ #foo”中。
     。显示(); //使“ #foo”可见。
</ code> </ pre>

相关:</ p>


  • jQuery选择器和方法链接 </ li>
  • jQuery load()</ code>方法 </ li>
  • jQuery show()</ code>方法。</ li>
    </ ul>


    根据您的评论,您还有其他问题。</ p>

    您说过不确定是否已加载jQuery。 jQuery只是javascript,因此您将其包含在 &lt;/ script&gt; &lt;/ code&gt;标记中。 最简单的方法是使用<a href="https://code.jquery.com/" rel="nofollow"> jQuery的CDN </a>。 单击链接,然后选择所需的版本和格式。 将出现一个包含script标签的弹出窗口,只需将其复制到页面中即可,最好在页面上包含任何其他Javascript之前。 如果您不确定要使用哪种版本/格式,则最好使用<strong> v1.x(缩小版)&lt;/ strong&gt;。&lt;/ p&gt;</p> <p><hr></p> <p><p>您提到您在本地运行它。 问题是,Javascript不应该直接访问您的文件系统。 它将尝试通过<code> http &lt;/ code&gt;协议请求文件,而没有服务器软件,则只能通过<code> file:// &lt;/ code&gt;协议请求文件。&lt;/ p&gt;</p> <p><p>整个Internet上都有无数的主题,但是要解决此问题,您应该安装服务器。 <a href="https://www.apachefriends.org/download.html" rel="nofollow"> XAMPP </a>是一个很好的平台,它是跨平台的。 下载该文件,您的应用程序即可在所有浏览器中运行。 当您将其上传到服务器时,它也将在您的浏览器中运行&lt;/ p&gt;<br>      &lt;/ div&gt;</p>

展开原文

原文

This is a convenience function that loads remote files via AJAX and uses .innerHTML() to load it into any elements in your jQuery selector.

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

Relevant:


Per your comments, you had some other issues.

You said you weren't sure if jQuery was loaded. jQuery is just javascript, so you include it in <script></script> tags. The easiest way is to use jQuery's CDN. Click on the link, then choose the version and format you want. There will be a pop-up containing the script tag, just copy it into the page, preferably before any other Javascript you have on the page. If you're not sure which version/format to use, v1.x, minified is the way to go.


You mentioned that you were running it locally. The problem is, Javascript isn't supposed to have direct access to your filesystem. It will attempt to request the file over the http protocol, without having server software you can only request files over the file:// protocol.

There are zillions of topics on this all over the internet, but to solve it you should install a server. XAMPP is a good one and it's cross platform. Download that and your application will work in all your browsers. It will work in your browsers when you upload it to a server as well


尝试添加 dataType:“文本” </ code> </ p>

  $。ajax({
     类型:“ GET”,
     网址:“ data.txt”,
     dataType:“文本”,
     成功:功能(数据){
         $(“#foo”)。html(data);
         document.getElementById(“ foo”)。style.display ='block';
         警报('嘿');
     })
</ code> </ pre>
     </ div>

展开原文

原文

try to add the dataType: "text"

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

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问
相关内容推荐