struts2中怎样应用ajax控制提交请求后,页面不跳转,同时alert出相关处理信息?
2个回答
展开全部
异步通信,建议用jquery,方便点下面是个注册页面jquery的例子<script type="text/javascript" src="js/jquery-1.5.min.js" ></script>
$(document).ready(function(){
$("#btn").click(function(){
var u_id = $("#userId").val();
var u_pwd = $("#pwd").val();
var u_nkName = $("#userNickName").val();
var u_email = $("#userEmail").val();
alert(u_id+" "+u_pwd+" "+u_nkName+" "+u_email);
$.post("<%=request.getContextPath()%>/JqueryUser.do",
{
u_id:u_id,
u_pwd:u_pwd,
u_nkName:u_nkName,
u_email:u_email
},
function(data,status){
if(data == "fail1"){
$("#resultDIV ").innerHTML = "用户名已存在 ";
}else if(data == "fail2"){
$("#resultDIV ").innerHTML = "用户名输入不合法 ";
}else if(data == "fail3"){
$("#resultDIV ").innerHTML = "密码 输入不合法 ";
}else if(data == "fail4"){
$("#resultDIV ").innerHTML = "昵称 输入不合法 ";
}else if(data == "fail5"){
$("#resultDIV ").innerHTML = "邮箱 输入不合法 ";
}else if(data == "success"){
$("form").submit();
}
});
});
});
function里的data是返回值,你可以用它进行处理,$("#btn").click是id="btn"的被点击后产生的事件{里面的是传递的值};
下面是ajax的,麻烦的多
<script><!--
function createXMLHttpRequest(){
var xmlHttp = false;
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e2) {
xmlHttp = false;
}
}
if (!xmlHttp) {
xmlHttp = new XMLHttpRequest();
}
return xmlHttp;
}
function sendAJAXRequest(){
var userSex;
var userId = document.myForm.userId.value;
var pwd = document.myForm.pwd.value;
var userNickName = document.myForm.userNickName.value;
var userEmail = document.myForm.userEmail.value;
var userSex_1 = document.getElementsByName("userSex");
for(var i=0; i<userSex_1.length; i++){
if (userSex_1[i].checked ==true){
userSex = userSex_1[i].value;
break;
}
}
alert(userId+" "+pwd+" "+userNickName+ " "+userEmail+" "+userSex);
var requestURL = "<%=request.getContextPath()%>/ajaxQueryUser.do?userId=" +userId +"&pwd=" +pwd+"&userNickName="+userNickName+"&userEmail="+userEmail+"&userSex="+userSex;
var xmlHttp = createXMLHttpRequest();
xmlHttp.open("post", requestURL, true); // true表示异步通信
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xmlHttp.onreadystatechange = function(){
if (xmlHttp.readyState == 4) {
if(xmlHttp.status == 200){
var response = xmlHttp.responseText;
if(response == "success"){
document.getElementById("resultDIV").innerHTML = "注册成功,正在跳转。。。。。 ";
setTimeout(function(){
location.href="<%=request.getContextPath()%>/main.do";
},3000);
}
else if(response == "fail1"){
document.getElementById("resultDIV").innerHTML = "用户名已存在 ";
}
else if(response == "fail2"){
document.getElementById("resultDIV").innerHTML = "用户名不能为空 ";
}
else if(response == "fail3"){
document.getElementById("resultDIV").innerHTML = "密码不能为空 ";
}
else if(response == "fail4"){
document.getElementById("resultDIV").innerHTML = " 昵称不能为空 ";
}
else if(response == "fail5"){
document.getElementById("resultDIV").innerHTML = "邮箱 不能为空 ";
}
else if(response == "fail6"){
document.getElementById("resultDIV").innerHTML = "请选择 性别 ";
}
}else{
alert("error"+xmlHttp.status);
}
}
}; //回调函数
xmlHttp.send(null);
}
</script>
$(document).ready(function(){
$("#btn").click(function(){
var u_id = $("#userId").val();
var u_pwd = $("#pwd").val();
var u_nkName = $("#userNickName").val();
var u_email = $("#userEmail").val();
alert(u_id+" "+u_pwd+" "+u_nkName+" "+u_email);
$.post("<%=request.getContextPath()%>/JqueryUser.do",
{
u_id:u_id,
u_pwd:u_pwd,
u_nkName:u_nkName,
u_email:u_email
},
function(data,status){
if(data == "fail1"){
$("#resultDIV ").innerHTML = "用户名已存在 ";
}else if(data == "fail2"){
$("#resultDIV ").innerHTML = "用户名输入不合法 ";
}else if(data == "fail3"){
$("#resultDIV ").innerHTML = "密码 输入不合法 ";
}else if(data == "fail4"){
$("#resultDIV ").innerHTML = "昵称 输入不合法 ";
}else if(data == "fail5"){
$("#resultDIV ").innerHTML = "邮箱 输入不合法 ";
}else if(data == "success"){
$("form").submit();
}
});
});
});
function里的data是返回值,你可以用它进行处理,$("#btn").click是id="btn"的被点击后产生的事件{里面的是传递的值};
下面是ajax的,麻烦的多
<script><!--
function createXMLHttpRequest(){
var xmlHttp = false;
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e2) {
xmlHttp = false;
}
}
if (!xmlHttp) {
xmlHttp = new XMLHttpRequest();
}
return xmlHttp;
}
function sendAJAXRequest(){
var userSex;
var userId = document.myForm.userId.value;
var pwd = document.myForm.pwd.value;
var userNickName = document.myForm.userNickName.value;
var userEmail = document.myForm.userEmail.value;
var userSex_1 = document.getElementsByName("userSex");
for(var i=0; i<userSex_1.length; i++){
if (userSex_1[i].checked ==true){
userSex = userSex_1[i].value;
break;
}
}
alert(userId+" "+pwd+" "+userNickName+ " "+userEmail+" "+userSex);
var requestURL = "<%=request.getContextPath()%>/ajaxQueryUser.do?userId=" +userId +"&pwd=" +pwd+"&userNickName="+userNickName+"&userEmail="+userEmail+"&userSex="+userSex;
var xmlHttp = createXMLHttpRequest();
xmlHttp.open("post", requestURL, true); // true表示异步通信
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xmlHttp.onreadystatechange = function(){
if (xmlHttp.readyState == 4) {
if(xmlHttp.status == 200){
var response = xmlHttp.responseText;
if(response == "success"){
document.getElementById("resultDIV").innerHTML = "注册成功,正在跳转。。。。。 ";
setTimeout(function(){
location.href="<%=request.getContextPath()%>/main.do";
},3000);
}
else if(response == "fail1"){
document.getElementById("resultDIV").innerHTML = "用户名已存在 ";
}
else if(response == "fail2"){
document.getElementById("resultDIV").innerHTML = "用户名不能为空 ";
}
else if(response == "fail3"){
document.getElementById("resultDIV").innerHTML = "密码不能为空 ";
}
else if(response == "fail4"){
document.getElementById("resultDIV").innerHTML = " 昵称不能为空 ";
}
else if(response == "fail5"){
document.getElementById("resultDIV").innerHTML = "邮箱 不能为空 ";
}
else if(response == "fail6"){
document.getElementById("resultDIV").innerHTML = "请选择 性别 ";
}
}else{
alert("error"+xmlHttp.status);
}
}
}; //回调函数
xmlHttp.send(null);
}
</script>
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
2013-03-30
展开全部
给你一个例子吧,希望对你有所帮助
$("#txtEmail").blur(function() {
$('#email_info').text('');
var emailval = $(this).val();
if (emailval == null || emailval == "") {
$('#email_info').text("用户名不能为空");
} else {
var regex = new RegExp("^(\\w+@)(\\w+.)+\\w+$");
if (!regex.test(emailval)) {
$('#email_info').text("email格式不正确");
} else {
$.post("checkuser.action", {
"email" : emailval
}, function(data) {
var flag = data.ok;
//alert(flag);
if (flag) {
subFlag.emailInfo = true;
$('#email_info').html('<img align="bottom" src="../images/right.gif" width="14" height="14" style="display:inline" align="bottom"/>');
} else {
$('#email_info').text('用户名已存在');
}
}, "json");
}
$("#txtEmail").blur(function() {
$('#email_info').text('');
var emailval = $(this).val();
if (emailval == null || emailval == "") {
$('#email_info').text("用户名不能为空");
} else {
var regex = new RegExp("^(\\w+@)(\\w+.)+\\w+$");
if (!regex.test(emailval)) {
$('#email_info').text("email格式不正确");
} else {
$.post("checkuser.action", {
"email" : emailval
}, function(data) {
var flag = data.ok;
//alert(flag);
if (flag) {
subFlag.emailInfo = true;
$('#email_info').html('<img align="bottom" src="../images/right.gif" width="14" height="14" style="display:inline" align="bottom"/>');
} else {
$('#email_info').text('用户名已存在');
}
}, "json");
}
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询