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中点号“.”的多义性
Dec 02 Javascript
jquery live()重复绑定的解决方法介绍
Jan 03 Javascript
通过JS获取Request.QueryString()参数的值实现方法
Sep 27 Javascript
JavaScript Ajax实现异步通信
Dec 14 Javascript
jquery加载单文件vue组件的方法
Jun 20 jQuery
jQuery实现html table行Tr的复制、删除、计算功能
Jul 10 jQuery
vue的安装及element组件的安装方法
Mar 09 Javascript
Bootstrap table中toolbar新增条件查询及refresh参数使用方法
May 18 Javascript
ES6 Symbol在对象中的作用实例分析
Jun 06 Javascript
Javascript如何实现扩充基本类型
Aug 26 Javascript
JavaScript 判断数据类型的4种方法
Sep 11 Javascript
jQuery是用来干什么的 jquery其实就是一个js框架
Feb 04 jQuery
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调用数据库的存贮过程!
2006/10/09 PHP
PHP连接access数据库
2008/03/27 PHP
适用于抽奖程序、随机广告的PHP概率算法实例
2014/04/09 PHP
PHP数据库操作四:mongodb用法分析
2017/08/16 PHP
记录几个javascript有关的小细节
2007/04/02 Javascript
解决火狐浏览器下JS setTimeout函数不兼容失效不执行的方法
2012/11/14 Javascript
JQGrid的用法解析(列编辑,添加行,删除行)
2013/11/08 Javascript
js中Math之random,round,ceil,floor的用法总结
2013/12/26 Javascript
js的正则test,match,exec详细解析
2014/01/29 Javascript
原生js获取宽高与jquery获取宽高的方法关系对比
2014/04/04 Javascript
排序算法的javascript实现与讲解(99js手记)
2014/09/28 Javascript
JavaScript操作XML文件之XML读取方法
2015/06/09 Javascript
Javascript中apply、call、bind的巧妙使用
2016/08/18 Javascript
浅析 NodeJs 的几种文件路径
2017/06/07 NodeJs
微信小程序实现缓存根据不同的id来进行设置和读取缓存
2017/06/12 Javascript
Node.js Event Loop各阶段讲解
2019/03/08 Javascript
[03:33]TI9战队采访 - Infamous
2019/08/20 DOTA
python翻译软件实现代码(使用google api完成)
2013/11/26 Python
socket + select 完成伪并发操作的实例
2017/08/15 Python
Python命令行解析模块详解
2018/02/01 Python
Python SMTP发送邮件遇到的一些问题及解决办法
2018/10/24 Python
详解Python中的内建函数,可迭代对象,迭代器
2019/04/29 Python
pyqt5 comboBox获得下标、文本和事件选中函数的方法
2019/06/14 Python
python爬取盘搜的有效链接实现代码
2019/07/20 Python
python超时重新请求解决方案
2019/10/21 Python
浅谈Python中range与Numpy中arange的比较
2020/03/11 Python
Linux安装Python3如何和系统自带的Python2并存
2020/07/23 Python
社区版pycharm创建django项目的方法(pycharm的newproject左侧没有项目选项)
2020/09/23 Python
波兰最大的度假胜地和城市公寓租赁运营商:Sun & Snow
2018/10/18 全球购物
自我鉴定思想方面
2013/10/07 职场文书
5.12护士节演讲稿
2014/04/30 职场文书
村庄环境整治方案
2014/05/15 职场文书
党员示范岗材料
2014/12/19 职场文书
中秋节随笔
2015/08/15 职场文书
2016年综治宣传月活动宣传标语口号
2016/03/16 职场文书
Python中可变和不可变对象的深入讲解
2021/08/02 Python