前端表单提交方式大全
1.获取input数据封装成json格式提交。
<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Add User</title><script type="text/javascript" src="${pageContext.request.contextPath}/resource/script/jquery-1.9.1.min.js"></script>
<script type="text/javascript">$(document).ready(function(){$("#button_submit").click(function(){var name = $("#userName").val();var pass = $("#password").val();var user = {userName:name,password:pass};//拼装成json格式$.ajax({type:"POST",url:"${pageContext.request.contextPath}/user/addUser4",data:user,success:function(data){alert("成功");},error:function(e) {alert("出错："+e);}});});});
</script></head>
<body><form><table><tr><td>账号</td><td><input type="text" id="userName" name="userName"></td></tr><tr><td>密码</td><td><input type="password" id="password" name="password"></td></tr><tr><td> </td><td><input type="button" id="button_submit" value="提交"></td></tr></table></form>
</body>
</html>2.序列化表单提交。
使用jQuery的serializeArray() 方法序列化表单元素
如果表单元素很多，手工拼装成json数据非常麻烦，可以使用jQuery提供的serializeArray()方法序列化表单元素，返回json数据结构数据。
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Add User</title>
<script type="text/javascript" src="${pageContext.request.contextPath}/resource/script/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#button_submit").click(function(){
//序列化表单元素，返回json数据
var params = $("#userForm").serializeArray();
//也可以把表单之外的元素按照name value的格式存进来
//params.push({name:"hello",value:"man"});
$.ajax({
type:"POST",
url:"${pageContext.request.contextPath}/user/addUser5",
data:params,
success:function(data){
alert("成功");
},
error:function(e) {
alert("出错："+e);
}
});
});
});
</script>
</head>
<body>
<form id="userForm">
<table>
<tr>
<td>账号</td>
<td>
<input type="text" id="userName" name="userName">
</td>
</tr>
<tr>
<td>密码</td>
<td>
<input type="password" id="password" name="password">
</td>
</tr>
<tr>
<td> </td>
<td>
<input type="button" id="button_submit" value="提交">
</td>
</tr>
</table>
</form>
</body>
</html>
参考：https://www.cnblogs.com/luxh/archive/2013/03/14/2960152.html
https://blog.csdn.net/kxj19980524/article/details/84388467
前端表单提交方式大全相关推荐
- 常见的Form表单提交方式
Form表单提交方式探究 在进行项目编程的时候,我们难免会去编写一些简单的前端页面. 而编写前端页面就力不开 form表单的支持. 下面就form表单的提交方式进行如下探寻 1.常规写法 在form表 ...
- python表单提交的两种方式_Flask框架学习笔记之表单基础介绍与表单提交方式
本文实例讲述了Flask框架学习笔记之表单基础介绍与表单提交方式.分享给大家供大家参考,具体如下: 表单介绍 表单是HTML页面中负责数据采集功能的部件.由表单标签,表单域和表单按钮组成.通过表单,将 ...
- Javaweb 快速入门之jsp基本语法表单提交方式request对象
文章目录 一.jsp简介 二.jsp之表单提交方式 三.jsp内置函数 总结 一.jsp简介 1.jsp简介 (1)jsp全称:java server pages java服务 ...
- Form表单, 4种常见的表单提交方式
浏览器行为:Form表单提交 1.form表单常用属性 1 2 3 4 action:url 地址,服务器接收表单数据的地址 method:提交服务器的http方法,一般为post和get name: ...
- 前端基础 至 form表单提交方式
原文:https://www.jianshu.com/p/8c947e7fee00 虽然前后端不分离项目越来越少了(vue等太香)但是有时候后端程序员 想自己搞不分离web页面的时候还是会用原生htm ...
- 传统form表单提交方式的文件上传与文件存储
引言 时隔一天,上一篇文章<文件存储>刚一停笔,今天上午就解决了困扰我已久的文件上传问题. 站在一个已实现功能的角度来重新看待这个文件上传的业务:编辑页面选择jar包,然后通过form表单 ...
- jQuery最简单的表单提交方式
第一步:绑定事件 常用的与ajax相关的事件参考如下: 1.$(selector).click(function) 2.$(selector).change(function) 3.$(selecto ...
- php 提交方式,php表单提交方式有哪些？
PHP表单提交有两种方式,分别是:1.GET方式,GET提交方式在地址上可以看到参数,不安全,提交的数据一般不超过255个字节:2.POST方式,POST提交方式在地址栏上看不到参数,安全,提交数据的 ...
- php form表单提交方式,form表单提交数据的几种方式
一.submit提交 一般表单提交通过type=submit实现,input type="submit",浏览器显示为button按钮,通过点击这个按钮提交表单数据跳转到/url. ...
最新文章
- Nmap （网络映射器）好东西啊
- （二）数据预处理 2019年研究生数学建模D题《汽车行驶工况构建》
- 004-2-拟合，drop-out
- modis数据介绍_【更新90篇】地理数据科学技术文章合集，欢迎大家点赞、在看、转发三连！...
- OpenCASCADE可视化：3D演示之3D术语表
- 开启mybatis日志_Mybatis源码分析之Cache二级缓存原理 （五）
- asp.net MVC5为WebAPI添加命名空间的支持
- centos7盘符 linux_linux_centos7_扩展磁盘空间
- ubuntu版本号查询
- 一个单片机搞定USB电阻式触摸屏，完美解决飞点问题。
- 多个pdf合并成一个pdf_手机里多个PDF合并成一个PDF的免费方法
- 如何在Eclipse上使用SVN,安装、提交、拉取代码、解决冲突等操作
- 几维安全：千锤百炼，锻造移动游戏安全防护黄金铠甲
- Design Patterns
- python 存储文件 文件名乱码_python打开中文文件名乱码怎么办
- WIN10合并磁盘扩展区是灰色的
- Vim内同时对多行增加或删除相同的内容
- flume安装以及应用
- 二叉查找树的创建及遍历
- 华为机试HJ21 简单密码