jQuery+Ajax+PHP 制作简单的异步数据传输(测试用户名是否可用)
2014-11-02 14:36
751 查看
实现基本异步数据传输,略去与数据库交换,先直接在PHP端判断:用户名为 user1 即为不可用,
测试时外加了 普遍的 “Loading..." 功能,此功能可直接在PHP中循环延时 for($i=0;$i<10000000;$i++) 即可
最终效果如下:
代码如下,供日后回味参考...
PHP 部分 : 其中 user 为传送过来的元素
jQuery 部分:
CSS 样式设置部分:
学了数据库再慢慢从中搜索...
测试时外加了 普遍的 “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" 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>
学了数据库再慢慢从中搜索...
相关文章推荐
- jQuery+Ajax+PHP 制作简单的异步数据传输(测试用户名是否可用)
- jquery异步ajax超大长度base64图片长字段数据传输问题解决办法和php后台处理办法
- jquery与php交互的ajax应用第一课:检测用户注册时用户名是否存在
- php基于jquery的ajax技术传递json数据简单实例
- php+jQuery+Ajax简单实现页面异步刷新
- 简单使用Ajax实现异步查询用户名是否被占用
- jquery与php交互的ajax应用第一课:检测用户注册时用户名是否存在
- 基于jQuery实现Ajax验证用户名是否可用实例
- AJAX异步刷新-----判断用户名是否可用,预览头像
- PHP文件数据传输用jQuery-ajax进行浏览器->服务器->数据文件->服务器->浏览器的数据传输($_POST,$_GET,json_encode(数组数据回应),json数据解析)
- 用于验证用户名是否可用的php ajax实现代码
- Ajax技术验证用户名是否可用,简单实现
- PHP语言 -- Ajax 注册用户名是否可用
- jquery与php交互的ajax应用第一课:检测用户注册时用户名是否存在
- AJAX简单示例——实现检测用户名是否可用
- jQuery+Ajax+PHP实现异步分页数据显示
- php基于jquery的ajax技术传递json数据简单实例
- 力所能及之springmvc+ajax+jquery+json实现登录异步校验用户名是否存在
- jQuery的ajax()检验用户名;通过jQuery的load()/get()/post()方法实现;使用XMLHTTPRequest对象来进行AJAX的异步数据交互
- php+jQuery+Ajax简单实现页面异步刷新