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:void(0)的问题使用探讨
Apr 10 Javascript
用jquery仿做发微博功能示例
Apr 18 Javascript
jQuery中trigger()与bind()用法分析
Dec 18 Javascript
jQuery禁用快捷键例如禁用F5刷新 禁用右键菜单等的简单实现
Aug 31 Javascript
Jquery和Js获得元素标签名称的方法总结
Oct 08 Javascript
vue-resource 拦截器使用详解
Feb 21 Javascript
jQuery+Ajax实现用户名重名实时检测
Jun 01 jQuery
jQuery开源组件BootstrapValidator使用详解
Jun 29 jQuery
Vue中之nextTick函数源码分析详解
Oct 17 Javascript
详解ajax的data参数错误导致页面崩溃
Apr 30 Javascript
Vue与Node.js通过socket.io通信的示例代码
Jul 25 Javascript
vue-video-player 断点续播的实现
Feb 01 Vue.js
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
如何冲泡挂耳包咖啡?技巧是什么
2021/03/04 冲泡冲煮
linux iconv方法的使用
2011/10/01 PHP
解析PHP跨站刷票的实现代码
2013/06/18 PHP
PHP获取youku视频真实flv文件地址的方法
2014/12/23 PHP
CSS(js)限制页面显示的文本字符长度
2012/12/27 Javascript
jquery 单引号和双引号的区别及使用注意
2013/07/31 Javascript
javascript图片相似度算法实现 js实现直方图和向量算法
2014/01/14 Javascript
js和jquery使按钮失效为不可用状态的方法
2014/01/26 Javascript
jQuery学习笔记之 Ajax操作篇(二) - 数据传递
2014/06/23 Javascript
fixedBox固定div漂浮代码支持ie6以上大部分主流浏览器
2014/06/26 Javascript
JS+CSS实现淡入式焦点图片幻灯切换效果的方法
2015/02/26 Javascript
javascript+css3 实现动态按钮菜单特效
2016/02/06 Javascript
Node.js使用orm2进行update操作时关联字段无法修改的解决方法
2017/06/13 Javascript
vue2中filter()的实现代码
2017/07/09 Javascript
vue组件中使用iframe元素的示例代码
2017/12/13 Javascript
详解使用webpack构建多页面应用
2017/12/21 Javascript
JS实现二维数组元素的排列组合运算简单示例
2019/01/28 Javascript
Python实现的检测网站挂马程序
2014/11/30 Python
详解python eval函数的妙用
2017/11/16 Python
python ddt数据驱动最简实例代码
2019/02/22 Python
pytorch 状态字典:state_dict使用详解
2020/01/17 Python
利用Python计算KS的实例详解
2020/03/03 Python
Python如何使用正则表达式爬取京东商品信息
2020/06/01 Python
Python连接HDFS实现文件上传下载及Pandas转换文本文件到CSV操作
2020/06/06 Python
通过Python实现Payload分离免杀过程详解
2020/07/13 Python
Python DES加密实现原理及实例解析
2020/07/17 Python
实例教程 利用html5和css3打造一款创意404页面
2014/10/20 HTML / CSS
Big Green Smile德国网上商店:提供各种天然产品
2018/05/23 全球购物
毕业生自我鉴定范文
2013/11/08 职场文书
资产评估专业学生的自我鉴定
2013/11/14 职场文书
市三好学生主要事迹
2014/01/28 职场文书
护士医德医风自我评价
2014/09/15 职场文书
婚前财产协议书范本
2014/10/19 职场文书
人事任命通知
2015/04/20 职场文书
使用Apache Camel表达REST服务的方法
2022/06/10 Servers
win10壁纸在哪个文件夹 win10桌面背景图片文件位置分享
2022/08/05 数码科技