Step 1:configurate Dojo
Download the latest Dojo package from Http://www.dojotoolkit.org/downloads and put it somewhere in your project. For example, I put my dojo library under the Lib folder (figure I).
Figure I (File directory structure)
Add the following code to your page, then complete the most basic configuration.
<script type= "Text/javascript" src= "lib/dojo/dojo/dojo.js" djconfig = "parseonload:true, IsDebug:false" ></ Script>
Step 2:start Your-Example
My first example is to simulate a simple login page that, if successful, displays "right! ", and vice versa," says Wrong!. Try it again! ”
Copy Code code as follows:
<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01//en" "HTTP://WWW.W3.ORG/TR/HTML4/STRICT.DTD" >
<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: 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>
<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" ></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>
(For the Dojo method, you can view the Dojo APIs and don't repeat them here)
The backstage uses PHP, the code is as follows:
Copy Code code as follows:
<?php
if ($_post["name"] = = "Blithe" && $_post["password"]== " Blithe ") {
print" right ";
}else{
print "wrong";
}
?>