Ajax代码在html中不起作用

Question

我正在尝试通过使用Ajax在onw.html页面中获取two.html的所有内容，但是在开发一个页面应用程序时，总之它不能正常工作。

<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-extension，https，chrome-extension-resource）。

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

您需要从服务器设置中以localhost身份运行文件，或者将文件上传到远程服务器。

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

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

显然，您也可以在chrome中设置一个标志来覆盖方案要求，但是，最好仅使用正确的方案在服务器上运行文件，如果您确实更改了该标志，请确保在您进行更改时将其还原在本地完成测试，毕竟是有原因的。

Answer 2

在您的控制台上，我可以看到许多错误。

您正在尝试在没有localhost或没有任何服务器的 情况下进行Ajax调用 。
您不会在此处提及其mime类型：“ text / html” 。

所以第一，你需要知道ajax。 如果没有http或https网址，则Ajax无法使用。 因此，您必须需要启动localhost或设置任何Web服务器 。

如果要在当前html页面上加载其他html文件内容 ，则可以使用

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

但它将仅适用于Firefox浏览器，不适用于chrome 。 因为不允许使用chrome-security标志，因此无法从本地文件系统在Web浏览器上加载文件。 如果您希望它可以在chrome上运行，则有两种选择。

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

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

$("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 Server，则复制所有文件并粘贴到此目录“ C：\\ Program Files \\ wamp \\ www \\”上，然后

启动您的本地主机。

打开浏览器并输入localhost

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

希望对您有帮助。

Ajax代码在html中不起作用

问题描述

two.html

2 个解决方案

解决方案1
2 已采纳 2015-10-09 05:40:12

解决方案2
-2 2015-10-09 06:30:42

Ajax代码在html中不起作用

问题描述

two.html

2 个解决方案

解决方案1 2 已采纳 2015-10-09 05:40:12

解决方案2 -2 2015-10-09 06:30:42

解决方案1
2 已采纳 2015-10-09 05:40:12

解决方案2
-2 2015-10-09 06:30:42