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实现轮显新闻标题链接
Aug 13 Javascript
js实现图片轮换效果代码
Apr 16 Javascript
jquery设置元素的readonly和disabled的写法
Sep 22 Javascript
jQuery 1.9.1源码分析系列(十五)之动画处理
Dec 03 Javascript
用director.js实现前端路由使用实例
Jan 27 Javascript
Angular.JS实现无限级的联动菜单(使用demo)
Feb 08 Javascript
微信小程序 自动登陆PHP源码实例(源码下载)
May 08 Javascript
Jquery遍历筛选数组的几种方法和遍历解析json对象,Map()方法详解以及数组中查询某值是否存在
Jan 18 jQuery
js实现图片推拉门效果代码实例
May 18 Javascript
对vuex中store和$store的区别说明
Jul 24 Javascript
JS算法教程之字符串去重与字符串反转
Dec 15 Javascript
vue项目如何打包之项目打包优化(让打包的js文件变小)
Apr 30 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
DC《小丑》11项提名领跑奥斯卡 Netflix成第92届奥斯卡提名最大赢家
2020/04/09 欧美动漫
linux下使用ThinkPHP需要注意大小写导致的问题
2011/08/02 PHP
php使用Smarty的相关注意事项及访问变量的几种方式
2011/12/08 PHP
PHP 使用header函数设置HTTP头的示例解析 表头
2013/06/17 PHP
Symfony2使用第三方库Upload制作图片上传实例详解
2016/02/04 PHP
CI框架常用经典操作类总结(路由,伪静态,分页,session,验证码等)
2016/11/21 PHP
php输出含有“#”字符串的方法
2017/01/18 PHP
PHP面向对象之里氏替换原则简单示例
2018/04/08 PHP
Django 标签筛选的实现代码(一对多、多对多)
2018/09/05 PHP
Yii2.0 RESTful API 基础配置教程详解
2018/12/26 PHP
PHP+mysql实现的三级联动菜单功能示例
2019/02/15 PHP
javascript写的一个链表实现代码
2009/10/25 Javascript
深入浅析JavaScript系列(13):This? Yes,this!
2016/01/05 Javascript
bootstrap table表格客户端分页实例
2017/08/07 Javascript
详解使用路由延迟加载 Angular 模块
2017/10/12 Javascript
详解Javascript 中的 class、构造函数、工厂函数
2017/12/20 Javascript
vue-router权限控制(简单方式)
2018/10/29 Javascript
Vuex 使用 v-model 配合 state的方法
2018/11/13 Javascript
Vue+Element实现表格编辑、删除、以及新增行的最优方法
2019/05/28 Javascript
微信小程序 搜索框组件代码实例
2019/09/06 Javascript
react用Redux中央仓库实现一个todolist
2019/09/29 Javascript
浅析Python中元祖、列表和字典的区别
2016/08/17 Python
非递归的输出1-N的全排列实例(推荐)
2017/04/11 Python
Python标准库sched模块使用指南
2017/07/06 Python
python使用fork实现守护进程的方法
2017/11/16 Python
VSCode基础使用与VSCode调试python程序入门的图文教程
2020/03/30 Python
解决python执行较大excel文件openpyxl慢问题
2020/05/15 Python
Keras保存模型并载入模型继续训练的实现
2021/02/20 Python
巴塞罗那观光通票:Barcelona Pass
2019/10/30 全球购物
什么是典型的软件三层结构?软件设计为什么要分层?软件分层有什么好处?
2012/03/14 面试题
Linux如何修改文件和文件夹的权限
2012/06/27 面试题
四年级科学教学反思
2014/02/10 职场文书
pytorch 梯度NAN异常值的解决方案
2021/06/05 Python
详解java如何集成swagger组件
2021/06/21 Java/Android
MySQL如何快速创建800w条测试数据表
2022/03/17 MySQL
详解apache编译安装httpd-2.4.54及三种风格的init程序特点和区别
2022/07/15 Servers