Ajax Form Post

[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]