Ajax:批量url列表在文本区发送请求一个接一个,并显示重复的答案
Ajax: bulk url list in textarea sending requests one after another and display answers repetitive
我想在文本区输入大量url列表(每行包含1个url)。提交表单后,ajax应该获取一个url,用这个url做php操作,返回结果,获取另一个url,重复相同的操作。当洞的事情是工作,应该显示一个加载圈("ajax-loader.gif"),结果应该一个接一个地显示,如:
[Submit] -> loading -> result1st -url -> loading ->在result1st -url -> loading ->在result2url ->…下添加result3rd -url一行
我做这整个ajax/js的东西从昨天开始-所以我不是很有经验的方式- php工作没有错误。我的主要问题是js/ajax请求;如何接收结果,用它做事情,…这是我到目前为止写的:
js/ajax (w.o. jquery,因为我不喜欢这个符号):
function send (){
var url = document.getElementById('comment').value.split(''n'); //split input from textarea in array
document.getElementById("load").innerHTML='<img src="ajax-loader.gif" />';
for(var i=0;i<url.length;i++) {
http = new XMLHttpRequest();
http.open("POST", "check.php", true);
http.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
http.send("name=" + url[i]);
http.onreadystatechange=function() {
if (http.readyState == 4) {
document.getElementById("result").innerHTML=http.responseText;
}
}
}
}
html: <form method="post" action="" name="Formular">
<textarea cols="100" rows="10" id="comment"></textarea><br/>
<input type="button" value="Absenden" onClick="send()">
</form>
<div id="load"></div>
<div id="result"></div>
php: <?php
$url = $_POST['name']; //get url
..do funky stuff..
echo $result; //result is a simple string if an element on that url exists
?>
您需要做的是使您的ajax函数递归,例如,在完成时,它调用自己,而不是使用循环。
下面是一个完整的示例,包含在一个php文件中,名为ajax-example.php:<?php
if($_SERVER['REQUEST_METHOD']=='POST'){
sleep(1);
echo $_POST['name'];
die();
}
?>
<html>
<head></head>
<body>
<div id="load">doin nothin</div>
<textarea name="n" id="comment" cols="30" rows="10"></textarea>
<br/>
<button onclick="send()">send</button>
<div id="result"></div>
<script type="application/javascript">
function send (){
var url = document.getElementById('comment').value.split(''n'); //split input from textarea in array
var current = 0;
var total = url.length;
document.getElementById("load").innerHTML='loading';//'<img src="ajax-loader.gif" />';
//call ajax for 1st time
ajax();
function ajax(){
//if there are urls left to process
if(current < total){
var http = new XMLHttpRequest();
http.open("POST", "/ajax-example.php", true);
http.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
http.send("name=" + url[current]);
//increment current marker
current++;
http.onreadystatechange=function() {
if (http.readyState == 4) {
var res = document.getElementById("result");
res.innerHTML=res.innerHTML + http.responseText +"</br>";
//recursive call
ajax();
}
}
}else{
//we are done, remove the loading img
document.getElementById("load").innerHTML='finished';
}
}
}
</script>
</body>
</html>
再补充一点,不要因为你不喜欢jQuery的语法就不喜欢它,它可以让你的生活更容易进行非琐碎的dom操作
相关文章:
- 使用地理位置创建一个显示我当前位置的按钮
- 希望创建一个显示日期+5天和日期+10天之间交付的javascript
- Jquery下拉菜单位于幻灯片上方的一个显示位置
- 当另一个显示时加载HTML而不修改他
- 如何创建一个显示在窗口底部角落的DIV(经过一段时间后)
- 无限旋转木马与下一个和上一个显示
- 三个.js双视口只有一个显示
- i18下一个显示的键而不是值
- 我需要一个显示pdf的解决方案
- 如何制作一个显示必应翻译API结果的简单网页
- 如何添加一个显示/隐藏注释链接不工作与下划线.js
- Flex -调用JavaScript函数并打开一个显示数据的弹出窗口
- 如何创建一个显示当前网页截图的打印对话框
- 在谷歌地图上设置一个显示标记的区域
- Javascript -在点击时显示另一个元素时隐藏一个显示元素
- 创建一个显示/隐藏项目的复选框系统-如何
- 两个不同的谷歌地图在一个页面上,但只有一个显示
- 如何使用jQuery/Javascript创建一个显示输入滑块值的动态文本区
- 如何制作一个显示英国时间的时钟,但整个应用程序都是印度时间
- 将imsg src从一个更改为另一个显示'轻弹'