I'我试图将一个包含XMHTTPRequest脚本的js文件src到我的HTML中
I'm trying to src a js file containing XMHTTPRequest script into my HTML
如果我将XHR文件直接嵌入到HTML文档中,一切都会正常工作。一旦我通过<script type="text/javascript" src="js/ajax_gallery.js">ajax_json_gallery('gallery');</script>
什么都不管用,我也不会出错。我假设这与XHR在HTML的单独文件中创建有关。我只是不喜欢XHR脚本扰乱我的HTML,我只想加载为一个外部JS文件。
我已经将我的主要3个脚本galleryHandle.php、XHR.js、ajax_gallery.html都移到了同一个目录级别,以保持简单。画廊的图片在一个名为"画廊"的文件夹中,也在同一级别上。
这是我的代码:HTML
<html>
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="css/gallery.css" />
</head>
<body>
<div id="pagetop"></div>
<div id="thumbnailbox"></div>
<div id="pictureframe"></div>
<script type="text/javascript" src="XHR.js">ajax_json_gallery('gallery');</script>
</body>
</html>
JavaScript
function ajax_json_gallery(folder) {
"use strict";
var httpRequest = new XMLHttpRequest();
document.getElementById("pagetop").innerHTML = "dynamic ajax json gallery";
var thumbnailbox = document.getElementById("thumbnailbox");
httpRequest.open("POST", "galleryHandle.php", true);
httpRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
httpRequest.onreadystatechange = function() {
if (httpRequest.readyState === 4 && httpRequest.status === 200) {
var data = JSON.parse(httpRequest.responseText);
var pictureframe;
pictureframe.innerHTML = "<img src='"+data.img1.src+"'>";
thumbnailbox.innerHTML = "";
for (var obj in data) {
if (data[obj].src){
thumbnailbox.innerHTML += '<div onclick="putinframe('''+data[obj].src+''')"><img src="'+data[obj].src+'"></div>';
}
}
}
};
httpRequest.send("folder="+folder);
thumbnailbox.innerHTML = "Loading...";
}
function putinframe(src) {
"use strict";
var pictureframe = document.getElementById("pictureframe");
pictureframe.innerHTML = '<img src = " '+src+' " >';
}
PHP
<?php
header("Content-Type: application/json");
//bring in folder name
$folder = $_POST["folder"];
//start componding json
$jsonData = '{';
//compound directory path
$dir = $folder."/";
//open directory
$dirHandle = opendir($dir);
//init while looop
$i = 0;
while ($file = readdir($dirHandle)) {
if(!is_dir($file) && strpos($file, '.jpg')){
$i++;
$src = "$dir$file";
$jsonData .= '"img'.$i.'":{ "num":"'.$i.'","src":"'.$src.'", "name":"'.$file.'" },';
}
}
closedir($dirHandle);
$jsonData = chop($jsonData, ",");
$jsonData .= '}';
echo $jsonData;
?>
我知道我的代码中有一些冗余,但这只是一个教程,我正在学习使用POST、XHR构建JSON的基础知识。
不管怎样,我们一如既往地感谢您的帮助。感谢
说明
来自W3C:
<script type="text/javascript" src="myscript.js">
alert('I am pointless as I won''t be executed');
</script>
在页面中遇到此元素后,浏览器将加载文件myscript.js并执行它。当您提供src属性时,脚本元素本身内的任何内容都将被跳过最后一个示例将加载文件myscript.js并执行其中的代码,但根本不会执行脚本元素内的警报。
解决方案
在head
标签中尝试以下操作:
HTML
<script type="text/javascript" src="XHR.js"></script>
<script type="text/javascript">
ajax_json_gallery('gallery');
</script>
<script type="text/javascript" src="XHR.js">
不能在一个标记中同时具有src属性和javascript。把它们分开。像这样。。。
<script type="text/javascript" src="XHR.js"></script>
<script type="text/javascript">ajax_json_gallery('gallery');</script>
相关文章:
- chrome扩展:尽管运行了at:documentidle,js脚本还是过早启动
- 如何在运行时在angular 2中加载外部js脚本
- 为什么我的控制器没有启动函数.js脚本
- 如何让JS脚本在导航后继续运行(谷歌chrome控制台)
- 如何使用Node.js脚本从Rally获取用户的修订历史
- 在Debian中运行包含load()和print()函数的JS脚本
- 更改路由后,运行一次js脚本
- Yii2从js脚本的页面上添加来自供应商文件夹的图像、css、js文件
- PHP和JS脚本的奇怪问题,在我刷新页面之前第一次失败
- js脚本未加载到jinja2模板中
- Disqus的计数.js脚本在索引中无法正常运行.html与react.js网站
- 按顺序异步加载JS脚本(等待上一个脚本完成)
- node.js脚本中出现Sqlite Sqlite_MISUSE错误
- ASP.NET MVC路由-动态加载.js脚本
- 在执行JS脚本后监视对DOM的更改
- 在 Node.Js 脚本中使用 Javascript 计时器在特定时间触发事件
- 合并 2 个 JS 脚本 - 老派
- 简单的拖放JS脚本不起作用
- 从外部 js 脚本创建元素并插入到 html 中
- 将参数传递到外部 JS 脚本的最佳方法