博客列表 >ajax注册页实例get方式——2018年4月10日

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

jackallen的博客
jackallen的博客原创
2018年04月11日 17:29:05558浏览

一、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

上一条:0410,$.ajax()用法下一条:4月11日作业
声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议