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实现图片旋转的三种方法
Apr 10 Javascript
window.location的重写及判断location是否被重写
Sep 04 Javascript
JavaScript去除数组里重复值的方法
Jul 13 Javascript
JavaScript对HTML DOM使用EventListener进行操作
Oct 21 Javascript
javascript深拷贝(deepClone)详解
Aug 24 Javascript
Javascript动画效果(2)
Oct 11 Javascript
javaScript+turn.js实现图书翻页效果实例代码
Feb 16 Javascript
Node.js如何对SQLite的async/await封装详解
Feb 14 Javascript
vue-i18n结合Element-ui的配置方法
May 20 Javascript
使用uni-app开发微信小程序的实现
Dec 13 Javascript
深入理解redux之compose的具体应用
Jan 12 Javascript
Vue组件跨层级获取组件操作
Jul 27 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通过数组实现多条件查询实现方法(字符串分割)
2014/05/06 PHP
PHP FTP操作类代码( 上传、拷贝、移动、删除文件/创建目录)
2014/05/10 PHP
php实现二进制和文本相互转换的方法
2015/04/18 PHP
基于PHP+jQuery+MySql实现红蓝(顶踩)投票代码
2015/08/25 PHP
php+MySql实现登录系统与输出浏览者信息功能
2016/07/01 PHP
php表单习惯用的正则表达式
2017/10/11 PHP
PHP接口继承及接口多继承原理与实现方法详解
2017/10/18 PHP
laravel框架模型中非静态方法也能静态调用的原理分析
2019/11/23 PHP
更高效的使用JQuery 这里总结了8个小技巧
2016/04/13 Javascript
AngularJS框架中的双向数据绑定机制详解【减少需要重复的开发代码量】
2017/01/19 Javascript
js实现瀑布流效果(自动生成新的内容)
2017/03/16 Javascript
微信小程序动态添加分享数据
2017/06/14 Javascript
图片加载完成再执行事件的实例
2017/11/16 Javascript
vue使用技巧及vue项目中遇到的问题
2018/06/04 Javascript
详解VSCode配置启动Vue项目
2019/05/14 Javascript
vue 兄弟组件的信息传递的方法实例详解
2019/08/30 Javascript
vue解决花括号数据绑定不成功的问题
2019/10/30 Javascript
python实现的登陆Discuz!论坛通用代码分享
2014/07/11 Python
理解Python中函数的参数
2015/04/27 Python
python实现中文转换url编码的方法
2016/06/14 Python
Python 基础教程之包和类的用法
2017/02/23 Python
python八大排序算法速度实例对比
2017/12/06 Python
Pycharm取消py脚本中SQL识别的方法
2018/11/29 Python
在Pycharm中执行scrapy命令的方法
2019/01/16 Python
python实现输入任意一个大写字母生成金字塔的示例
2019/10/27 Python
python实现批量文件重命名
2019/10/31 Python
CSS3 Notes: -webkit-box-reflect实现倒影的实例
2016/12/08 HTML / CSS
纽约现代艺术博物馆商店:MoMA STORE(室内家具和杂货商品)
2016/08/02 全球购物
德国最大的拼图在线商店:Puzzle.de
2016/12/17 全球购物
英国手机壳购买网站:Case Hut
2019/04/11 全球购物
保加利亚服装和鞋类购物网站:Bibloo.bg
2020/11/08 全球购物
教师新年寄语
2014/04/03 职场文书
党支部党的群众路线对照检查材料
2014/09/24 职场文书
基于Nginx实现限制某IP短时间访问次数
2021/03/31 Servers
MySQL中VARCHAR与CHAR格式数据的区别
2021/05/26 MySQL
使用vue判断当前环境是安卓还是IOS
2022/04/12 Vue.js