这是一个jQuery和Ajax的很基础的应用,是我出去面试时的一个面试题。当时脑子有点懵想了好久才知道该怎么去实现,现在回来再看了下书好好总结一下这个东西。
首先新建一个html文件,只有简单的几行代码,创建一个很基本的包含用户名和密码 以及注册按钮的文本框。代码如下 只简单说明问题 多余的暂时不加。
<form> 用户名:<input type="text" cols="20" name="Name" id="Name"> <span id="tishi"></span><br/> 密码:<input type="pswd" name="pswd"><br/> <input type="submit" value="注册"> </form>
用户名<input>后面的span 是用来添加提示信息的 如果该用户名没有被注册 正常 显示 如果不能显示 获取到id 向其插入警告字体
要用jQuery加Ajax最重要的是什么,没错就是引入jQuery库。。接下来就是得引入jQuery库,简直说的太有道理哈哈哈
接下来就是jQuery代码
<script type="text/javascript"> $(document).ready(function(){ check(); }); function check(){ $('#Name').blur(function(){ var a=$(this).val(); var changUrl="yanzheng.php?action=check&name=a"; $get(changUrl,function(str){ if(str=='1'){ $('#tishi').html("您输入的用户名已存在,请重新输入"); } }); }); } </script>
给文本框设置了Id之后 当用户失去焦点 就去调用check()函数 进行验证
获取到文本框当前的值,将其通过$get()方法提交给一个验证的php代码,通过php对后台数据进行验证处理,若在数据库查询到该用户名,则返回1,否则返回0。html页面拿到该值进行判断处理若$get到的值是1,则在<span>元素里插入提示您“您的用户名已存在,请重新输入”。如果返回值是0,则说明该用户名可以注册。继续进行。php代码我也就不贴了。
很基础的东西,往往有时意想不到的犯错,前几天去面试试了把水,自己总结了好多经验,很有收获,还是得去学习,很多基础东西你不去运用过一段时间就忘记了,自己很有感受。多看书,多敲代码,多思考。加油,我爱前端。I am a web developer,I love web front-end.