通过ajax和form提交转向

末蓝、 2024-02-17 14:30 21阅读 0赞

这次本想尝试用ajax来提交表单来登录，但是遇到了很多问题，下面就是相关的总结。

ajax提交：

第一步：ajax提交给servlet数据，进过相关的处理后

第二步：servlet后可以通过下面的方法返回msg数据给前台

String msg= "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);

登录界面：

<%@  page language = *"java"*  import = *"java.util.\*"* pageEncoding = *"utf-8"* %>

<%

String path = request.getContextPath();

String basePath = request.getScheme()+ "://" \+request.getServerName()+ ":" \+request.getServerPort()+path+ "/" ;

%>

<! DOCTYPE  HTML  PUBLIC  "-//W3C//DTD HTML 4.01 Transitional//EN">

< html >

< head >

< base href = *"* <%= basePath %> *"* >

< title > My JSP 'login.jsp' starting page </ title >

< script  type = *"text/javascript"*  src = *"js/jquery-1.8.0.min.js"* ></ script >

< script type = *"text/javascript"* >

**function**  ajax\_submit()\{

**var** username=document.getElementsByName( "username" )\[0\].value;

**var**  password=document.getElementsByName( "password" )\[0\].value;

/\* //一定要加入jquery.js \*/

$.ajax(\{

url: '$\{pageContext.request.contextPath \}/Userservlet?method=login' ,

type: 'post' ,

data: 'username=' \+username+ '&password=' \+password,

success:  **function** (msg) \{

**if**  ((msg== "error" )) \{

alert( "用户名或者密码错误！！" );

\} **else if** ((msg== "success" ))

window.location.href= "$\{pageContext.request.contextPath\}/main.jsp" ;

\}

\});

\}

</ script >

</ head >

< body >

< div  align = *"center"*  style =" margin :  *auto* ;" >

<%-- <form action="" method="post">

\--%>

< table >

< tr >  用户名： < input  type = *"text"*  name = *"username"* ></ tr > < br >

< tr > 密码： < input  type = *"password"* name = *"password"*  ></ tr > < br >

< tr >  < input  type = *"submit"*  onclick = "ajax\_submit()" value = *"提交"* ></ tr >

</ table >

</  div >

<%-- </form>

\--%>

</ body >

</ html >

发表评论取消回复

表情：

评论列表（有 0 条评论，21人围观）

还没有评论，来说两句吧...

相关阅读

相关通过ajax和form提交转向

这次本想尝试用ajax来提交表单来登录，但是遇到了很多问题，下面就是相关的总结。 ajax提交：第一步：ajax提交给servlet数据，进过相关的处理后第二步：s

末蓝、/ 2024年02月17日 14:30/ 0 赞/ 22 阅读

相关使用ajax实现form提交

1、常见的form表单提交都是使用submit 直接提交给form表单中action的地址。常见的form表单提交 <form:form action="

深藏阁楼爱情的钟/ 2023年07月08日 14:28/ 0 赞/ 116 阅读

相关 form表单提交和ajax表单提交的区别

form表单提交和ajax表单提交的区别： > 1.ajax在提交，请求，接收时，都是异步进行的，网页不需要刷新。 > from表单提交时是新建一个页面，哪怕是提交给自己

灰太狼/ 2023年05月22日 22:29/ 0 赞/ 3 阅读

相关 Ajax提交form表单

Ajax提交form表单 $.ajax({ //几个参数需要注意一下 type: "PO

╰+攻爆jí腚メ/ 2022年12月11日 04:21/ 0 赞/ 275 阅读

相关使用ajax提交form表单

function mySubmit(){ var chapter=$("myForm").serialize(); $.ajax({ typ

比眉伴天荒/ 2022年08月23日 03:48/ 0 赞/ 294 阅读

相关 jquery提交ajax Form(未完成)

ajaxSubmit 和ajaxForm区别官方解释 What is the difference between ajaxForm and ajaxSubmit

淡淡的烟草味﹌/ 2022年08月19日 01:40/ 0 赞/ 193 阅读

相关 Ajax提交Form表单

1. 背景在java后台开发中，经常要从前端向后台提交表单数据。利用Ajax进行Form表单提交，是很常用的方法。本文主要讲解Ajax提交表单的基本应用。 2. Ajax

迷南。/ 2022年07月21日 01:47/ 0 赞/ 331 阅读

相关 ajax提交form表单

var form=document.getElementById("inspectForm");//inspectForm为Form表单的ID var f

浅浅的花香味﹌/ 2022年05月22日 22:12/ 0 赞/ 321 阅读

相关 ARTS Tip4 form的submit和ajax提交

说一下ajax提交和form.submit提交： `post`是一种`HTTP`动作，它是一种关于客户端和服务端如何沟通的`HTTP`的协议。 `HTML`使用`FORM`

短命女/ 2022年04月23日 18:22/ 0 赞/ 124 阅读

相关 layui form 表单ajax 提交

layui.use(['form','jquery'],function(){ //var form = layui.form(),

港控/mmm°/ 2021年09月30日 02:42/ 0 赞/ 876 阅读