jQuery+Ajax+PHP 制作简单的异步数据传输（测试用户名是否可用）

最新推荐文章于 2018-05-19 12:04:08 发布

imwtr

最新推荐文章于 2018-05-19 12:04:08 发布

阅读量748

点赞数

分类专栏： Web 文章标签： CSS Web jQuery Ajax 异步

本文链接：https://blog.csdn.net/imwtr/article/details/38859201

版权

Web 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

实现基本异步数据传输，略去与数据库交换，先直接在PHP端判断：用户名为 user1 即为不可用，

测试时外加了普遍的 “Loading..." 功能，此功能可直接在PHP中循环延时 for($i=0;$i<10000000;$i++) 即可

最终效果如下：

代码如下，供日后回味参考...

PHP 部分：其中 user 为传送过来的元素

for($i=0;$i<10000000;$i++);
$user = $_GET['user'];
$str = "";
if($user == "user1")
   $str .="User name already exists !";
else 
	$str .="User name is ok ~";

//echo json_encode($str) ;
echo ($str) ;

jQuery 部分：

<script language="javascript" src="jquery.min.js"  src="ajaxlib.js"src="ajaxgold.js"></script>
<script language="javascript" type="text/javascript">
$(function(){
	 $("#check").ajaxSend(function(){
	     $(this).html("<font style='background:#990000; color:#ffffff;'> Loading...</font>");
	 });
});
function startCheck(oInput){
	if(!oInput.value){
		oInput.focus();
		$("#check").html("User name can not be empty !");
		return;
	}
/*	$.ajax({
		url: 'config.php',
		type: 'GET',
		dataType: 'json',
	    data: oInput.value,
        success: showResult
	     });
    */
	$.get("config.php",
			{user: oInput.value },
           function(data){
           showResult(data);
        	}
			);
}
function showResult(oText){
var oSpan = document.getElementById("check");
oSpan.innerHTML = oText;
if(oText.indexOf("exists")>=0)
	oSpan.style.color = "red";
else
	oSpan.style.color = "green";
}


</script>

CSS 样式设置部分：

<style type="text/css">
body{
	padding-left:200px;
}
</style>
</head>
<body>
<form name="form1"><table>
<tr>
<td>用户名：</td>
<td  colspan="2"><input type="text" name="User" οnblur="startCheck(this)"/></td>
<td><span id="check"></span></td>
</tr>
<tr>
<td>输入密码：</td>
<td colspan="2"><input type="password" name="passw1"/></td><td></td>
</tr>
<tr>
<td>重复密码：</td>
<td colspan="2"><input type="password" name="passw2"/></td><td></td>
</tr>
<tr>
<td></td><td><input type="submit"value="注册"/></td>
<td><input type="reset" value="重置"/></td><td></td>
</tr>
</table></form>
</body>

学了数据库再慢慢从中搜索...