通过ajax和form提交 转向

前端之家收集整理的这篇文章主要介绍了通过ajax和form提交 转向前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
这次本想尝试用ajax来提交表单来登录,但是遇到了很多问题,下面就是相关的总结。
ajax提交:
第一步:ajax提交给servlet数据,进过相关的处理后
第二步:servlet后可以通过下面的方法返回msg数据给前台
Stringmsg= "error" ; response.getWriter().write(msg);
返回信息!(如果是要转跳进行第三部,否则对返回的信息做相应的处理,如本例子的弹出提示框。)
第三部:通过前台中的js来实现页面跳转(如果是放在web-inf中jsp,jsp要在web.xml中部署后,这样的url才会有效,参考:http://blog.csdn.net/wanghaiping1993/article/details/23510411中关于web-inf中jsp如何访问
window.location.href= "${pageContext.request.contextPath}/main.jsp" ;

form提交:
第一步:写好form表单后,向servlet提交信息
第二部:通过下面的语句进行重定向来实现页面跳转(这样使用,在web-inf中jsp就不用在web-inf中进行部署了)
request.getRequestDispatcher("/WEB-INF/jsp/***.jsp").forward(request,response);


登录界面:
<%@ @H_301_91@page language = "java" import = "java.util.*" pageEncoding = "utf-8" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+ "://" +request.getServerName()+ ":" +request.getServerPort()+path+ "/" ;
%>

<! @H_301_91@DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
< @H_301_91@html >
< @H_301_91@head >
< @H_301_91@base href = " <%= basePath %> " >
< @H_301_91@title > My JSP 'login.jsp' starting page </ @H_301_91@title >
< @H_301_91@script type = "text/javascript" src = "js/jquery-1.8.0.min.js" ></ @H_301_91@script >
< @H_301_91@script type = "text/javascript" >
function ajax_submit(){
var username=document.getElementsByName( "username" )[0].value;
password=document.getElementsByName( "password" /* //一定要加入jquery.js */
$.ajax({
url: '${pageContext.request.contextPath }/Userservlet?method=login' ,
type: 'post' data: 'username=' +username+ '&password=' +password,239)">success: (msg) {
if ((msg== "error" )) {
alert( "用户名或者密码错误!!" );
} else if "success" ))
window.location.href= "${pageContext.request.contextPath}/main.jsp" ;
}
});
}
</ @H_301_91@script >

</ @H_301_91@head >
< @H_301_91@body >
< @H_301_91@div align = "center" style =" margin : auto ;" >
<%-- <form action="" method="post">
--%>
< @H_301_91@table >
< @H_301_91@tr > 用户名 < @H_301_91@input type = "text" name = "username" ></ @H_301_91@tr >< @H_301_91@br >
< @H_301_91@tr > 密码: < @H_301_91@input type = "password" name = "password" ></ @H_301_91@tr >< @H_301_91@br >
< @H_301_91@tr > < @H_301_91@input type = "submit" onclick = "ajax_submit()" value = "提交" ></ @H_301_91@tr >
</ @H_301_91@table >
</ div >
<%-- </form>
--%>
</ @H_301_91@body >
</ @H_301_91@html >

猜你在找的Ajax相关文章