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

Question

I would like to create an example for posting, which would be a self-contained HTML file, that could emulate an AJAX call locally (that is, if the file is on your local PC file system, and it opens in your browser as file:///path/to/file.htm ). 我想创建一个发布示例，它是一个独立的HTML文件，可以在本地模拟AJAX调用（也就是说，如果该文件位于本地PC文件系统上，并且在浏览器中以file:///path/to/file.htm打开file:///path/to/file.htm ）。

I have arrived at the following example, which doesn't work. 我到达了以下示例，该示例不起作用。 What I want to do there, is click on the "Get Data!" 我想在那里做的就是单击“获取数据！”。 button, which initiates a request to the same page with a query string parameter shdat ; 按钮，使用查询字符串参数shdat向同一页面发起请求； then in JS, if the page detects the query string shdat , it should stop further loading of the page, and replace the current document as a string (the data we're "sending"), so that the "asker" gets this as the response of the AJAX call (and ultimately shows it in div dataholder ). 然后在JS中，如果页面检测到查询字符串shdat ，它将停止进一步加载页面，并将当前文档替换为字符串（我们正在“发送”的数据），以便“请求者”将其获取为AJAX调用的响应（并最终在div dataholder显示）。

Here is my example: 这是我的示例：

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

The thing is, the Ajax call here will complete, but the console.log("data ", data); 问题是，这里的Ajax调用将完成，但是console.log("data ", data); will show an XMLDocument , which is basically the whole page as it is - instead of the data only. 将显示XMLDocument ，基本上就是整个页面-而不是仅数据。

Is something like this possible to do, and if so, how? 是否可以这样做？如果可以，怎么办？

Answer 1

Well, I was thinking a bit about this, and I guess, the problem is when a call is made to file:/// , there is simply nothing that can interpret data - it would be like doing cat somefile.txt on Unix; 好吧，我对此进行了思考，我想问题是，当调用file:/// ，根本没有任何东西可以解释数据-就像在Unix上做cat somefile.txt一样。 you just get the raw contents, cat in itself cannot do any processing. 您只获取原始内容， cat本身无法进行任何处理。

So, when the Ajax call runs, it simply reads the whole file as a text string, which is not interpreted by anything (including the browser), and so the JS switch I have there would basically never run. 因此，当Ajax调用运行时，它只是将整个文件读取为文本字符串，而不会被任何内容（包括浏览器）解释，因此我在那里使用的JS开关基本上将不会运行。

A quick workaround would be to use PHP; 一个快速的解决方法是使用PHP。 and have the switching part (which reacts on presence of the query string) in PHP (specifically php-cli as it is called on Ubuntu/Debian, which may have a server feature switch -S , but is otherwise not a full PHP install); 并具有PHP（特别是在Ubuntu / Debian上调用的php-cli ，它可能具有服务器功能switch -S ，但不是完整的PHP安装）中的交换部分（对查询字符串的存在做出php-cli ）。 ; then, if your file is in ~/Desktop/tmp.php , one can simply run 然后，如果您的文件位于~/Desktop/tmp.php ，则只需运行

php -S localhost:8080

... in the same folder ( ~/Desktop ), and then visit in a browser: http://localhost:8080/tmp.txt . ...在同一文件夹（ ~/Desktop ）中，然后在浏览器中访问： http://localhost:8080/tmp.txt 。 This is how the OP file should be changed, so it works as expected under PHP - we can call it tmp.php now: 这是应该更改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>

Now, when I click the "Get Data!" 现在，当我单击“获取数据！”时 button, I get the "data Sending some message" in the JavaScript console, which is what I wanted the OP to do... 按钮，我在JavaScript控制台中看到“数据正在发送消息”，这就是我希望OP进行的操作...

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

问题描述

1 个解决方案

解决方案1
2 2016-05-26 14:33:55

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

问题描述

1 个解决方案

解决方案1 2 2016-05-26 14:33:55

解决方案1
2 2016-05-26 14:33:55