[code]Ajax Form Post
基于Ajax 技术我们可以页面无刷新提交,给用户带来了更好的体验。然而我们每次在后台提交的时候,却有不少的麻烦。
考虑一个简单的登陆/注册校验用户名是否存在的Case, 下面是Login.jsp
<form name="loginFrm" action=<c:urlvalue="/servlet/doLogin.htm"/>method="post">
<input name="adminUser" type="hidden" value="Admin" />
<p align="center">Login</p><br>
UserName:
<input type="text" name="userName" value="<c:outvalue="${viewState.userName}"/>">
<input type="button" value="Check"
οnclick="doCheckSubmit('<c:urlvalue='/servlet/doNameCheck.htm'/>')"/>
<div id="checkResultDiv" ></div>
<br>
Password:<input type="password" name="password">
<br>
<p>
<input type="submit" value="Submit" name="btnLogin" />
<input type="reset" value="Reset" name="btnReset" />
</p>
</form>
如果我们用Ajax提交的话,如下
function doCheckSubmit( actionUrl )
{
var ajaxObj = new AjaxObject();
actionUrl = actionUrl + "?userName=" + ocument.loginFrm.userName.value;
var res = ajaxObj.httpPost(actionUrl);
document.getElementById('checkResultDiv').innerHTML = '' + res + '';
}
ActionUrl中的Form对象,即参数必须我们手工每次去构造,如果参数很多的话,会比较麻烦。
而在服务器端,我们是如下处理的:
/**
* doNameCheckOld on user submit
*/
public ModelAndView doNameCheckOld(HttpServletRequest req, HttpServletResponse res, UserInfo info ) throws Exception {
// TODO Auto-generated method stub
// 注意:此时info的值为空
String userName = req.getParameter("userName");
if ( userName != null && userName.trim().toUpperCase().equals("USERNAME") )
{
res.getWriter().write(userName + " is already been used.");
}
else
{
res.getWriter().write("userName is not been used.");
}
return null;
}
此时info的值为空,因为我们使用Ajax提交,Ajax只是局部提交,所以我们后台无法取到Form的参数,只有靠传递参数来获取。String userName = req.getParameter("userName"); 所以此时cmd Model 完全无法发挥作用,当传递参数很多的时候难免会复杂容易出错。
解决方案:
Ajax 提供Form提交帮助函数,此时服务器端的cmd Model也可以用了。
//-------------------------------------------------------
// Date : 2007/01/25
// Desc : http Form PostForm
// include type : hidden,text,select, checkbox,radio,file
// none-include : button,submit,reset,image
// Params : frmID: Form's ID or Name
//-------------------------------------------------------
function httpPostForm(frmID, URL, data, contentType) {
//alert(URL);
URL += ('?' + getFormQueryString(frmID));
//alert(URL);
this.init(URL,data,contentType);
return trim(this.httpObj.responseText);
}
//-------------------------------------------------------
// Date : 2007/01/25
// Desc : Get all the from object
// include type : hidden,text,select, checkbox,radio,file
// none-include : button,submit,reset,image
// Params : frmID: Form's ID or Name
//-------------------------------------------------------
function getFormQueryString( frmID )
{
var i,queryString = "", and = "";
var item; // for each form's object
var itemValue;// store each form object's value
for( i=0;i
{
item = frmID[i];// get form's each object
if ( item.name!='' )
{
if ( item.type == 'select-one' )
{
itemValue = item.options[item.selectedIndex].value;
}
else if ( item.type=='checkbox' || item.type=='radio')
{
if ( item.checked == false )
{
continue;
}
itemValue = item.value;
}
else if ( item.type == 'button' || item.type == 'submit' ||
tem.type == 'reset' || item.type == 'image')
{// ignore this type
continue;
}
else
{
itemValue = item.value;
}
itemValue = encodeURIComponent(itemValue);
queryString += and + item.name + '=' + itemValue;
and="&";
}
}
return queryString;
}
JSP
function doCheckSubmit( actionUrl )
{
var ajaxObj = new AjaxObject();
//actionUrl = actionUrl + "?userName=" + document.loginFrm.userName.value;
var res = ajaxObj.httpPostForm(loginFrm,actionUrl);
document.getElementById('checkResultDiv').innerHTML = '' + res + '';
}
-----------------------------------------------------------------------------------------后台
/**
* do Login on user submit
*/
public ModelAndView doNameCheck(HttpServletRequest req, HttpServletResponse res,
UserInfo info ) throws Exception {
// TODO Auto-generated method stub
//String userName = req.getParameter("userName");
if ( info != null )
{
_logger.info(info.toString());
}
if ( info.getUserName() != null && info.getUserName().trim().toUpperCase().equals("USERNAME") )
{
res.getWriter().write(info.getUserName() + " is already been used.");
}
else
{
res.getWriter().write("userName is not been used.");
}
return null;
}[/code]
基于Ajax 技术我们可以页面无刷新提交,给用户带来了更好的体验。然而我们每次在后台提交的时候,却有不少的麻烦。
考虑一个简单的登陆/注册校验用户名是否存在的Case, 下面是Login.jsp
<form name="loginFrm" action=<c:urlvalue="/servlet/doLogin.htm"/>method="post">
<input name="adminUser" type="hidden" value="Admin" />
<p align="center">Login</p><br>
UserName:
<input type="text" name="userName" value="<c:outvalue="${viewState.userName}"/>">
<input type="button" value="Check"
οnclick="doCheckSubmit('<c:urlvalue='/servlet/doNameCheck.htm'/>')"/>
<div id="checkResultDiv" ></div>
<br>
Password:<input type="password" name="password">
<br>
<p>
<input type="submit" value="Submit" name="btnLogin" />
<input type="reset" value="Reset" name="btnReset" />
</p>
</form>
如果我们用Ajax提交的话,如下
function doCheckSubmit( actionUrl )
{
var ajaxObj = new AjaxObject();
actionUrl = actionUrl + "?userName=" + ocument.loginFrm.userName.value;
var res = ajaxObj.httpPost(actionUrl);
document.getElementById('checkResultDiv').innerHTML = '' + res + '';
}
ActionUrl中的Form对象,即参数必须我们手工每次去构造,如果参数很多的话,会比较麻烦。
而在服务器端,我们是如下处理的:
/**
* doNameCheckOld on user submit
*/
public ModelAndView doNameCheckOld(HttpServletRequest req, HttpServletResponse res, UserInfo info ) throws Exception {
// TODO Auto-generated method stub
// 注意:此时info的值为空
String userName = req.getParameter("userName");
if ( userName != null && userName.trim().toUpperCase().equals("USERNAME") )
{
res.getWriter().write(userName + " is already been used.");
}
else
{
res.getWriter().write("userName is not been used.");
}
return null;
}
此时info的值为空,因为我们使用Ajax提交,Ajax只是局部提交,所以我们后台无法取到Form的参数,只有靠传递参数来获取。String userName = req.getParameter("userName"); 所以此时cmd Model 完全无法发挥作用,当传递参数很多的时候难免会复杂容易出错。
解决方案:
Ajax 提供Form提交帮助函数,此时服务器端的cmd Model也可以用了。
//-------------------------------------------------------
// Date : 2007/01/25
// Desc : http Form PostForm
// include type : hidden,text,select, checkbox,radio,file
// none-include : button,submit,reset,image
// Params : frmID: Form's ID or Name
//-------------------------------------------------------
function httpPostForm(frmID, URL, data, contentType) {
//alert(URL);
URL += ('?' + getFormQueryString(frmID));
//alert(URL);
this.init(URL,data,contentType);
return trim(this.httpObj.responseText);
}
//-------------------------------------------------------
// Date : 2007/01/25
// Desc : Get all the from object
// include type : hidden,text,select, checkbox,radio,file
// none-include : button,submit,reset,image
// Params : frmID: Form's ID or Name
//-------------------------------------------------------
function getFormQueryString( frmID )
{
var i,queryString = "", and = "";
var item; // for each form's object
var itemValue;// store each form object's value
for( i=0;i
{
item = frmID[i];// get form's each object
if ( item.name!='' )
{
if ( item.type == 'select-one' )
{
itemValue = item.options[item.selectedIndex].value;
}
else if ( item.type=='checkbox' || item.type=='radio')
{
if ( item.checked == false )
{
continue;
}
itemValue = item.value;
}
else if ( item.type == 'button' || item.type == 'submit' ||
tem.type == 'reset' || item.type == 'image')
{// ignore this type
continue;
}
else
{
itemValue = item.value;
}
itemValue = encodeURIComponent(itemValue);
queryString += and + item.name + '=' + itemValue;
and="&";
}
}
return queryString;
}
JSP
function doCheckSubmit( actionUrl )
{
var ajaxObj = new AjaxObject();
//actionUrl = actionUrl + "?userName=" + document.loginFrm.userName.value;
var res = ajaxObj.httpPostForm(loginFrm,actionUrl);
document.getElementById('checkResultDiv').innerHTML = '' + res + '';
}
-----------------------------------------------------------------------------------------后台
/**
* do Login on user submit
*/
public ModelAndView doNameCheck(HttpServletRequest req, HttpServletResponse res,
UserInfo info ) throws Exception {
// TODO Auto-generated method stub
//String userName = req.getParameter("userName");
if ( info != null )
{
_logger.info(info.toString());
}
if ( info.getUserName() != null && info.getUserName().trim().toUpperCase().equals("USERNAME") )
{
res.getWriter().write(info.getUserName() + " is already been used.");
}
else
{
res.getWriter().write("userName is not been used.");
}
return null;
}[/code]