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中的Screen屏幕对象
Jan 16 Javascript
jQuery 注意事项 与原因分析
Apr 24 Javascript
文字溢出实现溢出的部分再放入一个新生成的div中具体代码
May 17 Javascript
一款基jquery超炫的动画导航菜单可响应单击事件
Nov 02 Javascript
JavaScript常用小技巧小结
Dec 29 Javascript
javascript模拟评分控件实现方法
May 13 Javascript
Bootstrap编写一个在当前网页弹出可关闭的对话框 非弹窗
Jun 30 Javascript
chrome浏览器如何断点调试异步加载的JS
Sep 05 Javascript
input框中自动展示当前日期yyyy/mm/dd的实现方法
Jul 06 Javascript
30分钟快速入门掌握ES6/ES2015的核心内容(下)
Apr 18 Javascript
vue服务端渲染缓存应用详解
Sep 12 Javascript
用js实现放大镜效果
Oct 28 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实现时间轴函数代码
2011/10/08 PHP
基于PHP异步执行的常用方式详解
2013/06/03 PHP
php生成唯一的订单函数分享
2015/02/02 PHP
微信access_token的获取开发示例
2015/04/16 PHP
PHP中的静态变量及static静态变量使用详解
2015/11/05 PHP
mysql_escape_string()函数用法分析
2016/04/25 PHP
PHP异常处理定义与使用方法分析
2017/07/25 PHP
Js四则运算函数代码
2012/07/21 Javascript
jquery用data方法获取某个元素上的事件
2014/06/23 Javascript
基于JS实现的倒计时程序实例
2015/07/24 Javascript
JavaScript实现文字跟随鼠标特效
2015/08/06 Javascript
angular.bind使用心得
2015/10/26 Javascript
20分钟轻松创建自己的Bootstrap站点
2016/05/12 Javascript
Bootstrap学习笔记之css样式设计(2)
2016/06/07 Javascript
Bootstrap三种表单布局的使用方法
2016/06/21 Javascript
为jQuery-easyui的tab组件添加右键菜单功能的简单实例
2016/10/10 Javascript
angularjs点击图片放大实现上传图片预览
2017/02/24 Javascript
vue.js使用3DES加密的方法示例
2018/05/18 Javascript
vue使用ajax获取后台数据进行显示的示例
2018/08/09 Javascript
如何能分清npm cnpm npx nvm
2019/01/17 Javascript
webpack结合express实现自动刷新的方法
2019/05/07 Javascript
Vue将页面导出为图片或者PDF
2020/08/17 Javascript
Python运行的17个时新手常见错误小结
2012/08/07 Python
Python socket C/S结构的聊天室应用实现
2014/11/30 Python
Python如何使用内置库matplotlib绘制折线图
2020/02/24 Python
python GUI库图形界面开发之PyQt5复选框控件QCheckBox详细使用方法与实例
2020/02/28 Python
Python Switch Case三种实现方法代码实例
2020/06/18 Python
Numpy中np.random.rand()和np.random.randn() 用法和区别详解
2020/10/23 Python
元旦促销方案
2014/03/15 职场文书
出国留学经济担保书
2014/04/01 职场文书
2014年转正工作总结
2014/11/08 职场文书
企业反腐倡廉心得体会
2015/08/15 职场文书
超详细Python解释器新手安装教程
2021/05/10 Python
MySQL中distinct与group by之间的性能进行比较
2021/05/26 MySQL
关于redisson缓存序列化几枚大坑说明
2021/08/04 Redis
SSM项目使用拦截器实现登录验证功能
2022/01/22 Java/Android