Ajax提交form表单

Posted eclipse编程

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Ajax提交form表单相关的知识,希望对你有一定的参考价值。

Ajax提交form表单



Ajax提交form表单


我们在使用form表单的时候,点击submit按钮,一般会使得页面进行跳转,但是页面的跳转意味着我们把控制权交给了后台。

有时候我们希望让前端掌握控制权,比如我们在设计登录页面的时候,如果用户名和密码正确,我们在前端让它跳转到列表页面。

如果用户名或者密码错误,我们希望在登录页面给用户提示信息。一般这种异步的提交方式,我们都会想到通过Ajax对表单进行提交。


01

两种方式的注意事项

1) 在传统方式中,登录按钮的type为"submit"类型;

<input type="submit" value="登录">


2) 在ajax方式中,登录按钮的type为"button"类型;

<input type="button" onclick="login()" value="登录">

3) 在传统方式中,form表单的action=" "不为空;


02

常见的form提交方式

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><!DOCTYPE html><html><head>    <title>企业员工管理系统-登录</title>    <meta charset=UTF-8">     <link rel="shortcut icon" href="${path}/static/image/zd.png" type="image/x-icon" /></head><body><div> <form action="employee/login" method="post">        用户名:<input type="text" id="username" name="username"  placeholder="请输入账号" ><span id="s_username"></span></div>        密码:<input type="password" id="password" name="password"  maxlength="6"  placeholder="请输入密码"><span style="color:red" id="s_password"></span></div> <input type="submit" value="登录"> </form></div></body></html>

03

Ajax的方式提交form表单

//前端页面:<script>function login() { var username=$("#username").val(); var password=$("#password").val(); var roleType=$("input[type='radio']:checked").val(); $.ajax({ type: "POST", dataType: "json", url: "employee/login" , data: {"username":username,"password":password,"roleType":roleType}, success: function (result) { var span = $("#s_password"); if(result.userExsit){                   //登录成功,跳转到列表页面 window.location.href = "${path}/employee/list"; }else{                  //登录失败,给用户提示信息 alert("身份选择或者密码错误!"); } }, error : function() { alert("异常!"); } });      } </script>
 <form action="" method="post"> <div class="form"> <img code-snippet__keyword">static/image/person.png" alt="账号" > <input type="text" id="username" name="username" placeholder="请输入账号" ><span id="s_username"></span></div> <div class="form"> <img code-snippet__keyword">static/image/password.png" alt="密码" > <input type="password" id="password" name="password" maxlength="6" placeholder="请输入密码"><span style="color:red" id="s_password"></span></div> <div class="radio"><label>身份:</label> <input type="radio" name="roleType" value="1" checked>&nbsp;管理员 <input type="radio" name="roleType" value="0">&nbsp;员工 </div> <input type="button" onclick="login()" value="登录"> </form>   //后台Controller  @RequestMapping("/login") @ResponseBody public Object login(HttpServletRequest request,String username,String password,String roleType,Model model) { //传参数 Map<String,Object> param=new HashMap<String,Object>(); param.put("username", username); param.put("password", password);    param.put("roleType", Integer.parseInt(roleType));        Map<String,Object> result=new HashMap<String,Object>();    Employee emp=empService.login(param); if(!StringUtils.isEmpty(emp)) { HttpSession session = request.getSession(); session.setAttribute("employee", emp); result.put("employee",emp); result.put("userExsit",true); }else { result.put("userExsit",false);    } return result; }


END /


作者简介一颗雷布斯,坚持学习的程序猿一枚,不爱穿格子衫,发量超级多,喜欢解决各种bug。

Ajax提交form表单




以上是关于Ajax提交form表单的主要内容,如果未能解决你的问题,请参考以下文章

jQuery ajax表单提交

用ajax提交多个form表单

使用JQuery的.ajax()提交表单后当前页面表单内容被清空,请问如何保留数据?

如何使用ajax 提交easyUI form表单

ajax提交form表单问题

jQuery ajax提交form表单