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 相关文章推荐
JS调用页面表格导出excel示例代码
Mar 18 Javascript
Javascript核心读书有感之语句
Feb 11 Javascript
jQuery选择器源码解读(二):select方法
Mar 31 Javascript
JQuery复制DOM节点的方法
Jun 11 Javascript
简单实现的JQuery文本框水印插件
Jun 14 Javascript
javascript获取网页各种高宽及位置的方法总结
Jul 27 Javascript
jquery滚动条插件(可以自定义)
Dec 11 Javascript
图文详解Javascript中的上下文和作用域
Feb 15 Javascript
利用Angular+Angular-Ui实现分页(代码加简单)
Mar 10 Javascript
node结合swig渲染摸板的方法
Apr 11 Javascript
浅析vue插槽和作用域插槽的理解
Apr 22 Javascript
vue日历/日程提醒/html5本地缓存功能
Sep 02 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
利用js调用后台php进行数据处理原码
2006/10/09 PHP
Can't create/write to file 'C:\WINDOWS\TEMP\...MYSQL报错解决方法
2011/06/30 PHP
基于initPHP的框架介绍
2013/04/18 PHP
PHP中文乱码解决方案
2015/03/05 PHP
CentOS 安装 PHP5.5+Redis+XDebug+Nginx+MySQL全纪录
2015/03/25 PHP
Laravel使用支付宝进行支付的示例代码
2017/08/16 PHP
增强的 JavaScript 的 trim 函数的代码
2007/08/13 Javascript
通过修改referer下载文件的方法
2008/05/11 Javascript
js函数中onmousedown和onclick的区别和联系探讨
2013/05/19 Javascript
JS实现的简洁纵向滑动菜单(滑动门)效果
2015/10/19 Javascript
Three.js学习之文字形状及自定义形状
2016/08/01 Javascript
Angularjs手动解析表达式($parse)
2016/10/12 Javascript
详解vue事件对象、冒泡、阻止默认行为
2017/03/20 Javascript
详解Vue2.X的路由管理记录之 钩子函数(切割流水线)
2017/05/02 Javascript
javascript 中iframe高度自适应(同域)实例详解
2017/05/16 Javascript
vue 标签属性数据绑定和拼接的实现方法
2018/05/17 Javascript
javascript异步编程的六种方式总结
2019/05/17 Javascript
Nodejs环境实现socket通信过程解析
2020/07/03 NodeJs
H5 js点击按钮复制文本到粘贴板
2020/11/19 Javascript
python中django框架通过正则搜索页面上email地址的方法
2015/03/21 Python
Python实现统计给定字符串中重复模式最高子串功能示例
2018/05/16 Python
使用python 3实现发送邮件功能
2018/06/15 Python
Python 使用类写装饰器的小技巧
2018/09/30 Python
pyQt5实时刷新界面的示例
2019/06/25 Python
pyenv与virtualenv安装实现python多版本多项目管理
2019/08/17 Python
使用python动态生成波形曲线的实现
2019/12/04 Python
python每5分钟从kafka中提取数据的例子
2019/12/23 Python
python使用hdfs3模块对hdfs进行操作详解
2020/06/06 Python
关于python tushare Tkinter构建的简单股票可视化查询系统(Beta v0.13)
2020/10/19 Python
HTML5在微信内置浏览器下右上角菜单的调整字体导致页面显示错乱的问题
2021/01/19 HTML / CSS
请写出 BOOL flag 与"零值"比较的 if 语句
2016/02/29 面试题
食堂采购员岗位职责
2014/03/17 职场文书
产品质量承诺范本
2014/03/31 职场文书
感恩母亲节演讲稿
2014/05/07 职场文书
go 实现简易端口扫描的示例
2021/05/22 Golang
jdbc中自带MySQL 连接池实践示例
2022/07/23 MySQL