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 相关文章推荐
关于文本框的一些限制控制总结~~
Apr 15 Javascript
屏蔽F1~F12的快捷键的js函数
May 06 Javascript
Js组件的一些写法
Sep 10 Javascript
JavaScript 拾碎[三] 使用className属性
Oct 16 Javascript
jQuery1.6 类型判断实现代码
Sep 01 Javascript
JQuery写动态树示例代码
Jul 31 Javascript
javascript学习笔记之10个原生技巧
May 21 Javascript
js实现键盘控制DIV移动的方法
Jan 10 Javascript
javascript动画算法实例分析
Jul 31 Javascript
jQuery实用小技巧_输入框文字获取和失去焦点的简单实例
Aug 25 Javascript
AngularJs Modules详解及示例代码
Sep 01 Javascript
VUE之图片Base64编码使用ElementUI组件上传
Apr 09 Vue.js
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
mysql下创建字段并设置主键的php代码
2010/05/16 PHP
采用PHP函数memory_get_usage获取PHP内存清耗量的方法
2011/12/06 PHP
探讨多键值cookie(php中cookie存取数组)的详解
2013/06/06 PHP
如何阻止网站被恶意反向代理访问(防网站镜像)
2014/03/18 PHP
php sybase_fetch_array使用方法
2014/04/15 PHP
php实现微信发红包
2015/12/05 PHP
基于PHP实现等比压缩图片大小
2016/03/04 PHP
javascript新手语法小结
2008/06/15 Javascript
使用Javascript写的2048小游戏
2015/11/25 Javascript
js判断出两个字符串最大子串的函数实现方法
2016/11/01 Javascript
字太多用...代替的方法(两种)
2017/03/15 Javascript
Bootstrap滚动监听组件scrollspy.js使用方法详解
2017/07/20 Javascript
收集前端面试题之url、href、src
2018/03/22 Javascript
NodeJS 中Stream 的基本使用
2018/07/30 NodeJs
node中的session的具体使用
2018/09/14 Javascript
基于Vue-cli快速搭建项目的完整步骤
2018/11/03 Javascript
原生JS实现手动轮播图效果实例代码
2018/11/22 Javascript
JQuery Ajax执行跨域请求数据的解决方案
2018/12/10 jQuery
快速解决vue2+vue-cli3项目ie兼容的问题
2020/11/17 Vue.js
JavaScript实现浏览器网页自动滚动并点击的示例代码
2020/12/05 Javascript
[07:49]2014DOTA2国际邀请赛 Newbee夺冠后采访xiao8坦言奖金会上交
2014/07/23 DOTA
Python字符和字符值(ASCII或Unicode码值)转换方法
2015/05/21 Python
python字符串编码识别模块chardet简单应用
2015/06/15 Python
Python闭包的两个注意事项(推荐)
2017/03/20 Python
Django使用Mysql数据库已经存在的数据表方法
2018/05/27 Python
python如何给字典的键对应的值为字典项的字典赋值
2019/07/05 Python
python自动化测试之DDT数据驱动的实现代码
2019/07/23 Python
利用python中的matplotlib打印混淆矩阵实例
2020/06/16 Python
sklearn的predict_proba使用说明
2020/06/28 Python
pycharm 2020 1.1的安装流程
2020/09/29 Python
J.Crew官网:美国知名休闲服装品牌
2017/05/19 全球购物
个人批评与自我批评
2014/10/15 职场文书
2014年学校党建工作总结
2014/11/11 职场文书
司考复习计划
2015/01/19 职场文书
2019企业给员工的慰问信
2019/06/24 职场文书
基于Redis6.2.6版本部署Redis Cluster集群的问题
2022/04/01 Redis