可能有一个自包含的JS / HTML（jQuery）文件，在本地模拟AJAX调用？ [英] Possible to have a self-contained JS/HTML (jQuery) file, that emulates an AJAX call locally?
问题描述
我想创建一个发布示例，它将是一个自包含的HTML文件，可以在本地模拟AJAX调用（即，如果该文件位于本地PC文件系统上，并且会在您的浏览器为 file：///path/to/file.htm ）。
我已经到达以下例如，这不起作用。我想在那里做什么，点击获取数据！按钮，它使用查询字符串参数 shdat 启动对同一页面的请求;那么在JS中，如果页面检测到查询字符串 shdat ，它应该停止进一步加载页面，并将当前文档替换为一个字符串（我们发送），以便提问者将此作为AJAX调用的响应（并最终将其显示在div dataholder 中）。
这里是我的例子：
< html>
< head>
< meta http-equiv =Content-Typecontent =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）{
//中断正常页面加载：
window.stop（）;
//用我们的数据替换整个页面，
//将有效地发回给提问者？
//（不起作用）
$（document）.html（发送一些消息）;
}
函数OnGetdata（inbtn）{
console.log（OnGetdata）;
// http://stackoverflow.com/questions/4656843/jquery-get-querystring-from-url
$ .ajax（thishref +？shdat，{
成功：函数（数据）{
console.log（data，data）;
}，
错误：function（xhr，ajaxOptions，thrownError）{
console。 log（error+ thishref +：+ xhr.status +/+ thrownError）;
}
}）;
$ b ondocready = function（）{
$（＃getdata）。click（function（）{
OnGetdata（this）;
}）;
}
$（document）.ready（ondocready）;
< / script>
< / head>
< body>
< h1> Hello World！< / h1>
< p>以下是测试：< / p>
< button type =buttonid =getdataclass =my_btn>获取数据！< / button>
< div id =dataholder>< / div>
< / body>
< / html>
问题是，Ajax调用将完成，但是控制台。 log（data，data）; 将显示一个 XMLDocument ，它基本上是整个页面 - 而不是数据。
是否可以这样做，如果是这样的话，怎么做？
好吧，我在想这个问题，我猜，问题在于当调用 file：/// 时，根本没有它可以解释数据 - 它就像在Unix上执行 cat somefile.txt 一样;你只要得到原始内容， cat 本身不能进行任何处理。
<一个快速的解决方法是使用PHP;并在PHP（特别是
php-cli ）中具有切换部分（对查询字符串的存在作出反应），因为它在Ubuntu / Debian上调用，可能具有服务器功能切换 -S ，但不是完整的PHP安装）;那么，如果您的文件位于〜/ Desktop / tmp.php 中，则可以简单地运行 php -S localhost：8080
...在同一个文件夹（<然后在浏览器中访问： http：// localhost：8080 / tmp.txt 。这就是OP文件应该如何改变的方式，所以它可以在PHP下正常工作 - 我们现在称之为 tmp.php ：
<？php
if（$ _SERVER [QUERY_STRING] ==shdat）{
回显发送一些信息;
出口;
}
？>
< html>
< head>
< meta http-equiv =Content-Typecontent =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）{
//〜//中断正常页面加载：
//〜window.stop（）;
//〜//用我们的data，
//〜//替换整个页面，这将有效地发回给提问者？
//〜//（不起作用）
//〜$（document）.html（发送一些消息）;
//〜}
函数OnGetdata（inbtn）{
console.log（OnGetdata）;
// http://stackoverflow.com/questions/4656843/jquery-get-querystring-from-url
$ .ajax（thishref +？shdat，{
成功：函数（数据）{
console.log（data，data）;
}，
错误：function（xhr，ajaxOptions，thrownError）{
console。 log（error+ thishref +：+ xhr.status +/+ thrownError）;
}
}）;
$ b ondocready = function（）{
$（＃getdata）。click（function（）{
OnGetdata（this）;
}）;
}
$（document）.ready（ondocready）;
< / script>
< / head>
< body>
< h1> Hello World！< / h1>
< p>以下是测试：< / p>
< button type =buttonid =getdataclass =my_btn>获取数据！< / button>
< div id =dataholder>< / div>
< / body>
< / html>
现在，当我点击获取数据！按钮，我在JavaScript控制台中获得数据发送一些消息，这是我希望OP执行的操作...
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).
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; 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).
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); will show an XMLDocument, which is basically the whole page as it is - instead of the data only.
Is something like this possible to do, and if so, how?
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; you just get the raw contents, cat in itself cannot do any processing.
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.
A quick workaround would be to use 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); then, if your file is in ~/Desktop/tmp.php, one can simply run
php -S localhost:8080
... in the same folder (~/Desktop), and then visit in a browser: 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:
<?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...
这篇关于可能有一个自包含的JS / HTML（jQuery）文件，在本地模拟AJAX调用？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
