Ajax提交form表单
Posted eclipse编程
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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"%><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> 管理员<input type="radio" name="roleType" value="0"> 员工</div><input type="button" onclick="login()" value="登录"></form>//后台Controller@RequestMapping("/login")@ResponseBodypublic 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表单的主要内容，如果未能解决你的问题，请参考以下文章