0 ); echo json_encode( $msg ); exit ();} // 记录存储用户的文件路径 $fil
ajax实例，检测用户与注册
检测用户名是否被占用：
在用户填写完用户名之后，ajax会异步向处事器发送请求，判断用户名是否存在
首先写好静态页面：
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>index</title> <style> *{ margin:0; padding:0; } body{ background-color: #333; } a{ text-decoration: none; } .box{ width:300px; height:270px; margin:80px auto; background-color: #abcdef; border-radius: 5px; padding:15px 30px; } .box .title{ height:15px; margin-bottom:20px; } .box .title span{ font-size:16px; color:#333; margin-right:15px; } .box .title span.current{ color:red; } .box div{ width:280px; height:30px; margin-bottom:25px; padding:8px 10px; background-color: #fff; border-radius: 5px; color:#666; position: relative; } .box div span{ display: inline-block; padding-top:4px; padding-right:6px; } .box div input{ border:none; outline:none; font-size:16px; color:#666; margin-top:5px; } .box div i{ width:16px; height:16px; position: absolute; top:14px; right:12px; } .box div i.ok{ background:url(icon.png) no-repeat 0 -67px; } .box div i.no{ background:url(icon.png) no-repeat -17px -67px; } .box div .info{ color:red; margin-top:16px; padding-left:2px; } .button{ margin-top:7px; } .button a{ display: block; text-align: center; height:45px; line-height:45px; background-color: #f20d0d; border-radius:20px; color:#fff; font-size:16px; } </style> </head> <body> <div class="box"> <p class="title"> <span>登 录</span> <span class="current">注 册</span> </p> <div> <span>+86</span> <input type="text" name="user" id="user" placeholder="请输入注册手机号" autocomplete="off"> <i class="ok"></i> <p class="info">该手机号已注册</p> </div> <div> <input type="password" name="pwd" id="pwd" placeholder="请设置暗码" autocomplete="off"> <i class="no"></i> <p class="info"></p> </div> <p class="button"> <a href="javascript:void(0)" id="btn" class="btn">注册</a> </p> </div> <script src="ajax.js"></script> </body> </html>
效果图
然后是模仿jquery的$.ajax()，使用js封装了一个ajax要领（只是为了熟悉运行道理，实际项目可以直接用jquery封装好的）
ajax.js
温馨提示: 本文由Jm博客推荐，转载请保留链接: https://www.jmwww.net/file/web/29928.html
![[转]Node.js中package.json中^和~的区别](/uploads/allimg/200519/054J34453_lit.png "[转]Node.js中package.json中^和~的区别")