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

来源：互联网发布：苍神录java下载编辑：程序博客网时间：2024/06/05 02:35

实现基本异步数据传输，略去与数据库交换，先直接在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";elseoSpan.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" onblur="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>

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

0 0