ajax传递数据显示在前端指定位置

前端之家收集整理的这篇文章主要介绍了ajax传递数据显示在前端指定位置前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

reg.html

<!DOCTYPEHTML>
<html>
	<head>
		<title>ajax</title>
		<Metacharset="utf-8"/>
		<scripttype="text/javascript">
			varhttpAjax=newXMLHttpRequest();
			functioncheckUser(uname){
				if(uname==""){
					returnfalse;
				}
				httpAjax.onreadystatechange=function(){
					if(httpAjax.readyState==4&&httpAjax.status==200){
						varres=httpAjax.responseText;
						res=eval("("+res+")");
						varsp=document.getElementById("sp");
						if(res.status==1){
							sp.innerHTML="<fontcolor='red'>"+res.info+"</font>";
							var_html="";
							for(variinres['data']){
									_html+="<p>"+res['data'][i]+"</p>"
							}
							varmyobject=document.getElementById('mydiv');
							myobject.innerHTML=_html;
						}else{
							sp.innerHTML="<fontcolor='green'>"+res.info+"</font>";
						}
					}
				}
				httpAjax.open("post","user.PHP",true);
				httpAjax.setRequestHeader("content-TYPE","application/x-www-form-urlencoded");
				vardata="uname="+uname;//user.PHP?uname="1"&pwd="123","uname="是参数,+是连接参数连接变量的用的,uname是js中的一个不带$的变量,也就是值
				httpAjax.send(data);
			}

		</script>
	</head>
	<body>
		<inputtype="text"id="username"class="username"name="username"onchange="checkUser(this.value)"/><spanid="sp"></span>
		<divid="mydiv"style="width:200px;height:200px;border:1pxredsolid">
			
		</div>
	</body>
</html>


user.PHP

<?PHP
	header("content-type:text/html;charset=utf-8");
	$pdo=newPDO("MysqL:host=localhost;dbname=tk106","root","");
	$pdo->exec("setnamesutf8");
	$uname=$_REQUEST["uname"];//post传值,这里要改为REQUEST
	$sql="select*fromstu_infowheresname='".$uname."'";
	$data=$pdo->query($sql)->fetch(PDO::FETCH_ASSOC);
	if($data){
		$list['status']=1;
		$list['info']="已经注册";
		$list['data']=$data;
		echojson_encode($list);
	}else{
		$list['status']=0;
		$list['info']="未注册";
		$list['data']=="";
		echojson_encode($list);
	}
?>
原文链接:https://www.f2er.com/ajax/162703.html

猜你在找的Ajax相关文章