Dojo 学习笔记入门篇 First Dojo Example
2018-10-12 14:12
393 查看
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!”
(对于其中的Dojo方法,可以查看Dojo的API,在此不再赘述)
后台采用php,代码如下:
从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";
}
?>
相关文章推荐
- Dojo 学习笔记入门篇 First Dojo Example
- [Spring入门学习笔记][Spring的AOP原理]
- 基于annotation注解的Spring3 MVC Page Redirection Example之三页面重定向学习笔记
- 零基础入门Python学习笔记3
- Dojo学习笔记(9. dojo.graphics.color & dojo.uri.Uri)
- 一篇非常好的linux学习笔记分享 (Linux入门绝佳)
- head first C#学习笔记:构建动态控件2-UserControl方法
- MVC入门学习笔记(八)
- Hadoop基础入门学习笔记(基本概念)
- 入门demo---Mybatis学习笔记(三)
- EF Code First学习笔记 初识Code First(转)
- Objective-C的入门学习笔记
- zigbee学习笔记---入门
- java 从零开始,学习笔记之基础入门<反射>(二十九)
- Unity Shader入门精要学习笔记 - 第11章 让画面动起来
- Data Analysis学习笔记 --- Python数据分析入门知识
- 编程小白的第一本 python 入门书 学习笔记06 第七章 类与可口可乐
- IOS学习笔记(一)UIFirst
- 深度学习入门教程UFLDL学习实验笔记三:主成分分析PCA与白化whitening
- Elastic-2.1.1学习笔记(一)基础入门