two.html

Question

我试图通过使用ajax在onw.html页面上获取two.html的所有内容，但是不知道它不能正常工作必须开发一个页面应用程序n url不应该在下面加载已发布我的代码。

<html>
    <head>
        <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
        <script>
            // Check browser support
            function demo()
            {
                var name=document.getElementById('dd').value;

                if (typeof(Storage) !== "undefined") {
                    // Store
                    localStorage.setItem("lastname", name);
                    // Retrieve
                } else {
                    document.getElementById("result").innerHTML = "Sorry, your browser does not support Web Storage...";
                }
            }

            $(document).ready(function(){
                $("button").click(function(){

                $.ajax({
                    url: "two.html",  
                    success: function(result){
                        $("#result").html(result);
                    }});
                });
            });
        </script>
    </head>

    <body>
        <div id="result"></div>
        <input id="dd" type="text" onblur="demo()" >
        <br/>
        <button>two</button>
        <br/>
        write something & click on link it will redirect to another page.
        close this page and open three.html page.

        <br/>
        <img src="1.png" alt="da" style="width:150px;height:150px"></img>
    </body>

two.html

  <!DOCTYPE html>
  <html>
  <body id="body">

  <div id="result"></div>
  <label>Second Page</label>
  <script>
    if (typeof(Storage) !== "undefined") {
     document.getElementById("result").innerHTML = localStorage.getItem("lastname");
     } else {
     document.getElementById("result").innerHTML = "Sorry, your browser does  not support Web Storage...";
    }
   </script>
   <img src="2.gif" alt="da" style="width:150px;height:150px"></img>
 </body>
 </html>

Answer 1

Chrome的内部设置阻止了您的请求，因为您没有使用支持的方案，即（http，数据，Chrome，Chrome扩展程序，https，chrome-extension-resource）。

简而言之，您正在从桌面运行该文件，因此文件地址以file://而不是http://或https://

开头

您需要将服务器设置中的文件作为localhost运行，或将文件上传到远程服务器。

您还可以使用简写版.get()简化代码：

$(document).ready(function(){
     $("button").click(function(){
             $.get( "two.html", function( result ) {
                  $( "#result" ).html( result );
              });
      });
});

显然，您也可以set a flag in chrome to override the scheme requirement，但是最好只使用正确的方案在服务器上运行文件，如果您确实更改了标记，请务必在“＃39”时将其还原。在本地完成测试，毕竟它有一个原因。

Answer 2

在你的控制台上我可以看到很多错误。

您尝试在没有localhost的情况下进行ajax调用或没有任何服务器。
你没有提及 mime-type：“text / html”此处。

所以你需要知道ajax。没有 http 或 https 网址， Ajax 无效。因此，必须需要启动localhost或设置任何网络服务器。

如果您想在当前的html页面上加载其他html文件内容，那么您可以使用

$("#results").load("test.html");

但仅适用于firefox浏览器无法使用Chrome 。因为 chrome-security flag 不允许您从本地文件系统加载Web浏览器上的文件。如果你想要它适用于chrome也有两种选择。

您可以将您的申请作为Chrome扩展名。
首先，您可以设置任何本地服务器并启动localhost并将您的文件复制到www或webapp目录中，然后尝试使用Ajax。

如果您已设置第2步，请尝试此操作。

$("button").click(function(){
     /* you can make ajax by 2 ways 1st ways this which used traditionally */
     $.ajax({
        type:"GET",
        url: "two.html",
        mimeType: "text/html; charset=utf-8",
        success: function(result){
            $("#result").html(result);
        });
     /* 2nd Ajax type is...*/
   // $("#result").load("two.html");
  });

如果你有 wamp 服务器，那么复制你的所有文件并粘贴在这个目录上 “C：\ Program Files \ wamp \ www \”和

启动您的localhost。

打开浏览器并输入localhost

并选择您的基本html文件。然后单击它将起作用的按钮。

我希望它会对你有所帮助。

Ajax代码在html中不起作用

two.html

2 个答案: