dojo1.1.0学习总结--注册案例

发布时间：2020-12-16 21:52:37 所属栏目：百科来源：网络整理

导读：页面部分： %@ page language="java" pageEncoding="UTF-8"% !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" html head title注册案例/title style type="text/css" @import "js/dojo-release-1.1.0/dojo/resources/dojo.css"; @import "js/

页面部分： <%@ page language="java" pageEncoding="UTF-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>注册案例</title> <style type="text/css"> @import "js/dojo-release-1.1.0/dojo/resources/dojo.css"; @import "js/dojo-release-1.1.0/dijit/themes/tundra/tundra.css"; .dijitInputFieldFocused { border: solid 2px #FFDF00; } </style> <script type="text/javascript" djConfig="parSEOnLoad: true" src="js/dojo-release-1.1.0/dojo/dojo.js"></script> <script type="text/javascript"> dojo.require("dijit.form.Button"); dojo.require("dijit.form.TextBox"); //日历 dojo.require("dijit.form.DateTextBox"); //单选按钮和多选按钮 dojo.require("dijit.form.CheckBox"); //下拉列表 dojo.require("dijit.form.FilteringSelect"); //数字选项 dojo.require("dijit.form.NumberSpinner"); //验证 dojo.require("dijit.form.ValidationTextBox"); dojo.require("dojox.validate.regexp"); //解析器 dojo.require("dojo.parser"); </script> </head> <body class="tundra"> <form id="registForm" method="post"> <table> <tr> <td> <label for="username"> 用户名 </label> </td> <td> <input dojoType="dijit.form.TextBox" type="text" id="username" name="username"/> </td> </tr> <tr> <td> <label for="password"> 密码 </label> </td> <td> <input dojoType="dijit.form.TextBox" type="password" id="password" name="password"/> </td> </tr>  <tr> <td> <label for="sex1"> 性别 </label> </td> <td> <input dojoType="dijit.form.RadioButton" type="radio" name="sex" id="sex1" value="男" checked="checked"/> <label for="sex1"> 男 </label> <input dojoType="dijit.form.RadioButton" type="radio" name="sex" id="sex2" value="女" /> <label for="sex2"> 女 </label> <input dojoType="dijit.form.RadioButton" type="radio" name="sex" id="sex3" value="保密" /> <label for="sex3"> 保密 </label> </td> </tr>  <tr> <td> <label for="age">年龄</label> </td> <td> <input dojoType="dijit.form.NumberSpinner" value="18" class="medium" constraints="{max:100,places:0}" name="age" id="age" required="true"> </td> </tr>  <tr> <td> <label for="birthday"> 出生日期 </label> </td> <td> <input id="birthday" value="1900-01-01" name="birthday" dojoType="dijit.form.DateTextBox" constraints="{min:'1900-01-01',max:'today',formatLength:'long'}" required="true" trim="true"> </td> </tr>  <tr> <td> <label for="interest1"> 兴趣 </label> </td> <td> <input type="checkbox" dojoType="dijit.form.CheckBox" name="interest" id="interest1" value="电脑"> <label for="interest1"> 上网 </label> <input type="checkbox" dojoType="dijit.form.CheckBox" name="interest" id="interest２" value="游泳"> <label for="interest２"> 游泳 </label> <input type="checkbox" dojoType="dijit.form.CheckBox" name="interest" id="interest３" value="网球"> <label for="interest３"> 网球 </label> <input type="checkbox" dojoType="dijit.form.CheckBox" name="interest" id="interest４" value="看书"> <label for="interest４"> 看书 </label> </td> </tr>  <tr> <td> <label for="nationality"> 国籍 </label> </td> <td> <select dojoType=dijit.form.FilteringSelect name="nationality" id="nationality" hasDownArrow="true"> <option value="chinese">chinese</option> <option value="USA">USA</option> <option value="English">English</option> </select> </td> </tr>  <tr> <td> <label>E-mail</label> </td> <td> <input id="email" type="text" name="email" class="long" value="youname@qq.com" dojoType="dijit.form.ValidationTextBox" regExpGen="dojox.regexp.emailAddress" trim="true" required="true" invalidMessage="E-mail地址是非法的。" /> </td> </tr> </table> </form> <button dojoType="dijit.form.Button"> 提交 <script type="dojo/method" event="onClick"> function registCallBack(data,params){ dojo.byId("showData").innerHTML = data; } function registError(data,params){ dojo.byId("showData").innerHTML = '服务器错误'; } dojo.xhrPost({ url:'./regist.do',load:registCallBack,error:registError,form:'registForm',encoding:'utf-8' }); </script> </button> <div id="showData"></div> </body> </html> 后台部分： package org.sp.struts.action; import java.io.IOException; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import org.apache.struts.action.Action; import org.apache.struts.action.ActionForm; import org.apache.struts.action.ActionForward; import org.apache.struts.action.ActionMapping; /** * 注册后台 * @author 无尽de华尔兹 * */ public class RegistAction extends Action { public ActionForward execute(ActionMapping mapping,ActionForm form,HttpServletRequest request,HttpServletResponse response) throws IOException { request.setCharacterEncoding("utf-8"); response.setCharacterEncoding("utf-8"); String username = request.getParameter("username"); String password = request.getParameter("password"); String sex = request.getParameter("sex"); Integer age = Integer.parseInt(request.getParameter("age").toString() .trim()); String birthday = request.getParameter("birthday"); String[] interest = request.getParameterValues("interest"); String nationality = request.getParameter("nationality"); String email = request.getParameter("email"); StringBuilder data = new StringBuilder(); data.append(username).append("<br/>").append(password).append("<br/>") .append(sex).append("<br/>").append(age).append("<br/>") .append(birthday).append("<br/>"); for (int i = 0; i < interest.length; i++) { data.append(interest[i]).append(" "); if (i==interest.length-1){ data.append("<br/>"); } } data.append(nationality).append("<br/>").append(email); response.getWriter().write(data.toString()); return null; } } 二. 注册案例 1.导入CSS样式 <style type="text/css"> @import "js/dojo-release-1.1.0/dojo/resources/dojo.css"$$ @import "js/dojo-release-1.1.0/dijit/themes/tundra/tundra.css" </style> 2.添加dojo.js库 <script type="text/javascript" djConfig="parSEOnLoad: true" src="js/dojo-release-1.1.0/dojo/dojo.js"></script> 3.导入组件 <script type="text/javascript"> //日历 dojo.require("dijit.form.DateTextBox"); //单选按钮和多选按钮 dojo.require("dijit.form.CheckBox"); //下拉列表 dojo.require("dijit.form.FilteringSelect"); //数字选项 dojo.require("dijit.form.NumberSpinner"); //验证 dojo.require("dijit.form.ValidationTextBox"); dojo.require("dojox.validate.regexp"); //解析器，使用表单时必须导入 dojo.require("dojo.parser"); </script> 4.用户名和密码 <tr> <td> <label for="username"> 用户名 </label> </td> <td> <input dojoType="dijit.form.TextBox" type="text" id="username" /> </td> </tr> <tr> <td> <label for="password"> 密码 </label> </td> <td> <input dojoType="dijit.form.TextBox" type="password" id="password"/> </td> </tr> 注：文本框用 dojoType="dijit.form.TextBox" 使用Ajax功能时，如果使用form:'formId'的方法时必须要有name属性，如果使用content：dojo.byId('').value则不必设置name属性５.单选按钮  <tr> <td> <label for="sex1"> 性别 </label> </td> <td> <input dojoType="dijit.form.RadioButton" type="radio" name="sex" id="sex1" value="男" checked="checked"/> <label for="sex1"> 男 </label> <input dojoType="dijit.form.RadioButton" type="radio" name="sex" id="sex2" value="女" /> <label for="sex2"> 女 </label> <input dojoType="dijit.form.RadioButton" type="radio" name="sex" id="sex3" value="2" /> <label for="sex3"> 保密 </label> </td> </tr> 注：必须导入组件　dojo.require("dijit.form.CheckBox"); <label for="sex1"></label>可以设置指定的元素获取焦点使用单选按钮时须指定类型　dojoType="dijit.form.RadioButton"　type="radio" 使用时name的值必须一样 6.数字输入  <tr> <td> <label for="age">年龄</label> </td> <td> <input dojoType="dijit.form.NumberSpinner" value="18" class="medium" constraints="{max:100,places:0}" name="age" id="age" required="true"> </td> </tr> 注：必须导入组件　dojo.require("dijit.form.NumberSpinner"); <label for="age"></label>可以设置指定的元素获取焦点 value="18" 指定初始值 class="medium"　方法类(用于验证) constraints="{max:100,places:0}"　约束最大值，小数位保留几位，０表示不用小数 required="true"　必须填写 invalidMessage="输出的验证信息"　可以通过该属性自定义验证的信息７.日历  <tr> <td> <label for="birthday"> 出生日期 </label> </td> <td> <input id="birthday" value="1900-01-01" name="birthday" dojoType="dijit.form.DateTextBox" constraints="{min:'1900-01-01',formatLength:'long'}" required="true" trim="true"/> </td> </tr> 注：必须导入组件　dojo.require("dijit.form.DateTextBox"); <label for="birthday"></label>可以设置指定的元素获取焦点 value="1900-01-01"指定初始值 constraints="{min:'1900-01-01',formatLength:'long'}" 约束日期范围 required="true"必须填写 trim="true"去掉左右空格 promptMessage="YYYY年MM月DD日" 提示消息，可以不用 invalidMessage="输出的验证信息"　可以通过该属性自定义验证的信息简化类型： <input dojoType="dijit.form.DateTextBox" type="text" id="q1" name="noDOMvalue" > ８.多项选择按钮  <tr> <td> <label for="interest1"> 兴趣 </label> </td> <td> <input type="checkbox" dojoType="dijit.form.CheckBox" name="interest" id="interest1" value="电脑"> <label for="interest1"> 上网 </label> <input type="checkbox" dojoType="dijit.form.CheckBox" name="interest" id="interest２" value="游泳"> <label for="interest２"> 游泳 </label> <input type="checkbox" dojoType="dijit.form.CheckBox" name="interest" id="interest３" value="网球"> <label for="interest３"> 网球 </label> <input type="checkbox" dojoType="dijit.form.CheckBox" name="interest" id="interest４" value="看书"> <label for="interest４"> 看书 </label> </td> </tr> 注：必须导入组件 dojo.require("dijit.form.CheckBox"); <label for="interest1"></label>可以设置指定的元素获取焦点类型为dojoType="dijit.form.CheckBox"　其他和HTML表单元素一样使用,name属性值要相同，后台使用String [] interest = request.getParameterValues("interest");获取９.下拉列表  <tr> <td> <label for="nationality"> 国籍 </label> </td> <td> <select dojoType=dijit.form.FilteringSelect name="nationality" id="nationality" hasDownArrow="true"> <option value="chinese">chinese</option> <option value="USA">USA</option> <option value="English">English</option> </select> </td> </tr> 注：必须导入组件 dojo.require("dijit.form.FilteringSelect"); hasDownArrow="true" 允许下拉类型为 dojoType=dijit.form.FilteringSelect　其他和HTML基本相同特别注意：<option value="chinese">chinese</option>必须这样的格式，如下 <option value="chinese"> chinese </option> 这样的格式将无法显示内容 10.email验证  <tr> <td> <label>E-mail</label> </td> <td> <input id="email" type="text" name="email" class="long" value="youname@qq.com" dojoType="dijit.form.ValidationTextBox" regExpGen="dojox.regexp.emailAddress" trim="true" required="true" invalidMessage="E-mail地址是非法的。" /> </td> </tr> 注：必须导入组件 dojo.require("dijit.form.ValidationTextBox"); dojo.require("dojox.validate.regexp"); dojo.require("dojo.parser"); 11.后台数据获取处理 request.setCharacterEncoding("utf-8"); response.setCharacterEncoding("utf-8"); String username = request.getParameter("username"); String password = request.getParameter("password"); String sex = request.getParameter("sex"); Integer age = Integer.parseInt(request.getParameter("age").toString() .trim()); String birthday = request.getParameter("birthday"); String[] interest = request.getParameterValues("interest"); String nationality = request.getParameter("nationality"); String email = request.getParameter("email"); StringBuilder data = new StringBuilder(); data.append(username).append("<br/>").append(password).append("<br/>") .append(sex).append("<br/>").append(age).append("<br/>") .append(birthday).append("<br/>"); for (int i = 0; i < interest.length; i++) { data.append(interest[i]).append(" "); if (i==interest.length-1){ data.append("<br/>"); } } data.append(nationality).append("<br/>").append(email); response.getWriter().write(data.toString());

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!