JavaScript Ajax PHP 做异步显示问题

2015-08-15 21:41:28 +08:00
 eoo
我要实现的功能是: 按下按钮后触发 JavaScript 执行Ajax 向PHP后台查询数据 然后返回给JavaScript进行 一条一条的显示出来, 今天想了一天 蛮子都要炸了,完全不懂JavaScript 都是现学现用,JS帮我看看吧。


带上飞机: http://v.milog.cn/ajax/
代码如下:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0,
maximum-scale=1.0,
user-scalable=0" />
<meta http-equiv=Cache-Control content=no-cache />
<title>测试</title>
<!--JavaScript代码-->
<script type="text/javascript">
i=0;

function go(){
//document.getElementById("txt").innerHTML="<div style='margin:50% auto;text-align:center'>努力加载中...</div>";

if (window.XMLHttpRequest){
xmlhttp=new XMLHttpRequest();
}else {
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}


<!-- Ajax POST请求-->
var url=document.getElementById("url").value;
var go_url = "mysqli.php";
xmlhttp.open("POST",go_url,true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("url="+url);


xmlhttp.onreadystatechange = function(){
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {



var eoo =xmlhttp.responseText;


type(eoo);



}
}
}


function type(eoo){

var str = eoo.split('<>');

//document.getElementById("str").innerHTML += '<div>'+str[i];

txt.innerHTML += '<div>' + str[i] + '</div>';

i++;

if(i>=str.length) return;

setTimeout("type(str)",100);

}


</script>

<!--CSS代码-->
<style type="text/css">
pre{
white-space: pre; /* CSS 2.0 */
white-space: pre-wrap; /* CSS 2.1 */
white-space: pre-line; /* CSS 3.0 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
white-space: -moz-pre-wrap !important; /* Mozilla */
white-space: -hp-pre-wrap; /* HP Printers */
word-wrap: break-word;
}

.header {
text-align:center;
//width:100%;
background-color:#FAEBD7;
padding:10px 20px;
margin:auto;
}

input {
border: 1px dashed #666;
}

</style>
</head>
<body>
<div class="header">
<input type="text" id="url" value="" / >
<button type="button" onclick="ql()">清除</button>
<button type="button" onclick="go()">抓取</button></div>
<div id="txt"></div>
</body>
</html>
3738 次点击
所在节点    JavaScript
30 条回复
emric
2015-08-15 21:54:48 +08:00
关键字: setTimeout 作用域
bdbai
2015-08-15 21:59:52 +08:00
不管怎么样用原生Ajax值得表扬。
feiyuanqiu
2015-08-15 23:03:00 +08:00
稍微改了一下,你看看能用不
http://jsbin.cn/rufubamumo/1/edit?js,output
jsonline
2015-08-15 23:12:06 +08:00
不用jQuey 也是彪悍
ning1022
2015-08-15 23:24:27 +08:00
jquery 几行代码就可以搞定,为啥要写原生的代码
eoo
2015-08-15 23:40:18 +08:00
@feiyuanqiu 可以是可以 但有一些不明白。
eoo
2015-08-15 23:41:53 +08:00
@ningyuqiao456 我不是靠代码吃饭,所以我还要最求效率,所以比较喜欢原生。
8qwe24657913
2015-08-15 23:48:03 +08:00
@eoo setTimeout("type(str)",100);换成setTimeout(function(){type(str)},100);即可,见#1 关键字
变量名叫eoo吐槽无力……
eoo
2015-08-15 23:54:53 +08:00
@8qwe24657913 不行哦,不过还是谢谢。由于是手机码代码,为了节省时间,就随便写了。
8qwe24657913
2015-08-16 00:00:45 +08:00
@eoo 刚刚看错了……以为函数直接传的str……
function type(eoo) {
typeStr(eoo.split('<>'));
}
function typeStr(str) {
//document.getElementById("str").innerHTML += '<div>'+str[i];
txt.innerHTML += '<div>' + str[i] + '</div>';
i++;
if (i >= str.length) return;
setTimeout(function(){type(str)}, 100);
}
8qwe24657913
2015-08-16 00:02:10 +08:00
@eoo 好吧我手残……
function type(eoo) {
typeStr(eoo.split('<>'));
}
function typeStr(str) {
//document.getElementById("str").innerHTML += '<div>'+str[i];
txt.innerHTML += '<div>' + str[i] + '</div>';
i++;
if (i >= str.length) return;
setTimeout(function(){typeStr(str)}, 100);
}
eoo
2015-08-16 00:10:24 +08:00
@8qwe24657913 还是不能连续输出,点测试 只能取一天数据。。。。。 感情JavaScript水好深,真是吓屎宝宝我了,学点基础果断回到原生PHP的怀抱中~~~
8qwe24657913
2015-08-16 00:21:31 +08:00
@eoo 听不懂"只能取一天数据"什么意思……是指不能点第二次测试吗……那是因为你的i是全局变量,点了一次之后i已经到7了
eoo
2015-08-16 00:32:12 +08:00
@8qwe24657913 打错字了,是一条, 其实我想要的效果就是这样的http://e.milog.cn/ 但是我又不会怎么监控echo的的状态, 所以只能把responseText返回的数据再进行二次加工。 无奈 不会JavaScript 现学现写 就是不知道哪里出了问题。
eoo
2015-08-16 00:36:13 +08:00
@8qwe24657913 可以点,就是本来应该点一次就连续输出5条记录,现在问题是点一次出一天。
8qwe24657913
2015-08-16 00:49:20 +08:00
@eoo 你确定用的是#11的代码吗……还有测试页面第43行比这边主题的代码多了个setTimeout("type(eoo)",100);删掉
suikator
2015-08-16 01:14:30 +08:00
@8qwe24657913 么么哒
will0404
2015-08-16 01:23:20 +08:00
用jquery多省事
eoo
2015-08-16 08:51:39 +08:00
@8qwe24657913 要不你直接帮我改吧 顺便测试 http://v.milog.cn/eoo/ 用户名 eoo 密码 xuchangyu 文件在ajax文件夹里面。
eoo
2015-08-16 08:52:44 +08:00
@will0404 jquery已经阻碍了人类脑细胞的发现,哈哈。

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/213459

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX