[英]Possible to have a self-contained JS/HTML (jQuery) file, that emulates an AJAX call locally?
我想创建一个发布示例,它是一个独立的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
,基本上就是整个页面-而不是仅数据。
是否可以这样做?如果可以,怎么办?
好吧,我对此进行了思考,我想问题是,当调用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进行的操作...
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.