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中SQL语句的应用实现
May 04 Javascript
使用按钮控制以何种方式打开新窗口的属性介绍
Dec 17 Javascript
关于JS数组追加数组采用push.apply的问题
Jun 09 Javascript
javascript 正则表达式去空行方法
Jan 24 Javascript
JS获取input[file]的值并显示在页面的实现方法
Mar 09 Javascript
JS装饰器函数用法总结
Apr 21 Javascript
关于layui 弹出层一闪而过就消失的解决方法
Sep 09 Javascript
微信小程序实现3D轮播图效果(非swiper组件)
Sep 21 Javascript
vue的三种图片引入方式代码实例
Nov 19 Javascript
使用Taro实现小程序商城的购物车功能模块的实例代码
Jun 05 Javascript
JavaScript 事件代理需要注意的地方
Sep 08 Javascript
基于javascript实现移动端轮播图效果
Dec 21 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/08/14 PHP
php定时计划任务与fsockopen持续进程实例
2014/05/23 PHP
linux中cd命令使用详解
2015/01/08 PHP
ThinkPHP模型详解
2015/07/27 PHP
Yii2中datetime类的使用
2016/12/17 PHP
一些常用的JavaScript函数(json)附详细说明
2011/05/25 Javascript
brook javascript框架介绍
2011/10/10 Javascript
Javascript操作URL函数修改版
2013/11/07 Javascript
javascript面向对象之对象的深入理解
2015/01/13 Javascript
NodeJS学习笔记之Connect中间件模块(一)
2015/01/27 NodeJs
js+css实现文字散开重组动画特效代码分享
2015/08/21 Javascript
JS使用post提交的两种方式
2015/12/03 Javascript
javascript 网页进度条简单实例
2017/02/22 Javascript
JavaScript函数柯里化原理与用法分析
2017/03/31 Javascript
判断js数据类型的函数实例详解
2019/05/23 Javascript
Vuex中实现数据状态查询与更改
2019/11/08 Javascript
javascript this指向相关问题及改变方法
2020/11/19 Javascript
Python中使用PIPE操作Linux管道
2015/02/04 Python
python实现根据用户输入从电影网站获取影片信息的方法
2015/04/07 Python
python中requests小技巧
2017/05/10 Python
python实现的正则表达式功能入门教程【经典】
2017/06/05 Python
Appium Python自动化测试之环境搭建的步骤
2019/01/23 Python
python数据预处理之数据标准化的几种处理方式
2019/07/17 Python
用python打开摄像头并把图像传回qq邮箱(Pyinstaller打包)
2020/05/17 Python
PyQt5实现画布小程序
2020/05/30 Python
Python实现列表中非负数保留,负数转化为指定的数值方式
2020/06/04 Python
Python requests HTTP验证登录实现流程
2020/11/05 Python
安全资料员岗位职责
2013/12/14 职场文书
公证委托书模板
2014/04/03 职场文书
诉讼授权委托书范本
2014/10/05 职场文书
群众路线教育实践活动心得体会(四风)
2014/11/03 职场文书
会计电算化实训报告
2014/11/04 职场文书
委托函范文
2015/01/29 职场文书
法院答辩状格式
2015/05/22 职场文书
mysql获取指定时间段中所有日期或月份的语句(不设存储过程,不加表)
2021/06/18 MySQL
解决Vmware虚拟机安装centos8报错“Section %Packages Does Not End With %End. Pane Is Dead”
2022/06/01 Servers