Question

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

我已经得到了以下示例，该示例不起作用。我想要做的就是点击＆＃34;获取数据！＆＃34;按钮，使用查询字符串参数shdat向同一页面发起请求;然后在JS中，如果页面检测到查询字符串shdat，它应该停止进一步加载页面，并将当前文档替换为字符串（我们发送的数据＆＃34;发送＆＃34; ），以便＆＃34; asker＆＃34;得到这个作为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，这基本上是整个页面 - 而不是仅数据。

这样的事情可能会发生吗？如果是这样，怎么办？

Answer 1

好吧，我正在考虑这个问题，我想，问题是当调用file:///时，根本没有任何东西可以解释数据 - 这就像做{{1}在Unix上;你只是得到了原始内容，cat somefile.txt本身就无法进行任何处理。

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

快速解决方法是使用PHP;在PHP中具有切换部分（对查询字符串的存在作出反应）（特别是cat，因为它在Ubuntu / Debian上调用，它可能有一个服务器功能开关php-cli，但不是一个完整的PHP安装）;然后，如果您的文件位于-S，则可以直接运行

~/Desktop/tmp.php

...在同一文件夹（php -S localhost:8080）中，然后在浏览器中访问：~/Desktop。这是OP文件应该如何更改，因此它在PHP下按预期工作 - 我们现在可以将其称为http://localhost:8080/tmp.txt：

tmp.php

现在，当我点击“获取数据！”时按钮，我在JavaScript控制台中收到“数据发送一些消息”，这就是我想让OP做的...

可以有一个自包含的JS / HTML（jQuery）文件，它在本地模拟一个AJAX调用吗？

1 个答案: