话不多说上代码
注册的js代码:
<html>
<head>
<meta charset="UTF-8">
<title>欢迎你,请先登陆!</title>
<script type="text/javascript" src="../static/js/register.js"></script>
<script type="text/javascript" src="../static/js/jquery-1.4.4.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="../static/css/lx.css">
</head>
<body>
<form method="POST" action="/register" onsubmit="return fnRegister()">
<div class="box" id="container" style="width: 400px" >
<div id="header" style="background-color: aquamarine">
<h2 >注册</h2>
</div>
<div id="content">
<p >账号:
<input id="username" type="text" name="username" placeholder="请输入10位学号">
</p>
<p >密码:
<input id="password" type="password" name="password" placeholder="请输入密码">
</p>
<p >重复密码:
<input id="rpassword" type="password" name="rpassword" placeholder="请输入密码">
</p>
<p >姓名:
<input id="name" type="text" name="name" placeholder="姓名">
</p>
<p >年龄:
<input id="age" type="number" name="age" placeholder="年龄">
</p>
<button type="submit" class="btn btn-info">注册</button>
</div>
</div>
</form>
</body>
<script type="text/javascript">
$("#username").blur(function(){//blur表示失去焦点时触发
//取用户名
var uid = $("#username").val()
//调ajax
$.ajax({
url:"/registerajax",//处理数据的页面
data:{username:uid},
// contentType: "application/json; charset=utf-8",
type:"POST",
dataType:"json",
success: function(data){
var re = JSON.parse(data)
if (re.data == "false")
{
alert("此用户名已被注册!")
}
}
});
})
</script>
</html>
登录的js代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>欢迎你,请先登陆!</title>
<script type="text/javascript" src="../static/js/lx.js"></script>
<script type="text/javascript" src="../static/js/jquery-1.4.4.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="../static/css/lx.css">
</head>
<body>
<div class="box">
<h2>登陆</h2>
<div class="input_box">
<input id="uname" type="text" name="user" placeholder="请输入用户名">
</div>
<div class="input_box">
<input id="upass" type="password" name="psw" placeholder="请输入密码">
</div>
<div id="error_box"><br></div>
<div class="input_box">
<button id="btn" type="button" class="btn btn-primary" >登陆</button>
<a href="../register"><input type="button" class="btn btn-info" name="regist" value="注册"></a>
</div>
</div>
</body>
<script type="text/javascript">
$("#btn").click(function(){
var uid = $("#uname").val()
var upsw = $("#upass").val()
//调ajax
$.ajax({
url:"/loginajax",
data:{uname:uid,upass:upsw},
// contentType: "application/json; charset=utf-8",
type:"POST",
dataType:"json",
success: function(data){
var re = JSON.parse(data)
if(re.data == "null"){
alert("此账号不存在!")
}
if(re.data == "false"){
alert("账号与密码不匹配!")
}
if(re.data == "true"){
alert("登录成功")
//window.location.href="/home"
}
}
});
})
</script>
</html>
下面是go代码:
package controllers
import (
"fmt"
"go_dev/MS/go/models"
_ "github.com/go-sql-driver/mysql"
"github.com/astaxie/beego/logs"
"github.com/astaxie/beego"
)
type RegisterAjaxController struct {
beego.Controller
}
type LoginAjaxController struct {
beego.Controller
}
//处理注册验证的部分
func (this *RegisterAjaxController) Post() {
this.TplName = "model_layout/regist.html"
logs.Warn("registerajax ------post")
un := this.GetString("username")//这里的username对应ajax里data:{username:uid}
stu, _ := models.GetInfoById(un)
fmt.Println(stu)
var request string
if stu != nil {
request = "{\"data\":\"false\"}"
} else {
request = "{\"data\":\"true\"}"
}
this.Data["json"] = &request
this.ServeJSON()
}
//处理登录验证的部分
func (this *LoginAjaxController) Post() {
this.TplName = "model_layout/regist.html"
logs.Warn("loginajax ------post")
un := this.GetString("uname")
psw := this.GetString("upass")
stu, _ := models.GetInfoById(un)//用的sqlx做的查询
fmt.Println(stu)
var request string
if stu == nil {
request = "{\"data\":\"null\"}"
}
if stu != nil && stu[0].PassWord != psw {
request = "{\"data\":\"false\"}"
}
if stu != nil && stu[0].PassWord == psw {
request = "{\"data\":\"true\"}"
}
this.Data["json"] = &request
this.ServeJSON()
}
本人也是初学,希望大家能相互学习