webIx之表单提交

本文主要介绍了如何创建一个表单,以及如何提交数据,这里当然指的是传统方式的提交数据,webix的请求是post

请求,做出来的效果如下,代码在下面



<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>




<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
   <title>表单</title>
<!-- Webix CSS file-->
<link rel="stylesheet" href="codebase/webix.css" type="text/css">
<!-- Webix JS file-->
<script src="codebase/webix.js" type="text/javascript"></script>


  </head>
  
  <body>
    <div id="南航"></div>
    <script type="text/javascript">
   /*  我理解的webix实际上就是一个控制样式的东西,比如下面的表单就是以上面的div作为容器,所以它必须依附于div,所以要
    写在script里面 */
    webix.ui({
    // webix 类似一个javascript里面的函数,在里面声明的变量,出了这个范围,就会失去作用,也就是undefined
     container:"南航", //本人名叫南航,这是上面div的id,相当用上面的div作为一个容器
    view:"form" , //view指明了该div是什么东西,这里是form表单的意思
    id:"form1",
    width:350,
    elements:[{view:"text",label:"用户名"},//elments表示表单里具体的内容,每一个json就是一行
    {view:"text",type:"password",label:"密码",name:"password"},//password是特殊的本文,所有有type这个属性
    {cols:[                              //表单第三行出现了两列,所以要用cols属性来表示,里面是一个数组
    {view:"text",label:"验证码"},
    {view:"button",id:"vc",name:"vc",type:"imageTop",image:"code",
    click:vc,width:80} //因为验证码类似于图片按钮,所以类型为imageTop或者为image
          ]},
    {cols:[{view:"label",type:"&nbsp;",width:100}, //label是可以写HTML的,所以这里表示空格
    {view:"button",id:"btn_login",value:"登录",type:"form",align:"left",width:100,
    click:send}
    ]}
          
     ]    //数据是通过一个名叫send的函数进行发送,函数要写在webix外面的地方
   
    })
    function vc(){
  $$("vc").define("image",'code?rand'+Math.random());//webix通过$$("id")来取得元素
  $$("vc").refresh();
   }
   function send(){
  webix.send("login",$$("form1").getValues());  //login为请求的地址,后面为form所有元素的值
  //这样就完成了一个表单的数据的发送
   }
    

    </script>
  </body>
</html>


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值