可能有一個自包含的JS / HTML（jQuery）文件，該文件在本地模擬AJAX調用？

Question

我想創建一個發布示例，它是一個獨立的HTML文件，可以在本地模擬AJAX調用（也就是說，如果該文件位於本地PC文件系統上，並且在瀏覽器中以file:///path/to/file.htm打開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 ，基本上就是整個頁面-而不是僅數據。

是否可以這樣做？如果可以，怎么辦？

Answer 1

好吧，我對此進行了思考，我想問題是，當調用file:/// ，根本沒有任何東西可以解釋數據-就像在Unix上做cat somefile.txt一樣。 您只獲取原始內容， cat本身無法進行任何處理。

因此，當Ajax調用運行時，它只是將整個文件讀取為文本字符串，而不會被任何內容（包括瀏覽器）解釋，因此我在那里使用的JS開關基本上將不會運行。

一個快速的解決方法是使用PHP。 並具有PHP（特別是在Ubuntu / Debian上調用的php-cli ，它可能具有服務器功能switch -S ，但不是完整的PHP安裝）中的交換部分（對查詢字符串的存在做出php-cli ）。 ; 然后，如果您的文件位於~/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進行的操作...

可能有一個自包含的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