前端和后台具体是怎么连接起来的？

夕宇 2014-09-24 04:56:44

本人是初学者。问题是这样的：
用html写了一个表单，用js验证了；然后在80端口监听了，用的是go语言！但是打开的时候，前端验证竟然消失了，不起作用！

想知道应该怎样把前后端连接起来？
我理解的验证是这样的，页面端的js验证，然后是服务器端验证！服务器端验证该怎么写?查了资料说可以用ajax，还有什么数据库之类的，但是具体的因为还没接触，所以暂时还不会用。
求大神指点下，哪位好心人给个稍微具体点的例子也好！
（我是转行的，之前只大概知道C语言的语法,然后就开始学习go语言，老板让走web后台（php，Java都没接触过，web开发原理正准备学习）；只看了一点前端的html、css和js，想知道用go语言写web后台至少得会哪些知识，多谢！第一次发帖，好像格式还不对，求指点啊）

前端代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单提交</title>
<script src=".../jquery.js"></script>
<script >
$(function(){
//如果是必填的，则加红星标识.
$("form :input.required").each(function(){
var $required = $("<strong class='high'> *</strong>"); //创建元素
$(this).parent().append($required); //然后将它追加到文档中
});
//文本框失去焦点后
$('form :input').blur(function(){
var $parent = $(this).parent();
$parent.find(".formtips").remove();

//验证用户名
if( $(this).is('#username') ){
if( this.value=="" || this.value.length < 6 ){
var errorMsg = '请输入至少6位的用户名.';
$parent.append('<span class="formtips onError">'+errorMsg+'</span>');
}else{
var okMsg = '输入正确.';
$parent.append('<span class="formtips onSuccess">'+okMsg+'</span>');
}
}

//验证密码
if( $(this).is('#password') ){
if( this.value=="" || this.value.length < 6 ){
var errorMsg = '请输入至少6位密码.';
$parent.append('<span class="formtips onError">'+errorMsg+'</span>');
}else{
var okMsg = '输入正确.';
$parent.append('<span class="formtips onSuccess">'+okMsg+'</span>');
}
}

//验证邮件
if( $(this).is('#email') ){
if( this.value=="" || ( this.value!="" && !/.+@.+\.[a-zA-Z]{2,4}$/.test(this.value) ) ){
var errorMsg = '请输入正确的E-Mail地址.';
$parent.append('<span class="formtips onError">'+errorMsg+'</span>');
}else{
var okMsg = '输入正确.';
$parent.append('<span class="formtips onSuccess">'+okMsg+'</span>');
}
}
}).keyup(function(){
$(this).triggerHandler("blur");
}).focus(function(){
$(this).triggerHandler("blur");
});//end blur

//提交，最终验证。
$('#send').click(function(){
$("form :input.required").trigger('blur');
var numError = $('form .onError').length;
if(numError){
return false;
}
alert("注册成功,密码已发到你的邮箱,请查收.");
});

//重置
$('#res').click(function(){
$(".formtips").remove();
});
})

</script>

<style type="text/css">
body { font:12px/19px Arial, Helvetica, sans-serif; color:#666;}
form div { margin:5px 0;}

.int label { float:left; width:100px; text-align:right;}
.int input { padding:1px 1px; border:1px solid #ccc;height:16px;}

.sub { padding-left:100px;}
.sub input { margin-right:10px; }

.formtips{width: 200px;margin:2px;padding:2px;}
.onError{
background:#FFE0E9 url(../img/reg3.gif) no-repeat 0 center;
padding-left:25px;
}
.onSuccess{
background:#E9FBEB url(../img/reg4.gif) no-repeat 0 center;
padding-left:25px;
}
.high{
color:red;
}
</style>


<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/main.js" type="text/javascript"></script>
</head>

<body>
<form action="/login" method="post">

<div class="int">
<label for="username">用户名:</label>
<input type="text" class="required" name="username" id="username"/>
</div>
<div class="int">
<label for="password">密码:</label>
<input type="text" class="required" name="password" id="password">
</div>

<div class="int">
<label for="gender">性别:</label>
<input type="radio" class="" name="gender" value="男">男
<input type="radio" class="" name="gender" value="女">女

</div>

<div class="int">
<label for="interest">爱好</label>
<input type="checkbox" name="interest" value="football">足球
<input type="checkbox" name="interest" value="basketball">篮球
<input type="checkbox" name="interest" value="tennis">网球
</div>

<div class="int">
<label for="email">邮箱:</label>
<input type="text" class="required" id="email" />
</div>

<div class="int">
<label for="ID">身份证号:</label>
<input type="text" class="" id="ID" />
</div>

<div class="int">
<label for="personinfo">个人资料:</label>
<input type="text" id="personinfo" />
</div>

<div class="sub">
<input type="submit" value="提交" id="send"/>
<input type="reset" value="重置" id="res"/>
</div>

</form>
</body>
</html>

web-go代码：
package main

import (
"fmt"
"html/template"
"log"
"net/http"
"strings"
)

func receive(w http.ResponseWriter, r *http.Request) {
r.ParseForm() //解析url传递的参数，对于POST则解析响应包的主体（request body）
//注意:如果没有调用ParseForm方法，下面无法获取表单的数据
fmt.Println(r.Form) //这些信息是输出到服务器端的打印信息
fmt.Println("path", )
fmt.Println("scheme", r.URL.Scheme)
fmt.Println(r.Form["url_long"])
for k, v := range r.Form {
fmt.Println("key:", k)
fmt.Println("val:", strings.Join(v, ""))
}
fmt.Fprintf(w, "Hi,I love go语言!") //这个写入到w的是输出到客户端的
}

func login(w http.ResponseWriter, r *http.Request) {

fmt.Println("method:", r.Method) //获取请求的方法
if r.Method == "GET" {
t, _ := template.ParseFiles("index.html")
t.Execute(w, nil)
fmt.Println("t.Execute",t.Execute)
} else {
//请求的是登陆数据，那么执行登陆的逻辑判断
r.ParseForm()
fmt.Println("username:", r.Form["username"])
fmt.Println("password:", r.Form["password"])
fmt.Println("gender:", r.Form["gender"])
fmt.Println("interest:", r.Form["interest"])
fmt.Println("e-mail:", r.Form["e-mail"])
fmt.Println("ID:", r.Form["ID"])
}

func main() {
http.HandleFunc("/", receive) //设置访问的路由
http.HandleFunc("/login", login) //设置访问的路由
err := http.ListenAndServe(":9090", nil) //设置监听的端口
if err != nil {
log.Fatal("ListenAndServe: ", err)
}
}

...全文