zoukankan      html  css  js  c++  java
  • 【Golang】练习-Web 处理 form 表单请求失败不刷新页面并保存输入的数据

    主函数main.go

    package main
    
    import (
    	"fmt"
    	"html/template"
    	"net/http"
    	"strings"
    )
    
    var UsersDb = make(map[string]*Users)
    
    type Users struct {
    	ID   int
    	Name string
    	Sex  bool
    	Addr string
    }
    
    func NewUser(id int, name string, sex bool, addr string) *Users {
    	return &Users{id, name, sex, addr}
    }
    
    //叠加用户 ID
    func GetId() int {
    	id := 0
    	for _, user := range UsersDb {
    		if user.ID > id {
    			id = user.ID
    		}
    	}
    	return id + 1
    }
    
    //这两个判断用户名是否重复,如果重复返回 true,不重复返回 false
    func filter(user *Users, q string) bool {
    	return strings.Contains(user.Name, q)
    }
    func QueryName(q string) bool {
    	for _, user := range UsersDb {
    		if filter(user, q) {
    			return true
    		}
    	}
    	return false
    }
    
    //添加用户进数据库
    func ModelsAddUser(name string, sex bool, addr string) bool {
    	if !QueryName(name) { //用户不重复执行添加用户数据
    		id := GetId()
    		user := NewUser(id, name, sex, addr)
    		UsersDb[name] = user
    		fmt.Printf("用户【%v】添+成功!!!
    ", name)
    		return true
    	} else { //用户重复则退出
    		fmt.Printf("用户【%v】添+失败!!!
    ", name)
    		return false
    	}
    }
    
    //查看用户,主页,不过我一开始每天夹用户数据,所以看到的用户数据为空
    func GetUsers(w http.ResponseWriter, r *http.Request) {
    	tpl := template.Must(template.ParseFiles("template/user.html"))
    	users := make([]*Users, 0, 10)
    	for _, user := range UsersDb {
    		users = append(users, user)
    	}
    	tpl.ExecuteTemplate(w, "user.html", users)
    }
    
    //增加新用户
    func AddUser(w http.ResponseWriter, r *http.Request) {
    	if r.Method == "GET" {
    		tpl := template.Must(template.ParseFiles("template/create.html"))
    		tpl.ExecuteTemplate(w, "create.html", nil)
    	} else {
    		if ModelsAddUser(
    			r.FormValue("name"),
    			r.FormValue("sex") == "1",
    			r.FormValue("addr"),
    		) {
          //用户添加成功,返回数据到 create.html 的 ajax 进行判断处理
    			fmt.Fprintf(w, `{"result":"sucess"}`)
    
    		} else {
          //用户添加失败,返回数据到 create.html 的 ajax 进行判断处理
    			fmt.Fprintf(w, `{"result":"failed"}`)
    		}
    	}
    }
    
    func Register() {
    	http.HandleFunc("/", GetUsers)
    	http.HandleFunc("/create/", AddUser)
    }
    
    func main() {
    	addr := ":8888"
    	Register()
    	http.ListenAndServe(addr, nil)
    }
    

    html 模板

    user.html

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8" />
            <title>用户管理</title>
        </head>
        <body>
            <a href="/create/">新建</a>  
            <table>
                <thead>
                    <tr>
                        <th>用户</th>
                        <th>性别</th>
                        <th>地址</th>
                    </tr>
                </thead>      
                <tbody>
                    {{ range . }}
                        <tr>
                            <td>{{ .Name }}</td>
                            <td>{{ if .Sex }}男{{ else }}女{{ end }}</td>
                            <td>{{ .Addr }}</td>
                        </tr>
                    {{ end }}
                </tbody>
        </table>
        </body>
    </html>
    

    create.html

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8" />
            <title>新建</title>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
            <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
            <script type="text/javascript">
                function insert() {
                    $.ajax({
                        type: "POST",
                        url: "create/" ,
                        data: $('#form1').serialize(),
                        dataType:"json", 
                        success: function (respMsg) {        
                            if (respMsg.result == "sucess") {
                                //获取当前网址,如: http://127.0.0.1:8888/create/
                                var curWwwPath=window.document.location.href;
    
                                //获取主机地址之后的目录,如: create/
                                var pathName=window.document.location.pathname;
                                var pos=curWwwPath.indexOf(pathName);
    
                                //获取主机地址1,如: http://localhost:8888
                                var localhostPaht=curWwwPath.substring(0,pos);
                                //获取主机地址2,如: http://localhost:8888
                                var urlPath = "http://" + window.location.host
                                window.location.assign(urlPath);
                            } else {
                              //弹窗
                                alert("用户名重复!");
                            }
                            
                        },
                        error : function(respMsg) {
                            console.log(respMsg,"error")
                        }
                    });
                }
            </script>
        </head>
        <body>
            <form action="##" method="POST" id="form1" target="postFrame">
                <label>姓名</label><input name="name" value="" /><br/>
                <label>性别</label>
                    <input name="sex" type="radio" value=""  checked="checked"/> 男
                    <input name="sex" type="radio" value=""  /> 女<br/>
                <label>住址</label><textarea name="addr" value=""></textarea><br/>
                <input type="button" value="插入" onclick="insert()">
            </form>       
        </body>
    </html>
    

    执行命令:

    go run main.go
    

    网页演示:

  • 相关阅读:
    powershell和cmd区别
    装饰器笔记
    url参数和字典的相互转化
    Python装饰器详解
    python字符串格式化f-string
    Python函数(function)与方法(method)区别
    jenkins钉钉插件报错keywords not in content
    jenkins配置邮件
    vim常用操作
    Vue之axios请求
  • 原文地址:https://www.cnblogs.com/UncleZhao/p/14110076.html
Copyright © 2011-2022 走看看