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 相关文章推荐
js函数模拟显示桌面.scf程序示例
Apr 20 Javascript
超级好用的jQuery圆角插件 Corner速成
Aug 31 Javascript
原生js实现的贪吃蛇网页版游戏完整实例
May 18 Javascript
jquery根据td给相同tr下其他td赋值的实现方法
Oct 05 Javascript
Vue实现web分页组件详解
Nov 28 Javascript
vue-cli2打包前和打包后的css前缀不一致的问题解决
Aug 24 Javascript
webpack3里使用uglifyjs压缩js时打包报错的解决
Dec 13 Javascript
详解微信UnionID作用
May 15 Javascript
js prototype和__proto__的关系是什么
Aug 23 Javascript
javaScript把其它类型转换为Number类型
Oct 13 Javascript
vue h5移动端禁止缩放代码
Oct 28 Javascript
Layui表格监听行单双击事件讲解
Nov 14 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 柱状图实现代码
2009/12/04 PHP
PHP程序员面试 切忌急功近利(更需要注重以后的发展)
2010/09/01 PHP
Yii调试SQL的常用方法
2014/07/09 PHP
PHP获取当前相对于域名目录的方法
2015/06/26 PHP
使用PHP编写发红包程序
2015/07/22 PHP
JQuery优缺点分析说明
2010/06/09 Javascript
js 获取和设置css3 属性值的实现方法
2013/05/06 Javascript
javascript中attribute和property的区别详解
2014/06/05 Javascript
node.js中的fs.existsSync方法使用说明
2014/12/17 Javascript
Javascript中的包装类型介绍
2015/04/02 Javascript
浅谈JavaScript超时调用和间歇调用
2015/08/30 Javascript
jQuery.extend 函数及用法详细
2015/09/06 Javascript
javascript日期处理函数,性能优化批处理
2015/09/06 Javascript
Javascript 跨域知识详细介绍
2016/10/30 Javascript
webix+springmvc session超时跳转登录页面
2016/10/30 Javascript
vue+socket.io+express+mongodb 实现简易多房间在线群聊示例
2017/10/21 Javascript
layer.js之回调销毁对话框的例子
2019/09/11 Javascript
修改Vue打包后的默认文件名操作
2020/08/12 Javascript
element-plus一个vue3.xUI框架(element-ui的3.x 版初体验)
2020/12/02 Vue.js
[02:21]DOTA2英雄基础教程 蝙蝠骑士
2013/12/16 DOTA
[03:56]还原FTP电影首映式 DOTA2群星拼出遗迹世界
2014/03/26 DOTA
python实现图片变亮或者变暗的方法
2015/06/01 Python
python版微信跳一跳游戏辅助
2018/01/11 Python
使用PyQt5实现图片查看器的示例代码
2020/04/21 Python
opencv 图像加法与图像融合的实现代码
2020/07/08 Python
HTML5拖拉上传文件的简单实例
2017/01/11 HTML / CSS
法国体育用品商店:GO Sport
2019/10/23 全球购物
英国医生在线预约:Top Doctors
2019/10/30 全球购物
广州足迹信息技术有限公司Java软件工程师试题
2014/02/15 面试题
请假条范文大全
2014/04/10 职场文书
家长写给孩子的评语
2014/04/18 职场文书
房地产端午节活动方案
2014/08/24 职场文书
考研复习计划
2015/01/19 职场文书
管理失职检讨书
2015/05/05 职场文书
2015年保险公司内勤工作总结
2015/05/23 职场文书
安全生产奖惩制度
2015/08/06 职场文书