博主信息
jackallen的博客
博文
30
粉丝
2
评论
3
访问量
9908
积分:1
P豆:255

ajax注册页实例get方式——2018年4月10日

2018年04月11日 17:29:05阅读数:298博客 / jackallen的博客/ php学习作业

一、ajax中get方式实现注册

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>注册</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<script type="text/javascript" src="js/jquery-3.2.1.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
</head>
<body>
    <div class="container">
        <div class="row">
            <h2 text-center text-info>免费注册</h2>
            <form>
             <div class="form-group">
                <label for="exampleInputtext">用户名:</label>
                <input type="text" class="form-control" name="name" id="exampleInputtext" placeholder="用户名或手机号">
              </div>
              <div class="form-group">
                <label for="exampleInputPassword1">密码</label>
                <input type="password" class="form-control" id="exampleInputPassword1" placeholder="密码">
              </div>
               <div class="form-group">
                <label for="exampleInputEmail1">邮箱</label>
                <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
              </div>

              <div class="checkbox">
                <label>
                  <input type="checkbox"> 我已阅读并接受条款
                </label>
              </div>
              <button type="submit" class="btn btn-default">同意服务并注册</button>
            </form>
        </div>
    </div>
</body>
</html>
<script type="text/javascript">
     $(':input').blur(function(){

        $.ajax({
            url:'api/demo.php',
            type: 'GET',
            dataType:'json',
            data:$('form:first').serializeArray(),
            success:function(msg,status,xhr){
                console.log(msg)
                $('.form-group span').empty()
                $('.form-group').append($(msg.tips))
            }
        })
     })
</script>

运行实例 »

点击 "运行实例" 按钮查看在线实例

实例图片:A4}RCA3PK2@UXB`LG)92LZ0.png

手写代码:02]2]`R1I}81Y6ZXOGAPW]T.png

批改状态:合格

老师批语:

版权申明:本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!

全部评论

文明上网理性发言,请遵守新闻评论服务协议

条评论