dojo1.1.0学习总结--简单登陆案例
一. 登陆案例
先看一下整个代码：
前台页面部分：
<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>登陆案例</title>
<style type="text/css">
@import "js/dojo-release-1.1.0/dojo/resources/dojo.css";
@import "js/dojo-release-1.1.0/dijit/themes/tundra/tundra.css";
</style>
<script type="text/javascript" djConfig="parseOnLoad: true"
src="js/dojo-release-1.1.0/dojo/dojo.js"></script>
<script type="text/javascript">
dojo.require("dijit.form.Button");
</script>
</head>
<body class="tundra">
<br />
<div id="showData"></div>
USERNAME:
<input type="text" id="username">
<br />
PASSWORD:
<input type="password" id="password">
<br />
<button dojoType="dijit.form.Button">
提交
<script type="dojo/method" event="onClick">
dojo.xhrPost({
url:'./login.do',
load:loginCallBack,
error:loginError,
content:{
username:dojo.byId('username').value,
password:dojo.byId('password').value,
encoding: "utf-8",
}
});
function loginCallBack(data,parameters){
dojo.byId('showData').innerHTML = data;
}
function loginError(data,parameters){
dojo.byId('showData').innerHTML = '服务器错误';
}
</script>
</button>
</body>
</html>
后台Action部分：
package org.sp.struts.action;
import java.io.IOException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.struts.action.Action;
import org.apache.struts.action.ActionForm;
import org.apache.struts.action.ActionForward;
import org.apache.struts.action.ActionMapping;
/**
* 登录后台
* @author 无尽de华尔兹
*
*/
public class LoginAction extends Action {
public ActionForward execute(ActionMapping mapping, ActionForm form,
HttpServletRequest request, HttpServletResponse response)
throws IOException {
request.setCharacterEncoding("utf-8");
response.setCharacterEncoding("utf-8");
String username = request.getParameter("username");
String password = request.getParameter("password");
response.getWriter().write(username + " " + password);
return null;
}
}
dojo 1.1.0 学习总结
一. 登陆案例
1.导入CSS样式
<style type="text/css">
@import "js/dojo-release-1.1.0/dojo/resources/dojo.css";
@import "js/dojo-release-1.1.0/dijit/themes/tundra/tundra.css";
</style>
2.添加dojo.js库
<script type="text/javascript" djConfig="parseOnLoad: true" src="js/dojo-release-1.1.0/dojo/dojo.js"></script>
3.导入组件
<script type="text/javascript">
dojo.require("dijit.form.Button");
</script>
4.页面元素可以通过脚本添加事件
<button dojoType="dijit.form.Button">
提交
<script type="dojo/method" event="onClick">
dojo.xhrPost({
url:'./login.do',
load:loginCallBack,
error:loginError,
content:{
username:dojo.byId('username').value,
password:dojo.byId('password').value,
encoding: "utf-8",
}
});
function loginCallBack(data,ioArgs){
dojo.byId('showData').innerHTML = data;
}
function loginError(data,ioArgs){
dojo.byId('showData').innerHTML = '服务器错误';
}
</script>
</button>
注：
可以直接在元素标签中间添加脚本片断<script type="dojo/method" event="onClick"></script>
Ajax功能可以通过dojo.xhrGet();和dojo.xhrPost();进行操作，其中的url为请求地址，load为回调函数，error 为错误处理函数，content为请求参数。也可以通过 fromNode:表单ID名称 的方式将表单提交。
回调函数和错误处理函数的2个参数不能省略。但名字可以任意取。
可以通过encoding: "utf-8",将参数设置成UTF-8编码。
5.后台Action接收处理数据
request.setCharacterEncoding("utf-8");
response.setCharacterEncoding("utf-8");
String username = request.getParameter("username");
String password = request.getParameter("password");
response.getWriter().write(username + " " + password);
注：后台程序应设置成UTF-8编码接受数据。
先看一下整个代码：
前台页面部分：
<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>登陆案例</title>
<style type="text/css">
@import "js/dojo-release-1.1.0/dojo/resources/dojo.css";
@import "js/dojo-release-1.1.0/dijit/themes/tundra/tundra.css";
</style>
<script type="text/javascript" djConfig="parseOnLoad: true"
src="js/dojo-release-1.1.0/dojo/dojo.js"></script>
<script type="text/javascript">
dojo.require("dijit.form.Button");
</script>
</head>
<body class="tundra">
<br />
<div id="showData"></div>
USERNAME:
<input type="text" id="username">
<br />
PASSWORD:
<input type="password" id="password">
<br />
<button dojoType="dijit.form.Button">
提交
<script type="dojo/method" event="onClick">
dojo.xhrPost({
url:'./login.do',
load:loginCallBack,
error:loginError,
content:{
username:dojo.byId('username').value,
password:dojo.byId('password').value,
encoding: "utf-8",
}
});
function loginCallBack(data,parameters){
dojo.byId('showData').innerHTML = data;
}
function loginError(data,parameters){
dojo.byId('showData').innerHTML = '服务器错误';
}
</script>
</button>
</body>
</html>
后台Action部分：
package org.sp.struts.action;
import java.io.IOException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.struts.action.Action;
import org.apache.struts.action.ActionForm;
import org.apache.struts.action.ActionForward;
import org.apache.struts.action.ActionMapping;
/**
* 登录后台
* @author 无尽de华尔兹
*
*/
public class LoginAction extends Action {
public ActionForward execute(ActionMapping mapping, ActionForm form,
HttpServletRequest request, HttpServletResponse response)
throws IOException {
request.setCharacterEncoding("utf-8");
response.setCharacterEncoding("utf-8");
String username = request.getParameter("username");
String password = request.getParameter("password");
response.getWriter().write(username + " " + password);
return null;
}
}
dojo 1.1.0 学习总结
一. 登陆案例
1.导入CSS样式
<style type="text/css">
@import "js/dojo-release-1.1.0/dojo/resources/dojo.css";
@import "js/dojo-release-1.1.0/dijit/themes/tundra/tundra.css";
</style>
2.添加dojo.js库
<script type="text/javascript" djConfig="parseOnLoad: true" src="js/dojo-release-1.1.0/dojo/dojo.js"></script>
3.导入组件
<script type="text/javascript">
dojo.require("dijit.form.Button");
</script>
4.页面元素可以通过脚本添加事件
<button dojoType="dijit.form.Button">
提交
<script type="dojo/method" event="onClick">
dojo.xhrPost({
url:'./login.do',
load:loginCallBack,
error:loginError,
content:{
username:dojo.byId('username').value,
password:dojo.byId('password').value,
encoding: "utf-8",
}
});
function loginCallBack(data,ioArgs){
dojo.byId('showData').innerHTML = data;
}
function loginError(data,ioArgs){
dojo.byId('showData').innerHTML = '服务器错误';
}
</script>
</button>
注：
可以直接在元素标签中间添加脚本片断<script type="dojo/method" event="onClick"></script>
Ajax功能可以通过dojo.xhrGet();和dojo.xhrPost();进行操作，其中的url为请求地址，load为回调函数，error 为错误处理函数，content为请求参数。也可以通过 fromNode:表单ID名称 的方式将表单提交。
回调函数和错误处理函数的2个参数不能省略。但名字可以任意取。
可以通过encoding: "utf-8",将参数设置成UTF-8编码。
5.后台Action接收处理数据
request.setCharacterEncoding("utf-8");
response.setCharacterEncoding("utf-8");
String username = request.getParameter("username");
String password = request.getParameter("password");
response.getWriter().write(username + " " + password);
注：后台程序应设置成UTF-8编码接受数据。