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 相关文章推荐
收藏一些不常用,但是有用的代码
Mar 12 Javascript
jQuery LigerUI 使用教程入门篇
Jan 18 Javascript
javascript控制swfObject应用介绍
Nov 29 Javascript
js实现百度登录框鼠标拖拽效果
Mar 07 Javascript
bootstrap3使用bootstrap datetimepicker日期插件
May 24 Javascript
vue.js模仿京东省市区三级联动的选择组件实例代码
Nov 22 Javascript
30分钟快速入门掌握ES6/ES2015的核心内容(下)
Apr 18 Javascript
Vue表单之v-model绑定下拉列表功能
May 14 Javascript
20道JS原理题助你面试一臂之力(必看)
Jul 22 Javascript
详解vue3.0 diff算法的使用(超详细)
Jul 01 Javascript
解决vue组件没显示,没起作用,没报错,但该显示的组件没显示问题
Sep 02 Javascript
uniapp实现可滑动选项卡
Oct 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+xslt在windows平台上
2006/10/09 PHP
PHP使用curl制作简易百度搜索
2016/11/03 PHP
PHP编程计算两个时间段是否有交集的实现方法(不算边界重叠)
2017/05/30 PHP
php微信公众号开发之校园图书馆
2018/10/20 PHP
5款Javascript颜色选择器
2009/10/25 Javascript
再论Javascript的类继承
2011/03/05 Javascript
JavaScript怎么判断图片是否加载完成以便获取其尺寸
2014/05/08 Javascript
js清空form表单中的内容示例
2014/05/20 Javascript
详细探究ES6之Proxy代理
2016/07/22 Javascript
浅谈JS使用[ ]来访问对象属性
2016/09/21 Javascript
快速理解 JavaScript 中的 LHS 和 RHS 查询的用法
2017/08/24 Javascript
微信通过页面(H5)直接打开本地app的解决方法
2017/09/09 Javascript
javascript变量提升和闭包理解
2018/03/12 Javascript
使用vue-router切换页面时,获取上一页url以及当前页面url的方法
2019/05/06 Javascript
在Python操作时间和日期之asctime()方法的使用
2015/05/22 Python
浅谈django rest jwt vue 跨域问题
2018/10/26 Python
在pycharm中python切换解释器失败的解决方法
2018/10/29 Python
Python编程flask使用页面模版的方法
2018/12/28 Python
Python大数据之使用lxml库解析html网页文件示例
2019/11/16 Python
Python 项目转化为so文件实例
2019/12/23 Python
Python原始套接字编程实例解析
2020/01/29 Python
pycharm运行程序时看不到任何结果显示的解决
2020/02/21 Python
解决更改AUTH_USER_MODEL后出现的问题
2020/05/14 Python
非凡女性奢华谦虚风格:The Modist
2017/10/28 全球购物
销售人员中英文自荐信
2013/09/22 职场文书
办公室文秘岗位职责
2013/11/15 职场文书
美德少年事迹材料
2014/01/23 职场文书
员工趣味活动方案
2014/08/27 职场文书
2014年英语教研组工作总结
2014/12/06 职场文书
大学生自荐材料范文
2014/12/30 职场文书
拾金不昧表扬信
2015/01/16 职场文书
会计专业自荐信范文
2015/03/05 职场文书
幼儿园推普周活动总结
2015/05/07 职场文书
毕业论文致谢怎么写
2015/05/14 职场文书
新手开公司创业注意事项有哪些?
2019/07/29 职场文书
django中websocket的具体使用
2022/01/22 Python