XMLHttpRequest,使用多个1不起作用,只是第一个.需要使用多个
XMLHttpRequest, using more than 1 wont work, just the first on. need to use more than one
为什么在这段代码中只加载第一个脚本?由于某种原因,下一个不会加载,我尝试了不同的组合,但都不起作用,我试图更改变量名和代码中的值,但没有什么能使代码起作用。我应该更改什么才能使脚本一次又一次地工作?就像一个循环。
<label for="img1" class="container1">
<img src="img/cover/1.jpg" alt="" class="container1">
<div>
<input id="img1" type="radio" name="img-descr">
<div>
<p id="Title1"></p>
<p id="Runtime1"></p>
<p id="Plot1"></p>
<script>
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
var fullMovie = JSON.parse(xhttp.responseText)
var movie = { title: fullMovie.Title, runtime: fullMovie.Runtime, plot: fullMovie.Plot,};
document.getElementById('Title1').innerText = movie.title;
document.getElementById('Runtime1').innerText = movie.runtime;
document.getElementById('Plot1').innerText = movie.plot;
}
};
xhttp.open("GET", "http://www.omdbapi.com/?i=tt3322364&plot=short&r=json", true);
xhttp.send();
</script>
</div>
</div>
</label>
<label for="img2">
<img src="img/cover/2.jpg" alt="" class="container1">
<div>
<input id="img2" type="radio" name="img-descr">
<div>
<p id="Title2">Title2</p>
<p id="Runtime2">Title2</p>
<p id="Plot2"></p>
<script>
var xhttp2 = new XMLHttpRequest();
xhttp2.onreadystatechange = function() {
if (xhttp2.readyState == 4 && xhttp2.status == 200) {
var fullMovie2 = JSON.parse(xhttp2.responseText)
var movie2 = { title2: fullMovie2.Title, runtime2: fullMovie2.Runtime, plot2: fullMovie2.Plot,};
document.getElementById('Title2').innerText = movie2.title2;
document.getElementById('Runtime2').innerText = movie2.runtime2;
document.getElementById('Plot2').innerText = movie2.plot2;
}
};
xhttp2.open("GET", "http://www.omdbapi.com/?i=tt1528854&plot=short&r=json", true);
xhttp2.send();
}
</script>
</div>
</div>
</label>
您应该清理代码,这样您就可以在每个想要获取值的地方调用一个函数。你可以在html的头部分有一个脚本,里面有一个类似于的函数
getMovieData( moveID, titleID, runtimeID, plotID ) {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
var fullMovie = JSON.parse(xhttp.responseText)
var movie = { title: fullMovie.Title, runtime: fullMovie.Runtime, plot: fullMovie.Plot,};
document.getElementById(titleID).innerText = movie.title;
document.getElementById(runtimeID).innerText = movie.runtime;
document.getElementById(plotID).innerText = movie.plot;
}
};
xhttp.open("GET", "http://www.omdbapi.com/?i=" . movieID . "&plot=short&r=json", true);
xhttp.send();
}
然后在你的每个标签中调用它。它更干净,可以更好地扩展,应该可以消除你的bug。
好的,他们现在都工作了。我把它们都做成IIFE(立即调用函数表达式)。请参阅本·阿尔曼的文章。
(function() {
xHR();
function xHR() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
var fullMovie = JSON.parse(xhttp.responseText)
var movie = {
title: fullMovie.Title,
runtime: fullMovie.Runtime,
plot: fullMovie.Plot,
};
document.getElementById('Title1').innerText = movie.title;
document.getElementById('Runtime1').innerText = movie.runtime;
document.getElementById('Plot1').innerText = movie.plot;
xHR();
}
};
xhttp.open("GET", "http://www.omdbapi.com/?i=tt3322364&plot=short&r=json", true);
xhttp.send();
}
})();
(function() {
xHR2();
function xHR2() {
var xhttp2 = new XMLHttpRequest();
xhttp2.onreadystatechange = function() {
if (xhttp2.readyState == 4 && xhttp2.status == 200) {
var fullMovie2 = JSON.parse(xhttp2.responseText)
var movie2 = {
title2: fullMovie2.Title,
runtime2: fullMovie2.Runtime,
plot2: fullMovie2.Plot,
};
document.getElementById('Title2').innerText = movie2.title2;
document.getElementById('Runtime2').innerText = movie2.runtime2;
document.getElementById('Plot2').innerText = movie2.plot2;
xHR2();
}
}
xhttp2.open("GET", "http://www.omdbapi.com/?i=tt1528854&plot=short&r=json", false);
xhttp2.send();
}
})();
<label for="img1" class="container1">
<div>
<input id="img1" type="radio" name="img-descr">
<div>
<p id="Title1"></p>
<p id="Runtime1"></p>
<p id="Plot1"></p>
</div>
</div>
</label>
<label for="img2">
<div>
<input id="img2" type="radio" name="img-descr" class="container1">
<div>
<p id="Title2">Title2</p>
<p id="Runtime2">Title2</p>
<p id="Plot2"></p>
</div>
</div>
</label>
<script src="http://gh-canon.github.io/stack-snippet-console/console.min.js"></script>
出现了一些错误。
- 在最后一个
</script>
标记的正上方有一个错误的"}" - 有几个变量标签错误最重要的是
- xhttp变量相互碰撞
bitfiddler说得对,您应该将脚本提取到一个单独的文件中。
忽略html,这里是基于您的代码的工作代码,它修复了上面列出的项目:
<p id="Title1"></p>
<p id="Runtime1"></p>
<p id="Plot1"></p>
<script>
var xhttp1 = new XMLHttpRequest();
xhttp1.onreadystatechange = function() {
if (xhttp1.readyState == 4 && xhttp1.status == 200) {
var fullMovie1 = JSON.parse(xhttp1.responseText)
var movie1 = { title1: fullMovie1.Title, runtime1: fullMovie1.Runtime, plot1: fullMovie1.Plot};
document.getElementById('Title1').innerText = movie1.title1;
document.getElementById('Runtime1').innerText = movie1.runtime1;
document.getElementById('Plot1').innerText = movie1.plot1;
}
};
xhttp1.open("GET", "http://www.omdbapi.com/?i=tt3322364&plot=short&r=json", true);
xhttp1.send();
</script>
<p id="Title2"></p>
<p id="Runtime2"></p>
<p id="Plot2"></p>
<script>
var xhttp2 = new XMLHttpRequest();
xhttp2.onreadystatechange = function() {
if (xhttp2.readyState == 4 && xhttp2.status == 200) {
var fullMovie2 = JSON.parse(xhttp2.responseText)
var movie2 = { title2: fullMovie2.Title, runtime2: fullMovie2.Runtime, plot2: fullMovie2.Plot};
document.getElementById('Title2').innerText = movie2.title2;
document.getElementById('Runtime2').innerText = movie2.runtime2;
document.getElementById('Plot2').innerText = movie2.plot2;
}
};
xhttp2.open("GET", "http://www.omdbapi.com/?i=tt1528854&plot=short&r=json", true);
xhttp2.send();
</script>
相关文章:
- 而循环只设置php中输入字段中的第一个值
- 错误:$injector:modulerr模块错误(我的第一个SPA应用程序)
- IE11中的第二个调用取消了第一个Fetch API调用
- Javascript XMLHttpRequest——只有第一个POST请求有效
- 使用javascript或angularjs特定过滤器搜索字符串中第一个img标记的json值
- 将OnClick函数设置为<ul>,最后一个ul是擦除第一个ul-s
- RxJS油门行为;立即获取第一个值
- Angular UI网格:如何通过第一个UI网格中的按钮使第二个UI网格可见
- 选择多个实例中的第一个
- 如何在调用下一个请求之前完成第一个Ajax Get请求
- Lodash:返回对象的第一个键,该对象的值(即数组)中有一个给定的元素(即字符串)
- 看起来第一个console.log是'It’不太对
- 与杜兰达尔合作的第一个JavaScript项目.尝试从第三方 API 获取数据
- 节点发布错误对象的第一个“属性”
- Javascript:表单验证getElementById仅返回第一个id元素
- 仅将 CSS 规则应用于
中的第一个 ,而不分配类/ID - JS在隐藏未定义的值后仅从数组中返回第一个id的值
- 高图表,检测点是否在堆栈中的第一个
- json结果显示第一个值
- 我的设备后退按钮工作不正常,它转到第一个html,但返回到第二个html