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:以前写的xmlhttp池,代码
May 18 Javascript
调试JavaScript中正则表达式中遇到的问题
Jan 27 Javascript
javascript与jquery动态创建html元素示例
Jul 25 Javascript
Web打印解决方案之普通报表打印功能
Aug 29 Javascript
Bootstrap基本样式学习笔记之标签(5)
Dec 07 Javascript
jquery使用EasyUI Tree异步加载JSON数据(生成树)
Feb 11 Javascript
EasyUI为Numberbox添加blur事件的方法
Mar 05 Javascript
源码分析Vue.js的监听实现教程
Apr 23 Javascript
Express系列之multer上传的使用
Oct 27 Javascript
浅谈实现vue2.0响应式的基本思路
Feb 13 Javascript
JavaScript常见鼠标事件与用法分析
Jan 03 Javascript
vue.js循环radio的实例
Nov 07 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的安全
2006/10/09 PHP
php学习笔记之面向对象编程
2012/12/29 PHP
高质量PHP代码的50个实用技巧必备(上)
2016/01/22 PHP
nginx下安装php7+php5
2016/07/31 PHP
Zend Framework框架实现类似Google搜索分页效果
2016/11/25 PHP
PHP使用Redis替代文件存储Session的方法
2017/02/15 PHP
优化JavaScript脚本的性能的几个注意事项
2006/12/22 Javascript
javascript时区函数介绍
2012/09/14 Javascript
javascript的原生方法获取数组中的最大(最小)值
2012/12/19 Javascript
使图片旋转的3种解决方案
2013/11/21 Javascript
利用try-catch判断变量是已声明未声明还是未赋值
2014/03/12 Javascript
javascript从image转换为base64位编码的String
2014/07/29 Javascript
使用Node.js配合Nginx实现高负载网络
2015/06/28 Javascript
js判断上传文件后缀名是否合法
2016/01/28 Javascript
JavaScript数组合并的多种方法
2016/05/22 Javascript
js实现随机点名系统(实例讲解)
2017/10/18 Javascript
JS实现简单的浮动碰撞效果示例
2017/12/28 Javascript
JavaScript代码调试方法实例小结
2019/01/05 Javascript
vue 兄弟组件的信息传递的方法实例详解
2019/08/30 Javascript
layui插件表单验证提交触发提交的例子
2019/09/09 Javascript
vue 解决文本框被键盘遮住的问题
2019/11/06 Javascript
详解element上传组件before-remove钩子问题解决
2020/04/08 Javascript
[01:33:14]LGD vs VP Supermajor 败者组决赛 BO3 第二场 6.10
2018/07/04 DOTA
Python3基础之基本运算符概述
2014/08/13 Python
Tensorflow全局设置可见GPU编号操作
2020/06/30 Python
python之openpyxl模块的安装和基本用法(excel管理)
2021/02/03 Python
英国时尚和家居用品零售商:Matalan
2021/02/28 全球购物
大学生毕业的自我评价分享
2014/01/02 职场文书
运动会闭幕式解说词
2014/02/21 职场文书
2014年社区庆元旦活动方案
2014/03/08 职场文书
年终晚会主持词
2014/03/25 职场文书
论文评语大全
2014/04/29 职场文书
测绘工程专业求职信
2014/07/15 职场文书
离婚协议书包括哪些内容
2014/10/16 职场文书
关于安全的广播稿
2014/10/23 职场文书
LyScript实现绕过反调试保护的示例详解
2022/08/14 Python