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 相关文章推荐
用cookies实现的可记忆的样式切换效果代码下载
Dec 24 Javascript
提高网站信任度的技巧
Oct 17 Javascript
window.parent调用父框架时 ie跟火狐不兼容问题
Jul 30 Javascript
各情景下元素宽高的获取实现代码
Sep 13 Javascript
解析javascript 实用函数的使用详解
May 10 Javascript
jquery eval解析JSON中的注意点介绍
Aug 23 Javascript
JQuery解析HTML、JSON和XML实例详解
Mar 29 Javascript
Angularjs基础知识及示例汇总
Jan 22 Javascript
全面了解函数声明与函数表达式、变量提升
Aug 09 Javascript
JS实现获取当前URL和来源URL的方法
Aug 24 Javascript
原生js实现无缝轮播图效果
Jan 11 Javascript
webpack 3.X学习之多页面打包的方法
Sep 04 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
深入PHP5中的魔术方法详解
2013/06/17 PHP
PHP7 echo和print语句实例用法
2019/02/15 PHP
Firefox outerHTML实现代码
2009/06/04 Javascript
Javascript中的this绑定介绍
2011/09/22 Javascript
jQuery原理系列-常用Dom操作详解
2016/06/07 Javascript
JS判断鼠标进入容器的方向与window.open新窗口被拦截的问题
2016/12/23 Javascript
JavaScript实现自动跳转文本功能
2017/05/25 Javascript
详解vue前后台数据交互vue-resource文档
2017/07/19 Javascript
微信小程序实现点击按钮移动view标签的位置功能示例【附demo源码下载】
2017/12/06 Javascript
深入浅析vue组件间事件传递
2017/12/29 Javascript
解决Jquery下拉框数据动态获取的问题
2018/01/25 jQuery
bootstrap table支持高度百分比的实例代码
2018/02/28 Javascript
vue项目中引入noVNC远程桌面的方法
2018/03/05 Javascript
微信小程序实现刷脸登录
2018/05/25 Javascript
微信小程序websocket实现聊天功能
2020/03/30 Javascript
如何使用webpack打包一个库library的方法步骤
2019/12/18 Javascript
微信小程序自定义弹出层效果
2020/05/26 Javascript
通过实例解析jQ Ajax操作相关原理
2020/09/23 Javascript
Python脚本实现自动将数据库备份到 Dropbox
2017/02/06 Python
python解析基于xml格式的日志文件
2017/02/25 Python
python绘制散点图并标记序号的方法
2018/12/11 Python
Python如何调用JS文件中的函数
2019/08/16 Python
pyqt5 QScrollArea设置在自定义侧(任何位置)
2019/09/25 Python
Pytorch使用MNIST数据集实现基础GAN和DCGAN详解
2020/01/10 Python
Python日志:自定义输出字段 json格式输出方式
2020/04/27 Python
Django启动时找不到mysqlclient问题解决方案
2020/11/11 Python
使用CSS3制作一个简单的进度条(demo)
2017/05/23 HTML / CSS
《鸿门宴》教学反思
2014/04/22 职场文书
个人委托书
2014/07/31 职场文书
交警失职检讨书
2015/01/26 职场文书
个人股份转让协议书范本
2015/01/28 职场文书
检讨书模板大全
2015/05/07 职场文书
污水处理保证书
2015/05/09 职场文书
2015年度电厂个人工作总结
2015/05/13 职场文书
初级职称评定工作总结
2015/08/13 职场文书
筑梦中国心得体会
2016/01/18 职场文书