jQuery+Ajax+PHP 制作简单的异步数据传输(测试用户名是否可用)
2023-09-27 14:21:26 时间
实现基本异步数据传输,略去与数据库交换,先直接在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" 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
- jquery遍历数组与筛选数组的方法
- 2014年辛星jquery解读第三节 Ajax
- 猴子也能学会的jQuery第十期——jQuery元素操作(上)
- jQuery+AJXA+PHP动态获取数据实现新闻网页下拉加载功能(1+X Web前端开发中级 例题)
- JQuery入门(7)动画效果
- JQuery入门(3)
- jQuery异步获取json数据的2种方式
- PHP+jQuery 长文章分页类 ( 支持 url / ajax 分页方式 )
- Jquery 事件冒泡、元素的默认行为的阻止、获取事件类型、触发事件
- 《jQuery Mobile入门经典》—— 2.3 使用JavaScript完成功能
- 《jQuery与JavaScript入门经典》——2.6 小结
- Jquery的一些常见用法
- jquery 选择器,模糊匹配
- Jquery_JQuery之DataTables强大的表格解决方案
- PHP批量删除jQuery操作,Ajax异步请求案例
- PHP下jQuery的学习
- jQuery(练习)
- jQuery常用及基础知识总结(一)
- 使用jquery操作元素的css样式(获取、修改等等)
- jQuery的删除的三种方法remove(),detach(),empty()