Dojo 学习笔记入门篇 First Dojo Example


Posted in Javascript onNovember 15, 2009

Step 1: Configurate Dojo
从http://www.dojotoolkit.org/downloads 下载最新的Dojo包,并且放到你工程的某一个地方。比如,我就放把我的dojo库放在lib文件夹下(如图一)。
Dojo 学习笔记入门篇 First Dojo Example 
图一(文件目录结构)
在你的页面中加入如下代码,那么就完成了最基本的配置。
<script type="text/javascript" src="lib/dojo/dojo/dojo.js" djConfig ="parseOnLoad:true, isDebug:false"></script>
Step 2: Start your First Example
我的第一个例子是模拟一个简单的登录页面,如果成功,则显示“Right!”,反之则显示“Wrong!Please try it again!”

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
<title>Untitled Document</title> 
<script type="text/javascript" src="lib/dojo/dojo/dojo.js" src="lib/dojo/dojo/dojo.js" djConfig ="parseOnLoad:true, isDebug:false"></script> 
<style type="text/css"><!-- 
#container { 
border: 1px dotted #b7b7b7; 
background: #ededed; 
width: 200px; 
height: 200px; 
} 
--></style><style type="text/css" bogus="1"> #container { 
border: 1px dotted #b7b7b7; 
background: #ededed; 
width: 200px; 
height: 200px; 
} 
</style> 
</head> 
<body> 
<form id="mainForm" action="controller/ajax-controller.php" method="post"> 
<label for = "name">Name:</label> 
<input type="text" name="name"/> 
<br/> 
<label for = "password">Password:</label> 
<input type="password" name="password" value=""/> 
<br/> 
<input type="submit" value="Submit"/> 
<h1 id="resultText"></h1> 
</form> 
<script type="text/javascript"><!-- 
var formSubmit = function(e){ 
e.preventDefault(); 
var resultText = dojo.byId("resultText"); 
dojo.xhrPost({ 
url: "controller/controller.php", 
form:"mainForm", 
handleAs:"text", 
handle:function(data,args){ 
console.info(data); 
if(typeof data=="error"){ 
resultText.innerHTML = "<font color=\"red\">error!</font>"; 
}else{ 
if(data === "right"){ 
resultText.innerHTML = "Right!"; 
}else if(data==="wrong"){ 
resultText.innerHTML = "<font color=\"red\">Wrong!Please try it again!</font>"; 
} 
} 
} 
}); 
}; 
dojo.addOnLoad(function(){ 
var theForm = dojo.byId("mainForm"); 
dojo.connect(theForm,"onsubmit","formSubmit"); 
}); 
// --></script> 
</body> 
</html>

(对于其中的Dojo方法,可以查看Dojo的API,在此不再赘述)
后台采用php,代码如下:
<?php 
if($_POST["name"] == "blithe" && $_POST["password"]=="blithe"){ 
    print "right"; 
}else{ 
    print "wrong"; 
} 
?>
Javascript 相关文章推荐
javascript 清除输入框中的数据
Apr 13 Javascript
更换select下拉菜单背景样式的实现代码
Dec 20 Javascript
JS获取几种URL地址的方法小结
Feb 26 Javascript
javascript二维数组转置实例
Jan 22 Javascript
使用JavaScript刷新网页的方法
Jun 04 Javascript
javascript结合Flexbox简单实现滑动拼图游戏
Feb 18 Javascript
JS获取及验证开始结束日期的方法
Aug 20 Javascript
nginx部署访问vue-cli搭建的项目的方法
Feb 12 Javascript
JS实现区分中英文并统计字符个数的方法示例
Jun 09 Javascript
利用Angular2的Observables实现交互控制的方法
Dec 27 Javascript
微信小程序在线客服自动回复功能(基于node)
Jul 03 Javascript
layer.confirm点击第一个按钮关闭弹出框的方法
Sep 09 Javascript
flash 得到自身url参数的代码
Nov 15 #Javascript
javascript 去字符串空格终极版(支持utf8)
Nov 14 #Javascript
jQuery checkbox全选/取消全选实现代码
Nov 14 #Javascript
jQuery帮助之CSS尺寸(五)outerHeight、outerWidth
Nov 14 #Javascript
jquery 可排列的表实现代码
Nov 13 #Javascript
javascript 带有滚动条的表格,标题固定,带排序功能.
Nov 13 #Javascript
传智播客学习之JavaScript基础篇
Nov 13 #Javascript
You might like
PHP数组对比函数,存在交集则返回真,否则返回假
2011/02/03 PHP
PHP批量去除BOM头内容信息代码
2016/03/11 PHP
如何正确配置Nginx + PHP
2016/07/15 PHP
thinkphp在php7环境下提示Cannot use ‘String’ as class name as it is reserved的解决方法
2016/09/30 PHP
thinkPHP5.0框架验证码调用及点击图片刷新简单实现方法
2018/09/07 PHP
LazyForm jQuery plugin 定制您的CheckBox Radio和Select
2009/10/24 Javascript
js常用代码段收集
2011/10/28 Javascript
node.js 一个简单的页面输出实现代码
2012/03/07 Javascript
javascript实现div的拖动并调整大小类似qq空间个性编辑模块
2012/12/12 Javascript
js获取URL的参数的方法(getQueryString)示例
2013/09/29 Javascript
jquery中的过滤操作详细解析
2013/12/02 Javascript
js html5 css俄罗斯方块游戏再现
2016/10/17 Javascript
微信小程序 icon组件详细及实例代码
2016/10/25 Javascript
Bootstrap + AngularJS 实现简单的数据过滤字符查找功能
2017/07/27 Javascript
jquery中ajax请求后台数据成功后既不执行success也不执行error的完美解决方法
2017/12/24 jQuery
基于datepicker定义自己的angular时间组件的示例
2018/03/14 Javascript
浅谈React高阶组件
2018/03/28 Javascript
深入浅析vue-cli@3.0 使用及配置说明
2019/05/08 Javascript
[50:21]Liquid vs Winstrike 2018国际邀请赛小组赛BO2 第二场
2018/08/19 DOTA
Python中subprocess模块用法实例详解
2015/05/20 Python
Python制作爬虫抓取美女图
2016/01/20 Python
python实现12306火车票查询器
2017/04/20 Python
python实现对excel进行数据剔除操作实例
2017/12/07 Python
Python基于hashlib模块的文件MD5一致性加密验证示例
2018/02/10 Python
Python实现捕获异常发生的文件和具体行数
2020/04/25 Python
Python新手学习函数默认参数设置
2020/06/03 Python
HTML5之HTML元素扩展(下)—增强的Form表单元素值得关注
2013/01/31 HTML / CSS
中学生爱国演讲稿
2013/12/31 职场文书
财务会计专业个人求职信范本
2014/01/08 职场文书
家长会标语
2014/06/24 职场文书
行政工作试用期自我评价
2014/09/14 职场文书
事业单位个人查摆问题及整改措施
2014/10/28 职场文书
2015年乡镇残联工作总结
2015/05/13 职场文书
中国梦党课学习心得体会
2016/01/05 职场文书
python字典的元素访问实例详解
2021/07/21 Python
MySql子查询IN的执行和优化的实现
2021/08/02 MySQL