golang Beego框架之HTML表单中的select标签组件的处理 推荐
2014-02-10 22:19
1266 查看
用Beego来进行web开发,对每个页面都可创建一个YourController类型,并匿名包含beego.Controller来达到继承beego.Controller的效果。以YourController为receiver重写beego.Controller的Get,Post等方法。当网页请求为Get/Post,则执行该页面YourController的Get()/Post()方法。
在对应页面的Controller的Get()方法中,往数据Data写入category的实例切片cates:
对应的HTML模板中:
在上图中,点击“提交”按钮,客户端向服务器发送Post请求,让我们看下该页面的Post表单:
我们看到,form表单中,select组件设置id,name为“category”,当用户点击了“提交”,向服务器发送Post请求提交该表单,Beego中该页面Controller的Post()方法可通过this.input().Get("category")来过得select中category的value值,这些值就是被选中option的value值:
选择golang,点击“提交”,后台输出:
注意,select默认值是最上面的请选择,故再击提交按钮时要通过html页面内javascript函数 check();"来判断select是否做出正确选择,check()为一个hmtl嵌套的js脚本函数:
在对应页面的Controller的Get()方法中,往数据Data写入category的实例切片cates:
func(this *YourController)Get() { this.TplNames = "yourPage.html" cates := []*category{ &category{"-1", true, "请选择"}, &category{"golang", false, "golang"}, &category{"Java", false, "Java"}, &category{"C/C++", false, "C/C++"}, } this.Data["Cates"] = cates } type category struct { Id string IsSelected bool Value string }
对应的HTML模板中:
<select class="form-control input-sm" name="category" id="category" style="width: 120px;"> `range `.`Cates` <option value=``.`Id` `if `.`IsSelected` select="selected"`end`>``.`Value`</option> `end` </select>HTML中用`range `.`Cates`来遍历golang传来的Data(此处.Cates传来的是Get方法中的Data["Cates"]),而``.`Id`,``.`IsSelected`,``.`Valuse`分别为golang中的类型category的三个字段。当Method为Get,页面渲染如下截图:
在上图中,点击“提交”按钮,客户端向服务器发送Post请求,让我们看下该页面的Post表单:
我们看到,form表单中,select组件设置id,name为“category”,当用户点击了“提交”,向服务器发送Post请求提交该表单,Beego中该页面Controller的Post()方法可通过this.input().Get("category")来过得select中category的value值,这些值就是被选中option的value值:
func (this *YourController) Post() { this.TplNames = "yourPage.html" this.Ctx.Request.ParseForm() category := this.Input().Get("category") fmt.Println("caterogy value:", category) this.Redirect("/category", 301) return }
选择golang,点击“提交”,后台输出:
注意,select默认值是最上面的请选择,故再击提交按钮时要通过html页面内javascript函数 check();"来判断select是否做出正确选择,check()为一个hmtl嵌套的js脚本函数:
function check() { if ('-1' == $('#category').val()) {//select的value值为-1 alert("请选择文章创作类型"); $('#category').focus(); return false; } return true; }
相关文章推荐
- HTML 标签复习 2、表单和服务器连接 3、框架笔记
- day13 Java 日期处理 HTML 基本标签 表格标签 表单标签
- HTML学习3——表单标签,select标签,textarea标签,datalist标签,video标签
- HTML学习3——表单标签,select标签,textarea标签,datalist标签,video标签
- 第二天(就业班) html的引入、html常用标签、实体标签、超链接标签、图片标签、表格、框架标签、表单[申明:来源于网络]
- HTML标签天天练7--表单2<form>[select][option][checkbox]
- HTML--文本标签/marquee/bgsound/列表标签/超链接标签/img 图像标签/转义字符/表格标签/表单提交/框架标签
- 第二天(就业班) html的引入、html常用标签、实体标签、超链接标签、图片标签、表格、框架标签、表单
- HTML2 body中的属性、列表、表格、表单、Div和Span、框架标签
- ie6.0中关于动态改变html中select标签中option的处理方法
- 收藏一篇很有趣的yii2框架html使用表单小组件的帖子
- 【HTML】表单中<input>标签、组件格式化、表单提交方式、浏览器服务端交互方式
- 29-HTML-13-HTML(表单组件-select&textarea)
- HTML2--表格,框架,表单,多媒体,标签动态
- HTML高级(表单标签)
- 10.6. HTML fieldset 标签 -- 表单分组(转http://www.dreamdu.com/xhtml/tag_fieldset)
- 推荐两款国人开发的html前段框架
- [开源框架推荐]pdf2htmlEX: 高保真PDF至HTML转换
- HTML表单标签复习
- html中常用的标签-表单标签