可能有一个独立的 JS/HTML (jQuery) 文件，在本地模拟 AJAX 调用？答案

【问题标题】：Possible to have a self-contained JS/HTML (jQuery) file, that emulates an AJAX call locally?可能有一个独立的 JS/HTML (jQuery) 文件，在本地模拟 AJAX 调用？
【发布时间】：2016-05-26 22:40:48
【问题描述】：

我想创建一个发布示例，它是一个自包含的 HTML 文件，可以在本地模拟 AJAX 调用（也就是说，如果该文件在您的本地 PC 文件系统上，并且它在您的浏览器为file:///path/to/file.htm)。

我已经到达了以下示例，它不起作用。我想在那里做的是点击“获取数据！”按钮，使用查询字符串参数shdat向同一页面发起请求；那么在 JS 中，如果页面检测到查询字符串shdat，它应该停止进一步加载页面，并将当前文档替换为字符串（我们正在“发送”的数据），以便“询问者”得到这是 AJAX 调用的响应（并最终显示在 div dataholder 中）。

这是我的例子：

<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <style type="text/css">
.my_btn { background-color:yellow; }
.dispnone { display:none }
  </style>
  <script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
  <script type="text/javascript">

var thishref = window.location.href.slice(0, window.location.href.indexOf('?')+1);
var qstr = window.location.href.slice(window.location.href.indexOf('?')+1);
console.log("qstr", qstr);
if (qstr == "shdat") {
  // interrupt normal page loading:
  window.stop();
  // replace entire page so far with our "data",
  // which will effectively "send it back" to "asker"?
  // (doesn't work)
  $(document).html("Sending some message");
}

function OnGetdata(inbtn) {
  console.log("OnGetdata");
  // http://stackoverflow.com/questions/4656843/jquery-get-querystring-from-url

  $.ajax(thishref + "?shdat", {
    success: function(data) {
      console.log("data ", data);
    },
    error: function(xhr, ajaxOptions, thrownError) {
      console.log("error " + thishref + " : " + xhr.status + " / " + thrownError);
    }
  });

}

ondocready = function() {
  $("#getdata").click(function(){
    OnGetdata(this);
  });
}
$(document).ready(ondocready);
  </script>
</head>

<body>
  <h1>Hello World!</h1>
  <p>Here is the test:</p>

  <button type="button" id="getdata" class="my_btn">Get Data!</button>
  <div id="dataholder"></div>

</body>
</html>

问题是，此处的 Ajax 调用将完成，但 console.log("data ", data); 将显示 XMLDocument，它基本上是整个页面 - 而不仅仅是数据。

这样的事情可以做吗？如果可以，怎么做？

【问题讨论】：

您希望通过脚本在本地执行的任何操作通常都会受到浏览器安全措施的限制。他们根本不允许本地文件访问（大多数时候）。如果你想在本地模拟，安装一个像apache这样的服务器，设置起来很快，然后你就有了一个好的模拟器。如果您无法安装 apache，请考虑编写本机应用程序 (#activex #internetexplorer #securitybadidea)
谢谢@MichaelDibbets - 我什至没有想到安全方面的考虑，请记住这一点！我只是认为在file:// 协议中，没有什么可以真正做解释，所以我设法在 PHP 中做我想做的事情（发布为下面的答案）。

标签： javascript jquery html ajax

【解决方案1】：

好吧，我在想这个问题，我想，问题是当调用file:/// 时，根本没有任何东西可以解释数据 - 这就像在 Unix 上执行 cat somefile.txt 一样；你只是得到原始内容，cat 本身不能做任何处理。

因此，当 Ajax 调用运行时，它只是将整个文件作为文本字符串读取，不会被任何东西（包括浏览器）解释，因此我那里的 JS 开关基本上不会运行。

一个快速的解决方法是使用 PHP；并在 PHP（特别是 php-cli，因为它在 Ubuntu/Debian 上被调用，它可能有一个服务器功能开关 -S，但不是完整的 PHP 安装）中具有切换部分（对查询字符串的存在作出反应） );那么，如果您的文件在~/Desktop/tmp.php 中，则可以简单地运行

php -S localhost:8080

...在同一文件夹中 (~/Desktop)，然后在浏览器中访问：http://localhost:8080/tmp.txt。这就是应该如何更改 OP 文件的方式，因此它在 PHP 下可以正常工作 - 我们现在可以将其称为 tmp.php：

<?php

if ($_SERVER["QUERY_STRING"] == "shdat") {
  echo "Sending some message";
  exit;
}

?>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <style type="text/css">
.my_btn { background-color:yellow; }
.dispnone { display:none }
  </style>
  <script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
  <script type="text/javascript">

var thishref = window.location.href.slice(0, window.location.href.indexOf('?')+1);
var qstr = window.location.href.slice(window.location.href.indexOf('?')+1);
//~ console.log("qstr", qstr);
//~ if (qstr == "shdat") {
  //~ // interrupt normal page loading:
  //~ window.stop();
  //~ // replace entire page so far with our "data",
  //~ // which will effectively "send it back" to "asker"?
  //~ // (doesn't work)
  //~ $(document).html("Sending some message");
//~ }

function OnGetdata(inbtn) {
  console.log("OnGetdata");
  // http://stackoverflow.com/questions/4656843/jquery-get-querystring-from-url

  $.ajax(thishref + "?shdat", {
    success: function(data) {
      console.log("data ", data);
    },
    error: function(xhr, ajaxOptions, thrownError) {
      console.log("error " + thishref + " : " + xhr.status + " / " + thrownError);
    }
  });

}

ondocready = function() {
  $("#getdata").click(function(){
    OnGetdata(this);
  });
}
$(document).ready(ondocready);
  </script>
</head>

<body>
  <h1>Hello World!</h1>
  <p>Here is the test:</p>

  <button type="button" id="getdata" class="my_btn">Get Data!</button>
  <div id="dataholder"></div>

</body>
</html>

现在，当我单击“获取数据！”时按钮，我在 JavaScript 控制台中得到“数据正在发送一些消息”，这就是我希望 OP 执行的操作...

【讨论】：

如果你在本地安装了 PHP，你还不如安装 xampp 并获得整个 (L)AMP 堆栈......然后你就可以做到这一切 - HTML、PHP 甚至 AJAX :)跨度>
感谢 @gibberish - 在 Ubuntu/Debian 上，有一个独立的软件包 php-cli 支持服务器功能（5.3 或 5.4 之后，不记得了）但仅用于命令行，它不是完整的 PHP - 所以我真的很高兴我能做到这一点，而无需安装整个 LAMP 堆栈:)
抱歉，没有意识到您使用的是 Linux... 抱歉。