繁體中文当前位置: 首页 > 图文教程 > 网络编程 > Javascript > Dojo 学习笔记入门篇 First Dojo Example
- Javascript
- Prototype使用指南之form.js
- Prototype1.5 rc2版指南最后一篇之Position
- javascript 对象的定义方法
- JS多级连动菜单
- javascript编程起步（第一课）
- javascript编程起步（第二课）
- java script编程起步（第三课）
- jquery简单体验
- javascript编程起步（第四课）
- javascript编程起步（第五课）
- javascript编程起步（第六课）
- javascript编程起步（第七课）
- javascript object oriented 面向对象编程初步
- js宝典学习笔记（上）
- JS宝典学习笔记(下)
- javascript基础的动画教程，直观易懂
- javascript 的面向对象特性参考
- JScript|Event]面向事件驱动的编程(二)--实例讲解:将span模拟成超连接
- JScript面向事件驱动的编程
- 一份老外写的XMLHttpRequest代码多浏览器支持兼容性
Javascript 中的 Dojo 学习笔记入门篇 First Dojo Example
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2010-01-10 浏览: 273 ::
收藏到网摘: n/a
Dojo学习笔记入门篇，第一个小例子， 刚开始学习dojo的朋友可以参考下。 Step 1： Configurate Dojo
从http://www.dojotoolkit.org/downloads 下载最新的Dojo包，并且放到你工程的某一个地方。比如，我就放把我的dojo库放在lib文件夹下（如图一）。
图一（文件目录结构）
在你的页面中加入如下代码，那么就完成了最基本的配置。
<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";
}
?>
评论 (0) All
