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 相关文章推荐
使用jscript实现二进制读写脚本代码
Jun 09 Javascript
javascript模拟枚举的简单实例
Mar 06 Javascript
js实现的标题栏新消息闪烁提示效果
Jun 06 Javascript
jquery获取html元素的绝对位置和相对位置的方法
Jun 20 Javascript
解决js下referer兼容各大浏览器的方法
Nov 03 Javascript
分享js粘帖屏幕截图到web页面插件screenshot-paste
Aug 21 Javascript
基于jQuery实现表格的查看修改删除
Aug 01 Javascript
vue 实现通过手机发送短信验证码注册功能
Apr 19 Javascript
JavaScript动态创建二维数组的方法示例
Feb 01 Javascript
vue中使用WX-JSSDK的两种方法(推荐)
Jan 18 Javascript
原生js拖拽实现图形伸缩效果
Feb 10 Javascript
webstorm建立vue-cli脚手架的傻瓜式教程
Sep 22 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中spl_autoload详解
2014/10/17 PHP
php根据日期显示所在星座的方法
2015/07/13 PHP
Yii2验证器(Validator)用法分析
2016/07/23 PHP
php并发加锁示例
2016/10/17 PHP
thinkPHP5.0框架环境变量配置方法
2017/03/17 PHP
PHP连接sftp并下载文件的方法教程
2018/08/26 PHP
Yii-自定义删除确认弹框(zyd)jquery实现代码
2013/03/04 Javascript
JavaScript和CSS通过expression实现Table居中显示
2013/06/28 Javascript
JS中引用百度地图并将百度地图的logo和信息去掉
2013/09/29 Javascript
JS+CSS实现经典的左侧竖向滑动菜单效果
2015/09/23 Javascript
JS实现页面数据无限加载
2016/09/13 Javascript
jquery.Jcrop结合JAVA后台实现图片裁剪上传实例
2016/11/05 Javascript
利用Chrome DevTools直接调试Node.js和JavaScript的方法详解(并行)
2017/02/16 Javascript
微信小程序本地缓存数据增删改查实例详解
2017/05/24 Javascript
JS实现从对象获取对象中单个键值的方法示例
2019/06/05 Javascript
VUE项目初建和常见问题总结
2019/09/12 Javascript
JS实现简单随机3D骰子
2019/10/24 Javascript
JS求解两数之和算法详解
2020/04/28 Javascript
深入理解javascript中的this
2021/02/08 Javascript
跟老齐学Python之玩转字符串(3)
2014/09/14 Python
Tensorflow加载预训练模型和保存模型的实例
2018/07/27 Python
python实现年会抽奖程序
2019/01/22 Python
基于Python实现用户管理系统
2019/02/26 Python
python3图片文件批量重命名处理
2019/10/31 Python
python GUI库图形界面开发之PyQt5窗口类QMainWindow详细使用方法
2020/02/26 Python
Tensorflow中的图(tf.Graph)和会话(tf.Session)的实现
2020/04/22 Python
Python使用for生成列表实现过程解析
2020/09/22 Python
Python编写万花尺图案实例
2021/01/03 Python
Django视图类型总结
2021/02/17 Python
特步官方商城:Xtep
2017/03/21 全球购物
俄罗斯卫浴采暖及维修用品超级市场:Dkrussia
2020/05/12 全球购物
传播学毕业生求职信
2013/10/11 职场文书
乐观大学生的自我评价
2014/01/10 职场文书
发展部经理职责规定
2014/02/22 职场文书
2014年度培训工作总结
2014/11/27 职场文书
python中os.path.join()函数实例用法
2021/05/26 Python